Checks

Create consistent cross-browser and cross-device checkboxes and radios with our completely rewritten checks component.

Checks on Bootstrap

Checks

<div class="form-check">
  <input class="form-check-input" id="flexCheckDefault" type="checkbox" value="">
  <label class="form-check-label" for="flexCheckDefault">Default checkbox</label>
</div>
<div class="form-check">
  <input class="form-check-input" id="flexCheckChecked" type="checkbox" value="" checked="">
  <label class="form-check-label" for="flexCheckChecked">Checked checkbox</label>
</div>

Radios

<div class="form-check">
  <input class="form-check-input" id="flexRadioDefault1" type="radio" name="flexRadioDefault">
  <label class="form-check-label" for="flexRadioDefault1">Default radio</label>
</div>
<div class="form-check">
  <input class="form-check-input" id="flexRadioDefault2" type="radio" name="flexRadioDefault" checked="">
  <label class="form-check-label" for="flexRadioDefault2">Default checked radio</label>
</div>

Switches

<div class="form-check form-switch">
  <input class="form-check-input" id="flexSwitchCheckDefault" type="checkbox">
  <label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" id="flexSwitchCheckChecked" type="checkbox" checked="">
  <label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" id="flexSwitchCheckDisabled" type="checkbox" disabled="">
  <label class="form-check-label" for="flexSwitchCheckDisabled">Disabled switch checkbox input</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" id="flexSwitchCheckCheckedDisabled" type="checkbox" checked="" disabled="">
  <label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
</div>

Check Inline

<div class="form-check form-check-inline">
  <input class="form-check-input" id="inlineCheckbox1" type="checkbox" value="option1">
  <label class="form-check-label" for="inlineCheckbox1">Item 1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" id="inlineCheckbox2" type="checkbox" value="option2">
  <label class="form-check-label" for="inlineCheckbox2">Item 2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" id="inlineCheckbox3" type="checkbox" value="option3" disabled="">
  <label class="form-check-label" for="inlineCheckbox3">Item 3 (disabled)</label>
</div>

Radio Inline

<div class="form-check form-check-inline">
  <input class="form-check-input" id="inlineRadio1" type="radio" name="inlineRadioOptions" value="option1">
  <label class="form-check-label" for="inlineRadio1">Item 1</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" id="inlineRadio2" type="radio" name="inlineRadioOptions" value="option2">
  <label class="form-check-label" for="inlineRadio2">item 2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" id="inlineRadio3" type="radio" name="inlineRadioOptions" value="option3" disabled="">
  <label class="form-check-label" for="inlineRadio3">Item 3 (disabled)</label>
</div>
On this page