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 toggle selector has the same functionality as a checkbox or radio button group.

Toggle selector

Component meta

Component identifier

component-toggleselector

Guidelines

Short description

The toggle selector has the same functionality as radiobuttons and checkboxes. Early versions of this component used pictograms but they are no longer a part of our design. This component will be deprecated in the future and instead belong to the" radio button and checkbox family" in some form. But for now, use it if you’d like!

When and how to use it

The component can be used for both single and multiple selections and works well for both desktop and mobile contexts. Make sure you keep texts short and sweet, and never more than two lines for both label or the optional label information.

Behaviour

Can act like both single (with radiobutton) and multi select (checkbox).

Horizontal multi

Horizontal multi

Horizontal single

Horizontal single

Vertical multi

Vertical multi

Vertical single

Vertical single

 

Do's and don'ts

Do
  • Always left align the label and label information.
  • Use max 4 options per group.
Don't
  • Don't use different heights and widths when placed next to each other.

 

Writing

-

 

Accessibility

-

 

Specification

 

Page last updated

Feedback

Was this helpful?