- Contents:
Switches are:
- 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
Guidelines
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.
Accessibility
Testing notes
Using keyboard only, with no screen reader running:
- Use key to navigate to the switch element to make sure a focus outline is visible
- Use [space] key to toggle switch element
Related elements
Related components
- Room preferences
- Notification preferences
- App preferences
Version History
| Date/Time of Change | Who Made the Change | Change Details |
|---|---|---|
| Sep. 13 2019 5:17pm | Ella Ip | Updated web pattern. |
| May. 08 2017 4:04pm | Initial content entry |