This article describes switches and their various types along with their respective implementation and possible interactions. Switches allow users to activate and deactivate items. Switches are also used to select items within a list. Switches include checkboxes and radio buttons.
Notes
Toggles (A) are used to activate/deactivate functions and settings.
These types of switches do not need to be labeled on/off.
Checkbox switches (B) are usually used to activate/deactivate multiple functions within a list and are placed on the right hand side of the screen.
If the user will only be switching a single function on or off, use the toggle switch.
Checkboxes as select (C) are usually used for selecting multiple options from a list and are placed on the left side of the screen.
Checkbox as a select function (D) can also be used as a single select preference checkbox, and are placed to the left of text.
A radio button (E) is used for selecting a single option from a list. Only one option can be selected at a given time; making a new selection deselects the previous one.
Implementation guides
- Checkbox 2.3 implementation [en-US] (web component; checkboxes separated out from switches in 2.3)
- Switches 2.0 implementation
- Switch 1.x implementation