Refine By

Switches

  • 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.

Style

 

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 components

  • Room preferences
  • Notification preferences
  • App preferences

Version History

Date/Time of ChangeWho Made the ChangeChange Details
Sep. 13 2019 5:17pm Updated web pattern.
May. 08 2017 4:04pm Initial content entry