Switch

A switch has the markup of a custom checkbox but uses the .toggle--switch-** class to render a toggle switch. Consider using role="switch" to more accurately convey the nature of the control to assistive technologies that support this role. In older assistive technologies, it will simply be announced as a regular checkbox as a fallback. Switches also support the disabled attribute.

Large Default Toggle Switch

<div class="toggle--switch toggle--switch--lg">
    <label class="toggle--switch--lg__label" for="switch-5"><input type="checkbox" class="toggle--switch--lg__input" id="switch-5" /><span class="slider round"></span></label>
</div>

Large Disabled Toggle Switch

&<div class="toggle--switch toggle--switch--lg">
    <label class="toggle--switch--lg__label" for="switch-6"><input type="checkbox" class="toggle--switch--lg__input" id="switch-6" disabled="" /><span class="slider round"></span></label>
</div>

Large Active Disabled Toggle Switch

<div class="toggle--switch toggle--switch--lg">
    <label class="toggle--switch--lg__label" for="switch-7"><input type="checkbox" class="toggle--switch--lg__input active" id="switch-7" disabled checked /><span class="slider round"></span></label>
</div>

Large Toggle Switch With Text

<div class="toggle--switch toggle--switch--lg">
    <label class="toggle--switch--lg__label" for="switch-8"><input type="checkbox" class="toggle--switch--lg__input" id="switch-8" /><span class="slider round"></span><span class="toggle--switch__text-lg">On</span></label>
</div>