Toggle switch

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

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

You can also add outside text.

No Yes

Source code

<label class="switch">
  <span class="mr-1">No</span>
  <input type="checkbox"/>
  <span class="switch-slider"></span>
  <span class="ml-1">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>

Sizes

Add .switch-sm for smaller switches or .switch-lg for larger.

Source code

<label class="switch switch-sm"></label>
<label class="switch"></label>
<label class="switch switch-lg"></label>

Disabled state

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

You can't change

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>