Toggle

<label class="toggle" for="toggle-unselected">
    label
    <input id="toggle-unselected" name="toggle-unselected" type="checkbox" role="switch">
    <span class="toggle__state">
        <span class="toggle__switch">
            <span class="toggle__bar"></span>
        </span>
    </span>
</label>
<label class="toggle" for="toggle-selected">
    label
    <input id="toggle-selected" name="toggle-selected" type="checkbox" role="switch" checked>
    <span class="toggle__state">
        <span class="toggle__switch">
            <span class="toggle__bar"></span>
        </span>
    </span>
</label>

<label class="toggle" for="toggle-disabled-unselected">
    label
    <input id="toggle-disabled-unselected" name="toggle-disabled-unselected" type="checkbox" role="switch" disabled>
    <span class="toggle__state">
        <span class="toggle__switch">
            <span class="toggle__bar"></span>
        </span>
    </span>
</label>
<label class="toggle" for="toggle-disabled-selected">
    label
    <input id="toggle-disabled-selected" name="toggle-disabled-selected" type="checkbox" role="switch" checked disabled>
    <span class="toggle__state">
        <span class="toggle__switch">
            <span class="toggle__bar"></span>
        </span>
    </span>
</label>