Back to components

Toggle

Toggles allow a selection to be turned on or off

A validation error A helpful text
To find out more about when to use selection controls, read this section in the style guide about selection control patterns.

Table of Contents

Edit this section, Opens in new window

Overview

Toggles are used for binary actions that occur immediately after the user "flips" the Toggle switch. They are commonly used for "On/Off" situations.

Edit this section, Opens in new window

Usage

Toggles

For some actions, either a toggle switch or a check box might work. To decide which control would work better, follow these tips:

  1. Use a toggle switch for binary settings when changes become effective immediately after the user changes them
  2. Use checkboxes for optional ("nice to have") items
  3. Use a checkbox when the user has to perform extra steps for changes to be effective. For example, if the user must click a "submit" or "next" button to apply changes, use a check box
  4. Use checkboxes when the user can select multiple items that are related to a single setting or feature

Best Practice

The options that require instant response are best selected using a toggle switch.

Sizing

With given attributes (data-size), you can vary the size of the selection control.

Fluid
Largest
Larger
Large
Medium
Small
Smallest
Edit this section, Opens in new window

Behaviours

States

Static

A helpful text
Static with help text

Checked

Disabled

Focused

Invalid

A validation error
Invalid with error message

Invalid + Focus

Checked + Focus

Checked + Invalid

Checked + Disabled

Edit this section, Opens in new window

Anatomy

Toggles
  1. Always vertical
  2. Clear, meaningful label that describes what to toggle
Edit this section, Opens in new window
Contact us, Opens in new window