Toggle Switches

CSS only Checkbox based toggle Switches.

Page Demo

Basic example

<!-- Default -->
<div class="form-group">
    <div class="toggle-switch">
        <input type="checkbox" class="toggle-switch__checkbox">
        <i class="toggle-switch__helper"></i>
    </div>
</div>

<!-- Checked (Active) -->
<div class="form-group">
    <div class="toggle-switch">
        <input type="checkbox" class="toggle-switch__checkbox" checked>
        <i class="toggle-switch__helper"></i>
    </div>
</div>

<!-- Disabled -->
<div class="form-group">
    <div class="toggle-switch">
        <input type="checkbox" class="toggle-switch__checkbox" disabled>
        <i class="toggle-switch__helper"></i>
    </div>
</div>
Files required:
Type Files
Custom SCSS /src/scss/inc/_toggle-switch.scss