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>