Switch

A toggle switch for allowing users to turn an option on or off.

Markup structure

Since HTML doesn't define an official tag for our Switch component, we must build a makeshift one from a checkbox.

<label class="Switch">
    <input type="checkbox">
    <div></div>
</label>

Disabled state

If a switch is currently disallowed for some reason, you can apply a disabled state using the is-disabled class. Make sure to also apply the disabled attribute to the checkbox.

<label class="Switch is-disabled">
    <input type="checkbox" disabled>
    <div></div>
</label>