Skip to Main Content

Toggle

A toggle is used to activate or deactivate a binary option within a system, meaning that the action is either on or off.

Once the toggle is moved to the on or off position, the results of that action are immediately delivered.

Use when:

  • A user must choose between two states, on or off with instant results
  • Each option can be independently controlled

Do not use when:

  • Further action such as a button is required to complete the task. Use checkboxes or radio buttons instead.
  • A user must choose between two content types. In this instance, use a content switcher, not a toggle.

Interactive component

Library integration

Use the codes below to add this component to your project. Download the latest version of the library to easily implement our full range of components.

Angular HTML

Angular

Step 1. Install

Execute the following command to install this component.

npm i [NPM-PLACE-HOLDER]/ds-toggle

Step 2. Import

Import the following into your app.module.ts file.

import { DsToggleModule } from 'ds-toggle';

Code snippets

Toggle
 <cpc-ds-toggle 
      id="rememberMe" 
      text="A quick brown fox jumps over a lazy dog"
      (onChanged) = "onToggle($event)"
      [setValue]="toggleValue"
      ></cpc-ds-toggle>
Properties
Name Type Default Description
id string id

Toggle id
text string  

Set the toggle label text
SetValue boolean true

Set whether the toggle is checked/unchecked

HTML

Step 1: Import CSS

Import the following into your theme or page.

<link type="text/css" href="[CSS-PLACE-HOLDER]" rel="stylesheet">

Step 2: Import JS

<script src="[JS-PLACE-HOLDER]"></script>

Code snippets

Toggle
 <div data-title="Toggle">
                <h2 class="section-heading">Toggle</h2>
                <button id="rememberMe" class="by-keyboard" type="button" data-switch-toggle-pressed data-switch-toggle data-switch-toggle-labels disabled>
                    <div class="toggleText">A quick brown fox jumps over a lazy dog</div>
                </button>
  </div>

Code Samples

Basic

Note that this component may require additional styling.

Download package

Angular

Note that this component may require additional styling.

Download package

Guidelines

Keyboard interaction

When the toggle has focus:

  • Spacebar switches between toggle states
  • Enter switches between toggle states

Typically, focus will remain on the toggle once its state has been switched.

Testing

When testing a toggle, the tester must ensure:

  • The toggle is fully keyboard operable
  • Indications for focused and hovered states are clear and prominent
  • Switching between states is clear and doesn’t rely on colour alone
  • The toggle causes an instant switch
  • The toggle has the role of a button
  • The screen reader announces the toggle label, role, and state (pressed/not pressed)

Important note

The toggle component is only designed, from an accessibility perspective, to support opposing states (yes/no, on/off). The component isn't designed to support contextual states (for example, imperial/metric, list view/map view).

Related content