Custom Toggle Components

Toggle Switches

<div class="switch-group"> <label class="switch-label"> <input type="checkbox" class="switch-input" checked> <span class="switch-toggle"></span> <span class="label-text">Checked State</span> </label> <label class="switch-label"> <input type="checkbox" class="switch-input"> <span class="switch-toggle"></span> <span class="label-text">Un-checked State</span> </label> <label class="switch-label disabled"> <input type="checkbox" class="switch-input" disabled> <span class="switch-toggle"></span> <span class="label-text">Disabled State</span> </label> </div>

Toggle Switches Inline

<div class="switch-group switch-group--inline"> <label class="switch-label"> <input type="checkbox" class="switch-input" checked> <span class="switch-toggle"></span> <span class="label-text">Checked State</span> </label> <label class="switch-label"> <input type="checkbox" class="switch-input"> <span class="switch-toggle"></span> <span class="label-text">Un-checked State</span> </label> <label class="switch-label disabled"> <input type="checkbox" class="switch-input" disabled> <span class="switch-toggle"></span> <span class="label-text">Disabled State</span> </label> </div>