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.
checkbox
<div class="form-check">  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">  <label class="form-check-label" for="flexCheckDefault">    Default  </label></div>
radio
<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>
switch
<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
HTML
<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).

HTML
<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.

HTML
<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.

HTML
<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>
Recent Notification