Switches and Toggles
Switches and toggles are UI components which output boolean values; true/false. To a user they are restricted to making a choice between two options.
Key Points
- Switches and and toggles have different use cases
- Switches and toggles should be supported with a label above or inline of the element
- Switches and toggles do not have an error state
Usage
- Switches should be used when the options are to set a property from inactive to active
- Toggles should be used when the options are changing between the display of two units
Switch or checkbox?
Switches are best used to display an activation (e.g., on/off states). Checkboxes should be used for communicating selection (e.g., multiple table rows), there can also be more than two radio buttons. Switches, unlike checkboxes, can't have an error state.
Labels
Like other form elements labels should be concise, 1-3 words but a switch indicates persistence of something. In some cases it can be useful to include a verb in the label to indicate the action e.g. “Show Calculations”, “Set as default”.
In the case where it’s necessary to refer to a user directly, do so sparingly and use the second person “you/your” e.g. “Show your net income”.
Behaviour
Toggles and switches should control the settings or content. The labels guidelines will make it clear to a user what action they are taking.
As toggles activate content they should be used in close proximity to the content they change, so that the user can see the action being taken.