Toggle

A toggle switch changes on and off states of a single setting. Toggle switches take up less space than an “on/off” radio button group and communicate their intended purpose better than a checkbox that toggles functionality.

Airplane mode

            HTML
            
                Copy
            
<div class="d-flex gap-2 align-items-center">
    <input id="toggle-1" class="qw-toggle" type="checkbox">
    <label for="toggle-1" class="qw-toggle-label">
        Airplane mode
    </label>
</div>

Disabled states

To disable a toggle switch, add the disabled attribute to the toggle's checkbox. When disabled, the state cannot be changed.

Disabled and unselected

Label

Disabled and selected

Label

Variants

Hidden label

Toggles without visible labels are allowed, but must be only used if the purpose of the control is made clear elsewhere. The label should be hidden in an accessible manner, i.e. using aria-label or adding .sr-only to the label element.