Toggle selector

A selector to display and select options in a flow.

Guidelines

The Toggle selector emphasizes to the user that this is an important choice. We also think it can make choosing more attractive.

Usage

This component is an alternative to radio buttons, drop down lists and checkboxes. It can be used for both single and multiple selections and works well for both desktop and mobile contexts.

Place it in a flow or widget, where several options are displayed next to each other. An icon can contribute to the understanding of the options. Make sure you keep texts short and sweet, and never more than two lines long.

Behaviour

The component can be selected or unselected. It can be used for both single and multiple selection.

Do's and don'ts

Do
  • Can be used with check boxes
  • Can contain pictograms
  • Have dynamic sizes
  • Place next to and under each other
Don't
  • Have longer text than two lines
  • Use other colours than white
  • Use different heights and widths when placed next to each other

 

Specification

  • Height: 72 px
  • Max width: 420 px
  • Text: Align center,16 px medium, Grey 2
  • Line height: 20 px

States

Frame colours
  • Normal: Grey 6 
  • Hover: Dark Blue
  • Selected: Dark Blue 2
  • Pressed: Dark Blue
  • Disabled: Grey 8