Toggle is similar to a two-option radio group in function but is used for quickly switching between binary actions. Toggle must always be accompanied by a label, and follows the same keyboard workflow as a checkbox.

Alternatives

Checkbox — For boolean values in forms.
Radio — For binary choices in forms.

Usage

A control used to quickly switch between two possible states. Toggles are only for binary actions that occur immediately after the user “flips” the toggle switch.

Do not use in forms — or other workflows that have "submit" behaviour.

Edit in Playroom

<Stack gap="small">
  <Inline gap="small">
    <Toggle id="unchecked-example" />
    <FieldLabel htmlFor="unchecked-example">Unchecked</FieldLabel>
  </Inline>
  <Inline gap="small">
    <Toggle checked id="checked-example" />
    <FieldLabel htmlFor="checked-example">Checked</FieldLabel>
  </Inline>
  <Inline gap="small">
    <Toggle disabled id="disabled-example" />
    <FieldLabel htmlFor="disabled-example">Disabled</FieldLabel>
  </Inline>
  <Inline gap="small">
    <Toggle disabled checked id="disabled-checked-example" />
    <FieldLabel htmlFor="disabled-checked-example">
      Disabled and Checked
    </FieldLabel>
  </Inline>
</Stack>

Controlled

The toggle is a controlled component, you must provide a checked state and onChange handler.

Edit in Playroom

let [checked, setChecked] = useState(false);
const id = 'demo-toggle';
return (
  <Stack gap="small">
    <FieldLabel htmlFor={id}>Toggle label</FieldLabel>
    <Toggle id={id} checked={checked} onChange={setChecked} />
  </Stack>
);

You may change the accessibility text, provided to screen readers, based on the context of the toggle. The default text is on/off.

Edit in Playroom

<Stack gap="small">
  <FieldLabel>Share my details</FieldLabel>
  <Toggle a11yText={{ on: 'Yes', off: 'No' }} />
</Stack>

Toggle

Usage

Controlled

A11y text