Toggle switch

You can customize switches by combining different colors. See the basic example bellow:

Source code
<label class="switch">
  <input type="checkbox"/>
  <span class="switch-slider"></span>
</label>

You can also add outside text.

Source code
<label class="switch">
  <span class="mr-2">No</span>
  <input type="checkbox"/>
  <span class="switch-slider"></span>
  <span class="ml-2">Yes</span>
</label>

Colors

The toggle switch styles follow the contextual bootstrap colors.

Source code
<label class="switch switch-to-primary"></label>
<label class="switch switch-to-success"></label>
<label class="switch switch-to-danger"></label>
<label class="switch switch-to-warning"></label>
<label class="switch switch-to-info"></label>

You can also customize the color transition using switch-* and switch-to-*.

Source code
<label class="switch switch-danger switch-to-success"></label>

Disabled state

When adding the disabled boolean attribute to the input element, the appearance changes to reflect this state.

Source code
<label class="switch switch-danger">
  <input type="checkbox" checked disabled/>
  <span class="switch-slider"></span>
  <span class="ml-2">You can't change</span>
</label>