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 Slide toggle is a common component in most interfaces today. It's therefor important that a Slide toggle should work as the user expects it to.

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

Sizes

  • For desktop devices, use the default size.
  • For mobile devices, use the larger size.

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 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 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.

Specification

Sizes

The component comes in two sizes:

  1. Default 1.5 rem (desktop)
  2. Large 2 rem (mobile)

Default (height 1.5 rem)

Measurements - default

Component

  • Height: 24px (1.5 rem)
  • Width: 44px

Switch

  • Height: 20px
  • Width: 20px

Touch area

  • Height: 40px
  • Width: 48px

States - default

Large (height 2 rem)

Measurements

Component

  • Height: 32px (2 rem)
  • Width: 56px

Switch

  • Height: 28px
  • Width: 28px

States

Colours

  • Normal background: #B3B3B3
  • Hover background: #999999
  • Focused background: #999999
    • Focused border: 1px solid Dark blue 2 
    • box-shadow: 0 0 4px 1px Blue
  • On:
    • background: Dark green 1
  • On and hover:
    • background: Dark green 2
  • On and Focused:
    • background: Dark green 1 
    • border:1px solid Dark blue 2
    • box-shadow: 0 0 4px 1px Blue

New

  • Focus border: 1px solid dark blue 2
  • Box shadow: 0 0 4 px 1px blue

Normal background

  • Background: #B3B3B3
  • Hover: #999999
  • Focus: #999999

Focus

  • Border: Dark blue 2 
  • Box-shadow: Blue

On

  • Background: Dark green 1
  • Hover: Dark green 2
  • Focus: Dark green 1 

Page last updated

Feedback

Was this page helpful?