Forms
Switch
An on or off setting that takes effect immediately.
Live example
Sent two days before departure
Usage
<Switch label="Reduce motion" checked={reduced} onChange={setReduced} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
label | ReactNode | none | Visible label, referenced by aria-labelledby. |
checked? | boolean | none | Controlled state. |
defaultChecked? | boolean | false | Uncontrolled initial state. |
onChange? | (checked: boolean) => void | none | Called with the new state. |
description? | ReactNode | none | Help text. |
labelPosition? | 'start' | 'end' | 'end' | Label before or after the track. |
Do and don't
Do
- Use for preferences that apply right away, like theme or motion.
- Label the setting, not the state: "Reduce motion", not "On".
Don't
- Use inside a form that needs a submit; use Checkbox.
Accessibility
- A button with role switch and aria-checked, labelled by the visible text.
- The thumb moves and the track fills, so state is not shown by color alone.
Keyboard
| Keys | Action |
|---|---|
| Space, Enter | Toggles the switch |