Checks and radios
Create consistent cross-browser and cross-device checkboxes and radios with our completely rewritten checks component.
Checkboxes
Radios
Switches
Use
checked attribute to input for checked mode, same as disabled for disabled mode. and use .form-switch to .form-check to enable switch mode. Note: you must add
type="checkbox" on input when you want to enable switch mode.<div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault"> <label class="form-check-label" for="flexCheckDefault"> Default </label></div><div class="form-check"> <input class="form-check-input" type="radio" value="" name="flexRadioDefault" id="flexRadioDefault"> <label class="form-check-label" for="flexRadioDefault"> Default </label></div><div class="form-check form-switch"> <input class="form-check-input" type="checkbox" value="" id="flexSwitchDefault"> <label class="form-check-label" for="flexSwitchDefault"> Default </label></div>Sizing
Set heights using classes like .form-check-xl, .form-check-lg and .form-check-sm.
Checkboxes
Radios
Switches
<div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="flexCheckSize"> <label class="form-check-label" for="flexCheckSize"> Checkbox Label </label></div>Indeterminate
Checkboxes can utilize the :indeterminate pseudo class when manually set via JavaScript (there is no available HTML attribute for specifying it).
<div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminate"> <label class="form-check-label" for="flexCheckIndeterminate"> Indeterminate checkbox </label></div>Inline
Group checkboxes or radios on the same horizontal row by adding .form-check-inline to any .form-check.
<div class="form-check form-check-inline"> <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1"> <label class="form-check-label" for="inlineCheckbox1">1</label></div>Reverse
Put your checkboxes, radios, and switches on the opposite side with the .form-check-reverse modifier class.
<div class="form-check form-check-reverse"> <input class="form-check-input" type="checkbox" value="" id="reverseCheck1"> <label class="form-check-label" for="reverseCheck1"> Reverse checkbox </label></div>
