- A way to choose between binary options
- Native control for mobile app but also available on web as a custom component
- Sometimes called “toggles”
- Denote immediate results without needing an extra trigger button
Use an in-line label to show what the switch controls.
Use color and text label to clearly differentiate a switch’s on and off states.
The value text (On, Off) is always written out to avoid ambiguity. The text should be short, direct and less than 6 characters.
Use switches sparingly to:
- Activate or deactivate options independent of other options
- Denote immediate results
- Turn options on or off (not to choose between options
If you just want to allow multiple selections from a related group of options, like a list of search filters, use checkboxes instead.
Using keyboard only, with no screen reader running:
- Use [space] key to toggle switch element
- Room preferences
- Notification preferences
- App preferences
|Date/Time of Change||Who Made the Change||Change Details|
|Sep. 13 2019 5:17pm||Updated web pattern.|
|May. 08 2017 4:04pm||Initial content entry|