Form toggle

Toggle switch is a selection method that allows users immediately pick only one of two options; when users need to update preference with a clear on or off state.

 

Component data

Release notes

Global resources:
cicon-package.zip | bootstrap-grid.css (4.4.1) | jquery-3.6.0.min.js

Component resources:
SCSS files | jquery.validate.js | jquery.validate.min.js | coc.forms.js | coc.forms.min.js

Functional grouping: Forms

Demo

Form Toggle Demo - Bordered Required - Valid

Descriptive label (required)

Descriptive label (required)

Descriptive label (required)

Descriptive label (required)

Form Toggle Demo - Bordered Required - Invalid

Descriptive Label (required)

This field is required

Descriptive label (required)

This field is required

Descriptive label (required)

This field is required

Usage best practices

While the toggle switch is similar to radio buttons and checkboxes, toggle switches take effect immediately while the radio buttons and checkboxes typically require a further action (like save, submit or next) to become effective. Also, the toggle always has two options while the radio button and checkboxes can have two or more options. 

Do

Show both toggle states in high contrast to each other

Use clear descriptive labels for the toggle switch

Default toggle switches to the off/disabled state

Don't

Do not use toggle switch if you have more than 2 options selections

Do not use icons in the toggle switch to describe the selected state

Do not rely on colour alone to describe selected state