Skip to main content
Kaleidoscope

Toggle

AK
BL

A form component to use for enabling or disabling something

Default

What you get out of the box:

Editable example
() => {
  const [selected, setSelected] = React.useState(false);
  return (
    <Card>
      <div className="space-inset-m">
        <Toggle
          value={selected}
          onChange={(newSelected) => setSelected(newSelected)}
          label="Restrict total number of views"
        />
      </div>
    </Card>
  )
}

Best practices

  1. Use a Toggle for turning a single option on or off
  2. Use a ToggleGroup for turning multiple related options on or off
  3. Use a RadioButtonGroup instead of a Toggle where only one option can be selected from a list

Disabled

To prevent modifications to the toggle state, set the disabled prop to true.

Editable example
<Card>
  <div className="space-inset-m">
    <Toggle
      disabled={true}
      label="Disabled toggle"
    />
  </div>
</Card>

Dark theme

Editable example
() => {
  const [selected, setSelected] = React.useState(false);

  return (
    <Card theme={CardTheme.Dark}>
      <div className="space-inset-m">
        <Toggle
          label="Dark themed toggle"
          value={selected}
          onChange={setSelected}
          theme="dark"
        />
      </div>
    </Card>
  )
}

Accessibility

  • Always provide a meaningful label. If you need to visually hide the label, use the labelHidden prop. Screen readers will still read the hidden label when the toggle is focused.