Usage
Switches are the preferred way to adjust settings on mobile.
Use switches to:
- Toggle a single item on or off, on mobile and tablet
- Immediately activate or deactivate something
Principles
Familiar
Switches have been in user interfaces for a long time and should be used as expected.
Scannable
It should be visible at a glance if a switch has been selected, and selected items should be more visually prominent than unselected items.
Efficient
Switches make it easy to compare available options.
Behavior
A switch is successfully toggled when the switch thumb slides to the other side of the track upon user interaction.
Text label
The option that the switch controls, as well as the state it's in, should be made clear from the corresponding inline label.
Avoid creating a switch that includes the text "on" and "off" within the graphic itself. The switch alone should be sufficient.
When a user toggles a switch, its corresponding action takes effect immediately.
Display processing status
Because a switch shows the actual status of something, sometimes there is a delay in its change of state. In such cases, a processing status animation can be used.
An indicator can be used on the full screen to demonstrate status, as described in the progress indicator guidance. Processing status should not be indicated through an animation on the thumb of the switch because it will be harder to read and understand.
Theming
Specs
- Measurement 20
- Measurement 36