Skip to main content

Switch

Overview​

The Switch component provides a toggle switch for boolean on/off states. It's built on top of a checkbox input and supports multiple colors, sizes, and style variants. Perfect for settings pages, feature toggles, and preference selections.

Import​

import { Switch } from '@allxsmith/bestax-bulma';

Props​

PropTypeDefaultDescription
color'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'—Color variant for the switch.
size'small' | 'normal' | 'medium' | 'large'—Size of the switch.
isRoundedbooleanfalseUse rounded switch style.
isThinbooleanfalseUse thin switch style.
isOutlinedbooleanfalseUse outlined switch style.
isRtlbooleanfalseRight-to-left layout (label on left).
disabledbooleanfalseWhether the switch is disabled.
checkedboolean—Controlled checked state.
defaultCheckedbooleanfalseDefault checked state for uncontrolled usage.
onChange(e: ChangeEvent<HTMLInputElement>) => void—Callback when switch state changes.
passiveType'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'—Color when the switch is in the off/passive state.
textColor'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger' | 'black' | 'black-bis' | 'black-ter' | 'grey-darker' | 'grey-dark' | 'grey' | 'grey-light' | 'grey-lighter' | 'white' | 'light' | 'dark' | 'inherit' | 'current'—Text color helper.
childrenReact.ReactNode—Label content for the switch.
classNamestring—Additional CSS classes.
refReact.Ref<HTMLInputElement>—Ref forwarded to the input element.
...All standard HTML input props and Bulma helper props(See Helper Props)

Usage​

Basic Switch​

A simple switch with a label.

function example() {
  return <Switch>Enable notifications</Switch>;
}

Colors​

Switch with different color variants.

function example() {
  return (
    <Block display="flex" flexDirection="column" gap="4">
      <Switch color="primary" defaultChecked>
        Primary
      </Switch>
      <Switch color="link" defaultChecked>
        Link
      </Switch>
      <Switch color="info" defaultChecked>
        Info
      </Switch>
      <Switch color="success" defaultChecked>
        Success
      </Switch>
      <Switch color="warning" defaultChecked>
        Warning
      </Switch>
      <Switch color="danger" defaultChecked>
        Danger
      </Switch>
    </Block>
  );
}

Sizes​

Switch with different size variants.

function example() {
  return (
    <Block display="flex" flexDirection="column" gap="4">
      <Switch size="small" defaultChecked>
        Small
      </Switch>
      <Switch size="normal" defaultChecked>
        Normal
      </Switch>
      <Switch size="medium" defaultChecked>
        Medium
      </Switch>
      <Switch size="large" defaultChecked>
        Large
      </Switch>
    </Block>
  );
}

Rounded Style​

Switch with rounded (pill) style.

function example() {
  return (
    <Switch isRounded color="success" defaultChecked>
      Rounded switch
    </Switch>
  );
}

Thin Style​

Switch with thin track style.

function example() {
  return (
    <Switch isThin color="info" defaultChecked>
      Thin switch
    </Switch>
  );
}

Outlined Style​

Switch with outlined style.

function example() {
  return (
    <Block display="flex" flexDirection="column" gap="4">
      <Switch isOutlined color="primary" defaultChecked>
        Primary outlined
      </Switch>
      <Switch isOutlined color="success" defaultChecked>
        Success outlined
      </Switch>
    </Block>
  );
}

RTL Layout​

Switch with label on the left side.

function example() {
  return (
    <Switch isRtl color="primary" defaultChecked>
      Label on left
    </Switch>
  );
}

Disabled State​

Disabled switches.

function example() {
  return (
    <Block display="flex" flexDirection="column" gap="4">
      <Switch disabled>Disabled unchecked</Switch>
      <Switch disabled defaultChecked color="success">
        Disabled checked
      </Switch>
    </Block>
  );
}

Controlled Usage​

Switch with controlled state.

function example() {
  const [isEnabled, setIsEnabled] = useState(false);

  return (
    <Block>
      <Switch
        color="primary"
        checked={isEnabled}
        onChange={e => setIsEnabled(e.target.checked)}
      >
        Feature is {isEnabled ? 'enabled' : 'disabled'}
      </Switch>
      <Paragraph mt="2">
        State: <Strong>{isEnabled ? 'ON' : 'OFF'}</Strong>
      </Paragraph>
    </Block>
  );
}

Settings Panel Example​

Multiple switches for a settings panel.

function example() {
  const [settings, setSettings] = useState({
    notifications: true,
    darkMode: false,
    autoSave: true,
  });

  const updateSetting = key => e => {
    setSettings(prev => ({ ...prev, [key]: e.target.checked }));
  };

  return (
    <Block style={{ maxWidth: '300px' }}>
      <Title size="5">Settings</Title>
      <Block display="flex" flexDirection="column" gap="4">
        <Switch
          color="primary"
          checked={settings.notifications}
          onChange={updateSetting('notifications')}
        >
          Push notifications
        </Switch>
        <Switch
          color="info"
          checked={settings.darkMode}
          onChange={updateSetting('darkMode')}
        >
          Dark mode
        </Switch>
        <Switch
          color="success"
          checked={settings.autoSave}
          onChange={updateSetting('autoSave')}
        >
          Auto-save
        </Switch>
      </Block>
    </Block>
  );
}

Accessibility​

  • The Switch is built on a native checkbox input for proper keyboard navigation
  • Use the children prop to provide a visible label
  • For icon-only switches, provide an aria-label prop
  • The switch can be focused and toggled with keyboard (Space/Enter)