Switch

Toggle switch component built on top of <input> element.

Basic switch

Add .switch class to the <input type="checkbox" role="switch" switch /> element. In Safari, when toggling the switch, it produces a haptic feedback. They have a height of 1.5rem (24px) to meet WCAG 2.2 standards for touch targets.

<input type="checkbox" role="switch" id="switch1" class="switch" switch />

With form field

Wrap .switch in .form-field to lay the switch and label side by side.

<div class="form-field">
    <input type="checkbox" role="switch" id="switch2" class="switch" checked switch />
    <label for="switch2">Example switch</label>
</div>

Disabled

Add disabled attribute in .switch to gray out the switch as well as the supporting label.

<div class="form-field">
    <input type="checkbox" role="switch" id="switch3" class="switch" disabled switch />
    <label for="switch3">Disabled switch</label>
</div>
<div class="form-field">
    <input type="checkbox" role="switch" id="switch4" class="switch" disabled checked switch />
    <label for="switch4">Disabled switch that is checked</label>
</div>