Skip to main content

Checks & radios

boodoo's custom checkbox and radio components are used for selecting one or several options in a list.

Checks

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

Radios

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

Switches

A switch has the markup of a custom checkbox but uses the .form-switch class.

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

Disabled

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckDisabled2" disabled>
  <label class="form-check-label" for="flexCheckDisabled2">Disabled checkbox</label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="disRadio" id="flexRadioDisabled" disabled>
  <label class="form-check-label" for="flexRadioDisabled">Disabled radio</label>
</div>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchDisabled" disabled>
  <label class="form-check-label" for="flexSwitchDisabled">Disabled switch 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>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
  <label class="form-check-label" for="inlineCheckbox2">2</label>
</div>
<div class="form-check form-check-inline">
  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
  <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
</div>

Indeterminate

Indeterminate checkboxes have a third state. Set it via JS:

document.getElementById('myCheckbox').indeterminate = true;
<div class="form-check">
  <input class="form-check-input" type="checkbox" id="indeterminateCheck" checked>
  <label class="form-check-label" for="indeterminateCheck">Indeterminate checkbox</label>
</div>
<script>document.getElementById('indeterminateCheck').indeterminate = true;</script>