Kaleidoscope | Toggle

Toggle

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>
      <Stack padding="m">
        <Toggle
          value={selected}
          onChange={(newSelected) => setSelected(newSelected)}
          label="Restrict total number of views"
        />
      </Stack>
    </Card>
  )
}

Best practices

Use a Toggle for turning a single option on or off
Use a ToggleGroup for turning multiple related options on or off
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>
  <Stack padding="m">
    <Toggle
      disabled={true}
      label="Disabled toggle"
    />
  </Stack>
</Card>

When a toggle is disabled, you can explain why by providing the getDisabledMessage prop — an async function that resolves with the message text. The toggle will automatically wrap itself in a Tooltip that appears on hover, positioned below the toggle.

If getDisabledMessage is not provided (or resolves to an empty string), no tooltip is shown.

Editable example
<Card>
  <Stack padding="m">
    <Toggle
      disabled={true}
      getDisabledMessage={() => Promise.resolve("You need editor permissions to change this")}
      label="Disabled with explanation"
    />
  </Stack>
</Card>

Dark theme

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

  return (
    <Card theme={CardTheme.Dark}>
      <Stack padding="m">
        <Toggle
          label="Dark themed toggle"
          value={selected}
          onChange={setSelected}
          theme="dark"
        />
      </Stack>
    </Card>
  )
}

Accessibility