The Toggle selector emphasizes to the user that this is an important choice. We also think it can make choosing more attractive.
When and how to use it
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.
The component can be selected or unselected. It can be used for both single and multiple selection.
Do's and don'ts
- Can be used with check boxes
- Can contain pictograms
- Have dynamic sizes
- Place next to and under each other
- Have longer text than two lines
- Use other colours than white
- Use different heights and widths when placed next to each other
- Height: 72 px
- Max width: 420 px
- Text: Align center, 16 px medium, Grey 800 #333333
- Line height: 20 px
- Normal: Grey 400 (#CECECE)
- Hover: Dark Blue
- Selected: Dark Blue 2
- Pressed: Dark Blue
- Disabled: Grey 200 (#E9E9E9)