logo Atlas Design

Toggle

A selectable form element that represents a binary state (on or off).

HTML 
<div class="toggle">
    <input id="toggle-id-0" type="checkbox" aria-label="Toggle me!" />
    <label for="toggle-id-0"></label>
</div>

Disabled states

In order to achieve disabled styles, you'll need to add the disabled attribute to the inner input.

Disabled and unselected

HTML 
<div class="toggle">
    <input id="toggle-id-1" type="checkbox" aria-label="Disabled toggle" disabled />
    <label for="toggle-id-1"></label>
</div>

Disabled and selected

HTML 
<div class="toggle">
    <input id="toggle-id-2" type="checkbox" aria-label="Disabled toggle" checked disabled />
    <label for="toggle-id-2"></label>
</div>

Figma