Components

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