Components
Switch
Turns a setting on or off with an immediate effect.
Playground
Figma variant
👕 Size=Medium
🕹 State=Default
Active=True
Disabled=False
Error=False
Label (L)=False
Label (R)=TrueVariants
Sizes
States
Hover darkens the border to primary, keyboard focus adds the focus ring, error turns the border red, disabled flattens the control.
In a form
ChoiceGroup is the Form Checkbox / Radio / Switch pattern: a label, the options 16px apart, and a hint or error.
Tokens
| State | Track | Border | Thumb |
|---|---|---|---|
| Off | --color-surface-level-3 | — | --color-on-primary |
| Hover | --color-primary-soft | — | --color-on-primary |
| On | --color-primary | — | --color-on-primary |
| Error off / on | --color-error-soft / --color-error | — | --color-on-error |
| Disabled | --color-surface-level-1 | --color-surface-level-3 | --color-surface-level-3 |
Notes from Figma
- Figma has no focus state for Switch; code uses the focus ring.
- The Hover + Active variant moves the thumb back to the start in Figma; code keeps it at the end.
- The older “Switch - Deprecated” set uses a 12px label gap; code follows the current set (8px).
Figma to code
| Figma | React |
|---|---|
| 👕 Size = Medium / Large | size='medium' / 'large' |
| Active = True | checked |
| Label (L) / Label (R) | label="…" labelPosition='start' / 'end' |
| Error / Disabled | error / disabled |
| 🕹 State = Hover | :hover |
| Form Switch | <ChoiceGroup label hint> |