Docs draft
Switch
Component storyFigma component set ↗React component ↗DSDS entity ↗
When to use it
useSettings that apply the moment they flip: autoplay, subtitles, mature filter.
avoidChoices gathered behind a submit button.
checkboxStates
off — Switched off.
on — Switched on.
disabled — Not interactive; rendered with the lifted disabled tokens so it stays perceivable.
on disabled — Switched on and not interactive; the on state stays perceivable.
Design specifications
| track | 40x24, radius.full, 2px stroke, inside a 44px touch target |
| knob | 16px circle; slides 16px right when on; 120ms ease |
| track-off | color.border.strong |
| track-on | color.accent.base |
| knob-off | color.border.strong |
| knob-on | color.accent.base |
| track-disabled | color.border.subtle |
| knob-on-disabled | color.text.disabled |
| label | type.body via the children slot |
Accessibility
Space — Toggles; effect is immediate.
Tab — Focus ring 2px text.primary offset 3.
color.border.strong on color.bg.primary — Contracted at ≥ 3:1 by the build gate.
Native checkbox with role=switch. Never pair with a submit button; that contradiction is a Checkbox.