There are three types of selection controls:
- Check boxes
- Radio buttons
- Switches
Each control type has the following interactive states: normal, pressed, focused, and disabled.
Check boxes enable users to select one, more, or no items from a set.
Check boxes can have parent-child relationships, with secondary options nested under primary options. Use parent check boxes to organize items and enable easy selection of multiple items. The children check boxes automatically inherit the state of the parent check box (selected or unselected).
Note: If some children check boxes are selected, the parent becomes an indeterminate check box.
Check boxes have the following states:
- Selected
- Indeterminate
- Unselected
Radio buttons enable users to select one action from a set of available features. Use radio buttons when you want users to see all items and the users can select only one.
Switches are like physical light switches, enabling users to toggle back-and-forth between two binary states (such as turning features on/off).
A switch is off when the dot is on the left, and on when the dot is on the right.
- Don't nest check boxes more than two layers deep.
- Use a check box for opt-in interactions that the user must confirm before proceeding.
- Use a switch when you need to toggle features, modes, or functionalities on/off. This includes eliciting an immediate change, such as revealing more controls or enabling a feature.
- Radio buttons are only for selecting one item from a group. For multiple items, use a check box.
The following list shows the light and dark modes for selection controls:
