← All patterns · Input widgets
Switch
On/off toggle, semantically distinct from a checkbox.
Pattern
A switch is a binary toggle with explicit on / off semantics, distinct from a checkbox (which represents selection). Common in settings panels.
Roles
switch
States and properties
aria-checked- true (on) / false (off).
Keyboard interaction
- Space
- Toggle state.
- Enter
- Toggle state (often).
WCAG criteria
- 2.1.1 — Keyboard
- 4.1.2 — Name, Role, Value
Canonical reference
More
- All patterns
- WidgetPatternAnalyzer — the analyser that validates these patterns.
- Back to Paradise