Introduction

The Switch component is used as an alternative for the Checkbox component. Except indeterminate and label are not supported.

Switch states

jsx

<Pane>
  <Switch marginBottom={16} />
  <Switch marginBottom={16} checked />
  <Switch marginBottom={16} disabled />
  <Switch marginBottom={16} disabled checked />
</Pane>

Sizes

The Switch will work with any height you pass it. Although it’s only ever used with: 16, 20 and 24.

jsx

<>
  <Switch height={16} checked marginBottom={majorScale(1)} />
  <Switch height={20} checked marginBottom={majorScale(1)} />
  <Switch height={24} checked marginBottom={majorScale(1)} />
</>

Controlled usage

The Switch component passes on the original event through the onChange handler. Use e.target.checked to get the latest value and update state accordingly.

jsx

function ControlledSwitchExample() {
  const [checked, setChecked] = React.useState(true)
  return <Switch checked={checked} onChange={(e) => setChecked(e.target.checked)} />
}