<!-- Default (inactive) -->
<div class="form-group">
<div class="toggle-switch">
<input type="checkbox" class="toggle-switch__checkbox">
<i class="toggle-switch__helper"></i>
</div>
</div>
<!-- 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>
<!-- Amber -->
<div class="form-group">
<div class="toggle-switch toggle-switch--amber">
<input type="checkbox" class="toggle-switch__checkbox">
<i class="toggle-switch__helper"></i>
</div>
</div>
<!-- Blue -->
<div class="form-group">
<div class="toggle-switch toggle-switch--blue">
<input type="checkbox" class="toggle-switch__checkbox">
<i class="toggle-switch__helper"></i>
</div>
</div>
<!-- Green -->
<div class="form-group">
<div class="toggle-switch toggle-switch--green">
<input type="checkbox" class="toggle-switch__checkbox">
<i class="toggle-switch__helper"></i>
</div>
</div>
<!-- Cyan -->
<div class="form-group">
<div class="toggle-switch toggle-switch--cyan">
<input type="checkbox" class="toggle-switch__checkbox">
<i class="toggle-switch__helper"></i>
</div>
</div>
<!-- Purple -->
<div class="form-group">
<div class="toggle-switch toggle-switch--purple">
<input type="checkbox" class="toggle-switch__checkbox">
<i class="toggle-switch__helper"></i>
</div>
</div>
<!-- Teal -->
<div class="form-group">
<div class="toggle-switch toggle-switch--teal">
<input type="checkbox" class="toggle-switch__checkbox">
<i class="toggle-switch__helper"></i>
</div>
</div>