Switches
Create consistent cross-browser and cross-device checkboxes and radios with our completely rewritten checks component.
https://getbootstrap.com/docs/5.1/forms/checks-radios/Switch Checkbox
Colors
Checkbox
<label class="d-flex align-items-center mb-3">
<input class="d-none-cloaked" type="checkbox" name="switch-checkbox" value="1" checked>
<i class="switch-icon"></i>
<span class="px-3 user-select-none">Default</span>
</label>
<label class="d-flex align-items-center mb-3">
<input class="d-none-cloaked" type="checkbox" name="switch-checkbox" value="1" checked>
<i class="switch-icon switch-icon-primary"></i>
<span class="px-3 user-select-none">Primary</span>
</label>
<label class="d-flex align-items-center mb-3">
<input class="d-none-cloaked" type="checkbox" name="switch-checkbox" value="1" checked>
<i class="switch-icon switch-icon-danger"></i>
<span class="px-3 user-select-none">Danger</span>
</label>
<label class="d-flex align-items-center mb-3">
<input class="d-none-cloaked" type="checkbox" name="switch-checkbox" value="1" checked>
<i class="switch-icon switch-icon-success"></i>
<span class="px-3 user-select-none">Success</span>
</label>
<label class="d-flex align-items-center mb-3">
<input class="d-none-cloaked" type="checkbox" name="switch-checkbox" value="1" checked>
<i class="switch-icon switch-icon-warning"></i>
<span class="px-3 user-select-none">Warning</span>
</label>
<label class="d-flex align-items-center mb-3">
<input class="d-none-cloaked" type="checkbox" name="switch-checkbox" value="1" checked>
<i class="switch-icon switch-icon-info"></i>
<span class="px-3 user-select-none">Info</span>
</label>
Switch Radio
Colors
Radio
<label class="d-flex align-items-center mb-3">
<input class="d-none-cloaked" type="radio" name="switch-radio-1" value="1" checked>
<i class="switch-icon"></i>
<span class="px-3 user-select-none">Default</span>
</label>
<label class="d-flex align-items-center mb-3">
<input class="d-none-cloaked" type="radio" name="switch-radio-2" value="1" checked>
<i class="switch-icon switch-icon-primary"></i>
<span class="px-3 user-select-none">Primary</span>
</label>
<label class="d-flex align-items-center mb-3">
<input class="d-none-cloaked" type="radio" name="switch-radio-3" value="1" checked>
<i class="switch-icon switch-icon-danger"></i>
<span class="px-3 user-select-none">Danger</span>
</label>
<label class="d-flex align-items-center mb-3">
<input class="d-none-cloaked" type="radio" name="switch-radio-4" value="1" checked>
<i class="switch-icon switch-icon-success"></i>
<span class="px-3 user-select-none">Success</span>
</label>
<label class="d-flex align-items-center mb-3">
<input class="d-none-cloaked" type="radio" name="switch-radio-5" value="1" checked>
<i class="switch-icon switch-icon-warning"></i>
<span class="px-3 user-select-none">Warning</span>
</label>
<label class="d-flex align-items-center mb-3">
<input class="d-none-cloaked" type="radio" name="switch-radio-6" value="1" checked>
<i class="switch-icon switch-icon-info"></i>
<span class="px-3 user-select-none">Info</span>
</label>
Switch Size
Static (as icon)
Switch Size
<i class="switch-icon switch-icon-primary"></i>
<i class="switch-icon switch-icon-primary active"></i>
<i class="switch-icon switch-icon-primary disabled"></i>
<label class="d-flex align-items-center mb-3">
<input class="d-none-cloaked" type="checkbox" name="switch-checkbox" value="1" checked>
<i class="switch-icon switch-icon-primary switch-icon-xs"></i>
<span class="px-3 user-select-none">Extra Small</span>
</label>
<label class="d-flex align-items-center mb-3">
<input class="d-none-cloaked" type="checkbox" name="switch-checkbox" value="1" checked>
<i class="switch-icon switch-icon-primary switch-icon-sm"></i>
<span class="px-3 user-select-none">Small</span>
</label>
<label class="d-flex align-items-center mb-3">
<input class="d-none-cloaked" type="checkbox" name="switch-checkbox" value="1" checked>
<i class="switch-icon switch-icon-primary"></i>
<span class="px-3 user-select-none">Medium / Normal</span>
</label>
<label class="d-flex align-items-center mb-3">
<input class="d-none-cloaked" type="checkbox" name="switch-checkbox" value="1" checked>
<i class="switch-icon switch-icon-primary switch-icon-lg"></i>
<span class="px-3 user-select-none">Large</span>
</label>