There are three types of selection controls:
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:
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.
The following list shows the light and dark modes for selection controls: