Switch

Usage

Import the component and render it.

import { Switch } from 'src/components/Switch/Switch';

<Switch size="md" label="Switch label" caption="Caption text" />

Accessibility

Role: switch (Radix Switch: <button role="switch"> with aria-checked).

• Use a Switch for settings that apply immediately; use a Checkbox when the choice is submitted with a form.
• The label is a <label for> the switch: clicking it toggles the value.
• The caption is linked with aria-describedby and is not part of the accessible name.
• Hover/Pressed states also apply when pointing at the label, not only the track.

Size

Set the size prop: Small is "sm", Medium is "md".

<Switch size="sm" label="Switch label" />
<Switch size="md" label="Switch label" />

Toggled

Set the checked prop: Off is {false}, On is {true}.

<Switch label="Switch label" />
<Switch checked label="Switch label" />

States

Disabled comes from the disabled prop. Hover, Focus and Pressed follow the pointer and the keyboard: try them in the playground.

<Switch disabled label="Switch label" />

Used in

Switch is part of ListItem.

Actions

Pass callbacks to respond to the component.

import { Switch } from 'src/components/Switch/Switch';

<Switch
  size="md"
  label="Switch label"
  caption="Caption text"
  onCheckedChange={(checked) => console.log(checked)}
/>