Selection Controls

Selection controls are actions a user can take for binary choices (on/off) and group actions (select one or multiple actions from a group).

Selection Controls

How to use selection controls

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

Check boxes enable users to select one, more, or no items from a set.

Checkboxes

Parent and child check boxes

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

Checkboxes states

Radio buttons

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.

Radio buttons

Switches

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.

Switches

Best practices

  • 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.

Accessibility

The following list shows the light and dark modes for selection controls:

Check boxes

Checkbox

Radio buttons

Radio button

Switches

Switch
Try it out
Related developer documentation