Switch
Immediate. Not a submit. On = signal fill.
Spec
- Visible label.
aria-labelif there is no visible label (icon rows). role="switch"aria-checked.- On fill is
--signal. Thumb uses ink-on-signal contrast. - Space toggles.
- Not for exclusive choice (Radio) or multi-select (Checkbox).
- The change takes effect immediately. Don't pair a Switch with a Save.
Live demo
Runnable controls. Not a screenshot. Paper / Ink in the header recolors tokens.
Immediate. On = signal fill. Space toggles.
Do / Don't
| Do | Don't |
|---|---|
| Pulse live / mute a stream. | Agree to terms (that's a checkbox). |
| Density compact / standard as radios. | Three switches as if they were exclusive. |
Motion
| Property | Duration | Easing | Trigger | Reduced motion |
|---|---|---|---|---|
translateX | 120ms --dur-fast | --ease-out | toggle | instant |
| background | 120ms --dur-fast | --ease-out | toggle | instant |
Accessibility
- Name is the label. Don't name it “On”.
- Contrast: signal fill is a UI control. The thumb must contrast with the track.
- Hit ≥44px.
- Keyboard: Space. Enter optional.
- These notes describe construction. They are not a guarantee of WCAG conformance. Validate with axe, keyboard, and operators. See Accessibility.