Switches
Create consistent cross-browser and cross-device checkboxes and radios with our completely rewritten checks component.
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>
Switch Default
<div class="form-check form-switch mb-2">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>
<div class="form-check form-switch mb-2">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked>
<label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
</div>
<div class="form-check form-switch mb-2">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckDisabled" disabled>
<label class="form-check-label" for="flexSwitchCheckDisabled">Disabled switch checkbox input</label>
</div>
<div class="form-check form-switch mb-2">
<input class="form-check-input" type="checkbox" id="flexSwitchCheckCheckedDisabled" checked disabled>
<label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
</div>