Toggle Switch Stable

A Toggle Switch is similar to a Checkbox for managing settings, for example, in forms or filters. They are used for on/off selection.

Toggle Switch w/o label

<div class="toggle-switch ">
    <input id="toggle-switch-default" type="checkbox" name="toggle-switch-default" class="toggle-switch__checkbox">
    <label for="toggle-switch-default" class="toggle-switch__label"></label>
</div>

Toggle Switch w/ label

<div class="toggle-switch ">
    <input id="toggle-switch-default" type="checkbox" name="toggle-switch-default" class="toggle-switch__checkbox">
    <label for="toggle-switch-default" class="toggle-switch__label">Label</label>
</div>

Large Toggle Switch

<div class="toggle-switch toggle-switch--large">
    <input id="toggle-switch-default" type="checkbox" name="toggle-switch-default" class="toggle-switch__checkbox">
    <label for="toggle-switch-default" class="toggle-switch__label">Label</label>
</div>