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';

---

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">
      <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">
      <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>
  );
}

---

Valid Colors and Sizes

The values color, passiveType and size accept are exported as readonly tuples: switchColors for the two color props, and switchSizes for size. The prop types are built from them, so they hold the same values as the Props table below. Map over them to build a color or size picker, or check a value that arrives at runtime (from a CMS or a query string, say) before you pass it in: a value outside the tuple adds no modifier class. Import them from the package root. The valid value constants page covers the typing and validation idioms.

import { Block, Switch } from '@allxsmith/bestax-bulma';
import { switchColors, switchSizes } from '@allxsmith/bestax-bulma';

function example() {
  return (
    <>
      <Block display="flex" flexDirection="column">
        {switchColors.map(color => (
          <Switch key={color} color={color} defaultChecked>
            {color}
          </Switch>
        ))}
      </Block>
      <Block display="flex" flexDirection="column">
        {switchSizes.map(size => (
          <Switch key={size} size={size} defaultChecked>
            {size}
          </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">
      <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">
      <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">
        <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)

---

Related

• Checkbox - Standard checkbox input
• Field - Form field wrapper

---

Props

Prop	Type	Default	Description
color	'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'	—	Color variant for the switch.
size	'small' | 'normal' | 'medium' | 'large'	—	Size of the switch.
isRounded	boolean	false	Use rounded switch style.
isThin	boolean	false	Use thin switch style.
isOutlined	boolean	false	Use outlined switch style.
isRtl	boolean	false	Right-to-left layout (label on left).
passiveType	'primary' | 'link' | 'info' | 'success' | 'warning' | 'danger'	—	Color when the switch is in the off/passive state.
textColor	Bulma color | 'inherit' | 'current'	—	Text color helper.
children	React.ReactNode	—	Label content for the switch.
checked	boolean	—	Controlled checked state.
defaultChecked	boolean	false	Default checked state for uncontrolled usage.
disabled	boolean	false	Whether the switch is disabled.
className	string	—	Additional CSS classes.
onChange	(event: React.ChangeEvent<HTMLInputElement>) => void	—	Callback when switch state changes.
ref	React.Ref<HTMLInputElement>	—	Ref forwarded to the input element.
...	All standard <input> attributes and Bulma helper props	—	See Helper Props

---

CSS & Sass Variables

Switch registers these variables on its own .switch element. Override them there (or via className) — a value set on an ancestor is only inherited, and loses to the component-level declaration. See Theme.

CSS Variable	Sass Variable	Default
--bulma-switch-width	$switch-width	2.75em
--bulma-switch-height	$switch-height	1.5em
--bulma-switch-padding	$switch-padding	0.1875em
--bulma-switch-border-width	$switch-border-width	1px
--bulma-switch-background	$switch-background	var(--bulma-grey-light)
--bulma-switch-circle-color	$switch-circle-color	var(--bulma-scheme-main)
--bulma-switch-active-color	$switch-active-color	var(--bulma-primary)
--bulma-switch-radius	$switch-radius	var(--bulma-radius-rounded)
--bulma-switch-label-gap	$switch-label-gap	0.5em
--bulma-switch-transition-duration	$switch-transition-duration	var(--bulma-duration)
--bulma-switch-circle-shadow	$switch-circle-shadow	0 2px 3px rgba(10, 10, 10, 0.1)
--bulma-switch-focus-shadow	$switch-focus-shadow	0 0 0 0.125em rgba(0, 0, 0, 0.1)
--bulma-switch-thin-height	$switch-thin-height	0.75em
--bulma-switch-thin-circle-size	$switch-thin-circle-size	1.25em