The Switch

Switches turn a setting on or off, and they're so familiar that it's easy to forget what makes them work. The Switch page walks you through building one the right way, from a label that names the setting and never changes to a change that applies as soon as people flip it.

New

• The Switch is a native checkbox with the switch role, so Space, its label and its form work before any script loads, and screen readers announce it as on or off.
• On and off differ by more than colour, its track and thumb have 3:1 against what's next to them, and it takes the Input's sizes and states, read-only included, with a hit area of at least 24 × 24px.
• Its checklist covers how screens use it too, like applying a setting right away rather than waiting for a Save button, saying when the change is saved and moving the switch back if it fails.
• It comes with its own contract, live examples and a tested reference implementation.