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>