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.

Slide toggle

A digital on/off switch.

Slide toggle

Available in

Component meta

Component identifier

component-slidetoggle

Design version

2023-01-05

Design principles

Everyday first

Guidelines

Short description

The slide toggle is a representation of a physical switch that allows users to turn things on or off. Most common toggles are used to switch between as on/off in preferences, settings or turning on/off Wi-Fi on a smart phone.

When and how to use it

The slide toggle should be used when the user should be able to toggle a binary state of a setting or preference.

Typical use cases
  • Settings and preference pages
  • Forms
  • On/off functionality
Labels
  • Use labels together with the slide toggle so that the action is clear. Labels should be updated when the state is updated.
Tables and list
  • When used in tables, the label can be replaced with a text in a column next to the slide toggle.
  • When used in lists, you can use text to the left of the slide toggle to explain its purpose.

Behaviour

When the component is rendered, it should have the state of the preference it represents. When the slide toggle is clicked, the visual state and the preference/setting should change to the opposite immediately.

Do's and don'ts

Do
  • Do use alternative label if you are toggling states which doesn’t represent ON & OFF directly.

 

  • Do use the Slide toggle in lists. The list item text can replace the Slide toggle label. Place the slide toggle vertically centered in the list item.

 

  • Do use the slide toggle for preference of individual features or behaviours

 

Don't
  • Don’t use the slide toggle for settings or actions that won't happen immediately

 

  • Don’t use the slide toggle for multiple choice questions

 

  • Don’t use the slide toggle for yes/no questions. Use radio buttons instead!

 

  • Don’t use slide toggle when an intermediate state is required. Use checkboxes instead! This is when multiple sub-options are under a parent option.

 

Writing

-

 

Accessibility

Review

Result from the latest accessibility review of the component (Chlorophyll): 2023-03-14 

  • Contrast: good
  • Colour-blindness: good
  • Code + aria: good
  • Touch + keyboard: good
  • Dark-mode: n/a
  • Focus: ok - need new style
  • Reader: good

 

Specification

 

Page last updated

Feedback

Was this helpful?