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.

Material Design selection controls for user options

Checkbox

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.

Material Design dark theme checkbox — Dark theme

Light

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

Dark

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

Radio button

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.

Dark theme radio buttons in Material Design — Dark theme for radio buttons

Light

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

Dark

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

Switch

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.

Material Design dark theme switch — 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%

Material Design light theme switches in various states — 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 Material Design switches in various states — 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.