Components – Selection controls

Selection controls

Selection controls allow the user to select options.

Three types of selection controls are covered in this guidance:

  • Checkboxes allow the selection of multiple options from a set.
  • Radio buttons allow the selection of a single option from a set.
  • Switches allow a selection to be turned on or off.

Color

Selection controls use an app’s accent color.

Themes

Selection controls are available in both dark and light themes.

Checkbox Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Checkboxes allow the user to select multiple options from a set.

If you have multiple options appearing in a list, you can preserve space by using checkboxes instead of on/off switches.

If you have a single option, avoid using a checkbox and use an on/off switch instead.

Light theme

Dark theme

Light

On: Swatch 500, Opacity 100%
Off: #000000, Opacity 54%
Disabled: #000000, Opacity 26%

Light theme for checkboxes in hover, focused, pressed, disabled, and disabled focused states.

Dark

On: Swatch 500, Opacity 100%
Off: #FFFFFF, Opacity 70%
Disabled: #FFFFFF, Opacity 30%

Dark theme for checkboxes in hover, focused, pressed, disabled, and disabled focused states.

Radio button Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Radio buttons allow the user to select one option from a set. Use radio buttons for exclusive selection if you think that the user needs to see all available options side-by-side.

Otherwise, consider a dropdown, which uses less space than displaying all options.

Light theme for radio buttons

Dark theme for radio buttons

Light

On: Swatch 500, Opacity 100%
Off: #000000, Opacity 54%
Disabled: #000000, Opacity 26%

Light theme for radio buttons in hover, focused, pressed, disabled, and disabled focused states.

Dark

On: Swatch 500, Opacity 100%
Off: #FFFFFF, Opacity 70%
Disabled: #FFFFFF, Opacity 30%

Dark theme for radio buttons in hover, focused, pressed, disabled, and disabled focused states.

Switch Expand and collapse content An arrow that points down when collapsed and points up when expanded.

On/off switches toggle the state of a single settings option. The option that the switch controls, as well as the state it’s in, should be made clear from the corresponding inline label. Switches take on the same visual properties of the radio button.

The on/off slide toggle with the text “on” and “off” included within the asset is deprecated. Use the switch shown here instead.

Light theme

Dark theme

Light

Thumb On: Swatch 500, Opacity 100%
Track On: Swatch 500, Opacity 50%

Thumb Off: Grey 50, #FAFAFA, Opacity 100%
Track Off: #000000, Opacity 38%

Thumb Disabled: Grey 400, #BDBDBD, Opacity 100%
Track Disabled: #000000, Opacity 12%

Light theme for switches in hover, focused, pressed, disabled, and disabled focused states.

Dark

Thumb On: Swatch 200, Opacity 100%
Track On: Swatch 200, Opacity 50%

Thumb Off: Grey 400, #BDBDBD, Opacity 100%
Track Off: #FFFFFF, Opacity 30%

Thumb Disabled: Grey 800, #424242, Opacity 100%

Track Disabled: #FFFFFF, Opacity 10%

Dark theme for switches in hover, focused, pressed, disabled, and disabled focused states.

Use the outer radial reaction only on form factors that favor finger touch, where interaction may obstruct the element completely. For desktop usage with a mouse, you do not need this extra indication.

Radial reaction on mobile

No radial reaction on desktop