Components– Snackbars & toasts

Snackbars & toasts

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.

<strong>Radio buttons</strong> allow the selection of a single option from a set.

<strong>Switches</strong> allow a selection to be turned on or off.

Color

Selection controls use an app’s <a class="do-router" href="/en/design/1/style/color.html#color-color-schemes">accent color</a>.

Themes
  • Selection controls are available in both dark and light themes.
  • Checkbox
  • Radio button
Material Design light theme checkbox

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

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%<br />Off: #000000, Opacity 54%<br />Disabled: #000000, Opacity 26%

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

Dark

Material Design dark theme checkbox

Do.

Material Design light theme for checkbox states

Don’t.

On: Swatch 500, Opacity 100%<br />Off: #FFFFFF, Opacity 70%<br />Disabled: #FFFFFF, Opacity 30%

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

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.

Material Design dark theme checkboxes states

Do.

Light theme radio buttons in Material Design

Don’t.

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

Light theme for radio buttons

Dark theme radio buttons in Material Design

Do.

Material Design radio buttons in light theme states

Don’t.

Dark theme for radio buttons

Light

Do.

Don’t.

On: Swatch 500, Opacity 100%<br />Off: #000000, Opacity 54%<br />Disabled: #000000, Opacity 26%

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

Dark

On: Swatch 500, Opacity 100%<br />Off: #FFFFFF, Opacity 70%<br />Disabled: #FFFFFF, Opacity 30%

Checkboxes allow the user to select multiple options from a set. Expand and collapse content An arrow that points down when collapsed and points up when expanded.

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

  • 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.48dp
  • The on/off slide toggle with the text “on” and “off” included within the asset is deprecated. Use the switch shown here instead.80dp
  • Light themeRoboto Regular 14sp
  • Dark theme
  • Light#323232 100%
Dark theme radio buttons in Material Design states

Thumb On: Swatch 500, Opacity 100%<br />Track On: Swatch 500, Opacity 50%

Material Design light theme switch

Thumb On: Swatch 500, Opacity 100%<br />Track On: Swatch 500, Opacity 50%

Thumb Off: Grey 50, #FAFAFA, Opacity 100%<br />Track Off: #000000, Opacity 38%

Material Design dark theme switch

Thumb Disabled: Grey 400, #BDBDBD, Opacity 100%<br />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

  • 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.48dp
  • Thumb On: Swatch 200, Opacity 100%<br />Track On: Swatch 200, Opacity 50%288dp
  • Thumb Off: Grey 400, #BDBDBD, Opacity 100%<br />Track Off: #FFFFFF, Opacity 30%568dp
  • Thumb Disabled: Grey 800, #424242, Opacity 100%
  • Light themeRoboto Regular 14sp
  • Dark theme
  • Light#323232 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.

Radial reaction for switches on mobile in Material Design

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

No radial reaction for switches on desktop in Material Design

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.

Left-aligned snackbar in Material Design for tablet/desktop

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.

Material Design tablet/desktop snackbar specs

Radial reaction on mobile

No radial reaction on desktop

Material Design selection controls for user options