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.

Small Default Toggle Switch

<div class="toggle--switch toggle--switch--sm">
    <label class="toggle--switch--sm__label" for="switch-1"><input type="checkbox" class="toggle--switch--sm__input" id="switch-1" /><span class="slider round"></span></label>
</div>

Small Disabled Toggle Switch

<div class="toggle--switch toggle--switch--sm">
    <label class="toggle--switch--sm__label" for="switch-2"><input type="checkbox" class="toggle--switch--sm__input" id="switch-2" disabled="" /><span class="slider round"></span></label>
</div>

Small Active Disabled Toggle Switch

<div class="toggle--switch toggle--switch--sm">
    <label class="toggle--switch--sm__label" for="switch-3"><input type="checkbox" class="toggle--switch--sm__input active" id="switch-3" disabled="" /><span class="slider round"></span></label>
</div>

Small Toggle Switch With Text

<div class="toggle--switch toggle--switch--sm">
    <label class="toggle--switch--sm__label" for="switch-4"><input type="checkbox" class="toggle--switch--sm__input" id="switch-4" /><span class="slider round"></span><span class="toggle--switch__text-sm">On</span></label>
</div>