Internet Explorer is not supported by Design Library

The last version of Internet Explorer, version 11, was released on October 17, 2013. This is a very long time ago when taking into account the rapid development of web technologies. These days it is often difficult and time consuming to get modern technologies to work well in this old browser. More and more frameworks are dropping support, and even Microsoft themselves has announced that they will fully drop support for IE in their own services in 2021.

Consequently, we have decided to not include support for IE in the Design Library website.

Luckily, there are modern options in active development. Please use Firefox, Edge or Chrome instead.

Toggle selector

A selector to display and select options in a flow.

Guidelines

Short description

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.

Behaviour

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

Specification

Measurements

  • Height: 72 px
  • Max width: 420 px
  • Line height: 20 px

States

  • Text: Align center, 16 px medium, Grey 800
  • Error text: 14 px, regular, Dark red 1
  • Normal: Grey 400
  • Hover: Dark blue 1
  • Selected: Dark blue 2
  • Pressed: Dark blue 1
  • Disabled: Grey 200

Error handling

Colours

  • Grey 200
  • Grey 800
  • Grey 400
  • Dark blue 1
  • Dark blue 2

Error

Page last updated

Feedback

Was this helpful?