Switch
Binary control that allows users to toggle between two states like on/off.
Switches are interactive controls used to turn a setting or choice on or off. They’re commonly seen in settings or account configurations.
Also known as: Toggle switch, flip switch, light switch, binary switch, UISwitch (iOS), Switch (Android).
Anatomy
A. Label (required): Text indicating the purpose of the switch.
B. Description (optional): Optional text that can be used to describe the label in more detail.
C. Switch control (required): Interactive element used to toggle the switch on or off.
Usage
| When to use | When not to use |
|---|---|
| For settings that have an on/off or true/false state. | To switch between content views. Use a toggle button instead. In place of a checkbox or radio button. |
Best practices
- Don’t use switches in place of radio buttons or checkboxes, except when two radio buttons are being used for a yes/no, on/off, or true/false choice.
- Ensure labels are placed closed to the switch control so it’s clear they’re related.
- Ensure the filled state indicates the switch is in the “on” position.
Do Ensure changes are applied as soon as the switch is interacted with.
Don't Require additional steps before the selection is applied, unless its part of a longer form or settings page.
Do Keep labels consistent after users interact with the switch.
Don't Change the labels based on the switch state.
Content
- Use sentence case without punctuation for all labels.
- Avoid acronyms or jargon.
- Keep labels short to avoid unnecessary truncation.
- Phrase labels to describe what the switch will do in the “on” position. For example, toggling to the “on” position should make the statement true.
- Use full sentences with proper punctuation for descriptions.
- Limit descriptions to one to two brief sentences.
