title: Switch storybookPath: forms-switch--default isExperimentalPackage: false

A Switch is a binary toggle control that represents on/off states. Built on top of @radix-ui/react-switch for full accessibility support including keyboard navigation, ARIA attributes, and screen reader announcements.

Examples

Controlled

Switches can be both controlled and uncontrolled. To control a switch provide the checked state with a value you control, as well as an onCheckedChange function to set the new value when the switch is toggled.

const [checked, setChecked] = React.useState(false);

return (
  <Stack gap="large">
    <Switch checked={checked} onCheckedChange={setChecked}>
      <Text>Enable feature</Text>
    </Switch>
    {checked && <Text>Feature is enabled</Text>}
  </Stack>
);

Size

Switches are available in two sizes: small and medium.

<Stack gap="large">
  <Fieldset legend="Switch variations (small)" gap="large">
    <Switch size="small" checked={false}>
      Unchecked
    </Switch>
    <Switch size="small" checked>
      Checked
    </Switch>
    <Switch size="small" disabled>
      Disabled
    </Switch>
    <Switch size="small" checked disabled>
      Checked + disabled
    </Switch>
  </Fieldset>
  <Divider />
  <Fieldset legend="Switch variations (medium)" gap="large">
    <Switch size="medium" checked={false}>
      Unchecked
    </Switch>
    <Switch size="medium" checked>
      Checked
    </Switch>
    <Switch size="medium" disabled>
      Disabled
    </Switch>
    <Switch size="medium" checked disabled>
      Checked + disabled
    </Switch>
  </Fieldset>
</Stack>

Message and tone

The message is used to communicate the status of a field, such as an error message. This will be announced on focus and can be combined with a tone to illustrate intent. The supported tones are: critical, positive and neutral.

<Fieldset legend="Message and tone" gap="large">
  <Switch message="Critical message" tone="critical">
    Critical
  </Switch>
  <Switch message="Positive message" tone="positive">
    Positive
  </Switch>
  <Switch message="Neutral message" tone="neutral">
    Neutral
  </Switch>
</Fieldset>

Props

Switch