W3CoreUI

Checks and radios.

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

Checks

Our checks use custom Bootstrap icons to indicate checked or indeterminate states.

Default checkbox

Checked checkbox


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

Indeterminate

Checkboxes can utilize the :indeterminate pseudo class when manually set via JavaScript (there is no available HTML attribute for specifying it).

Indeterminate checkbox


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

Disabled Checks

Add the disabled attribute and the associated <label>s are automatically styled to match with a lighter color to help indicate the input’s state.

Disabled indeterminate checkbox

Disabled checkbox

Disabled checked checkbox


<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckIndeterminateDisabled" disabled>
  <label class="form-check-label" for="flexCheckIndeterminateDisabled">
	Disabled indeterminate 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>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="flexCheckCheckedDisabled" checked disabled>
  <label class="form-check-label" for="flexCheckCheckedDisabled">
	Disabled checked checkbox
  </label>
</div>

Radios

Default radio

Default checked radio


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

Disabled Radios

Add the disabled attribute and the associated <label>s are automatically styled to match with a lighter color to help indicate the input’s state.

Disabled radio

Disabled checked radio


<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioDisabled" disabled>
  <label class="form-check-label" for="flexRadioDisabled">
    Disabled radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDisabled" id="flexRadioCheckedDisabled" checked disabled>
  <label class="form-check-label" for="flexRadioCheckedDisabled">
    Disabled checked radio
  </label>
</div>

Switches

A switch has the markup of a custom checkbox but uses the .form-switch class to render a toggle switch. Consider using role="switch" to more accurately convey the nature of the control to assistive technologies that support this role. In older assistive technologies, it will simply be announced as a regular checkbox as a fallback. Switches also support the disabled attribute.

Default switch checkbox input

Checked switch checkbox input

Disabled switch checkbox input

Disabled checked switch checkbox input


<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>
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDisabled" 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" type="checkbox" role="switch" id="flexSwitchCheckCheckedDisabled" checked disabled>
  <label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
</div>

Default (stacked)

By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced with .form-check.

Default checkbox

Disabled checkbox

Default radio

Second default radio

Disabled radio


<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
	Default checkbox
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck2" disabled>
  <label class="form-check-label" for="defaultCheck2">
	Disabled checkbox
  </label>
</div>

<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
	Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
	Second default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option3" disabled>
  <label class="form-check-label" for="exampleRadios3">
	Disabled radio
  </label>
</div>

Inline

Group checkboxes or radios on the same horizontal row by adding .form-check-inline to any .form-check.

3 (disabled)


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


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

Reverse

Put your checkboxes, radios, and switches on the opposite side with the .form-check-reverse modifier class.

Reverse checkbox

Disabled reverse checkbox

Reverse switch checkbox input


<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>
<div class="form-check form-check-reverse">
  <input class="form-check-input" type="checkbox" value="" id="reverseCheck2" disabled>
  <label class="form-check-label" for="reverseCheck2">
	Disabled reverse checkbox
  </label>
</div>

<div class="form-check form-switch form-check-reverse">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckReverse">
  <label class="form-check-label" for="flexSwitchCheckReverse">Reverse switch checkbox input</label>
</div>

Without labels

Omit the wrapping .form-check for checkboxes and radios that have no label text. Remember to still provide some form of accessible name for assistive technologies (for instance, using aria-label). See the forms overview accessibility section for details.


<div>
  <input class="form-check-input" type="checkbox" id="checkboxNoLabel" value="" aria-label="...">
</div>

<div>
  <input class="form-check-input" type="radio" name="radioNoLabel" id="radioNoLabel1" value="" aria-label="...">
</div>

Checkbox toggle buttons

Single toggle Checked Disabled

Single toggle Checked Disabled


<input type="checkbox" class="btn-check" id="btn-check">
<label class="btn btn-primary" for="btn-check">Single toggle</label>

<input type="checkbox" class="btn-check" id="btn-check-2" checked>
<label class="btn btn-primary" for="btn-check-2">Checked</label>

<input type="checkbox" class="btn-check" id="btn-check-3" disabled>
<label class="btn btn-primary" for="btn-check-3">Disabled</label>


<input type="checkbox" class="btn-check" id="btn-check-4">
<label class="btn" for="btn-check-4">Single toggle</label>

<input type="checkbox" class="btn-check" id="btn-check-5" checked>
<label class="btn" for="btn-check-5">Checked</label>

<input type="checkbox" class="btn-check" id="btn-check-6" disabled>
<label class="btn" for="btn-check-6">Disabled</label>

Radio toggle buttons

Checked Radio Disabled Radio

Checked Radio Disabled Radio


<input type="radio" class="btn-check" name="options" id="option1" checked>
<label class="btn btn-secondary" for="option1">Checked</label>

<input type="radio" class="btn-check" name="options" id="option2">
<label class="btn btn-secondary" for="option2">Radio</label>

<input type="radio" class="btn-check" name="options" id="option3" disabled>
<label class="btn btn-secondary" for="option3">Disabled</label>

<input type="radio" class="btn-check" name="options" id="option4">
<label class="btn btn-secondary" for="option4">Radio</label>


<input type="radio" class="btn-check" name="options-base" id="option5" checked>
<label class="btn" for="option5">Checked</label>

<input type="radio" class="btn-check" name="options-base" id="option6">
<label class="btn" for="option6">Radio</label>

<input type="radio" class="btn-check" name="options-base" id="option7" disabled>
<label class="btn" for="option7">Disabled</label>

<input type="radio" class="btn-check" name="options-base" id="option8">
<label class="btn" for="option8">Radio</label>

Outlined styles

Different variants of .btn, such as the various outlined styles, are supported.

Single toggle
Checked
Checked success radio Danger radio


<input type="checkbox" class="btn-check" id="btn-check-outlined">
<label class="btn btn-outline-primary" for="btn-check-outlined">Single toggle</label><br>

<input type="checkbox" class="btn-check" id="btn-check-2-outlined" checked>
<label class="btn btn-outline-secondary" for="btn-check-2-outlined">Checked</label><br>

<input type="radio" class="btn-check" name="options-outlined" id="success-outlined" checked>
<label class="btn btn-outline-success" for="success-outlined">Checked success radio</label>

<input type="radio" class="btn-check" name="options-outlined" id="danger-outlined">
<label class="btn btn-outline-danger" for="danger-outlined">Danger radio</label>

Color Checkbox

Checkbox 1

Checkbox 2

Checkbox 3

Checkbox 4

Checkbox 5

Checkbox Small

Checkbox Default

Checkbox Large

Checkbox Extra Large


<div class="form-check custom-checkbox">
	<input type="checkbox" class="form-check-input" id="customCheckBox1" required>
	<label class="form-check-label" for="customCheckBox1">Checkbox 1</label>
</div>
<div class="form-check custom-checkbox checkbox-info">
	<input type="checkbox" class="form-check-input" checked id="customCheckBox2" required>
	<label class="form-check-label" for="customCheckBox2">Checkbox 2</label>
</div>
<div class="form-check custom-checkbox checkbox-success">
	<input type="checkbox" class="form-check-input" checked id="customCheckBox3" required>
	<label class="form-check-label" for="customCheckBox3">Checkbox 3</label>
</div>
<div class="form-check custom-checkbox checkbox-warning">
	<input type="checkbox" class="form-check-input" checked id="customCheckBox4" required>
	<label class="form-check-label" for="customCheckBox4">Checkbox 4</label>
</div>
<div class="form-check custom-checkbox checkbox-danger">
	<input type="checkbox" class="form-check-input" checked id="customCheckBox5" required>
	<label class="form-check-label" for="customCheckBox5">Checkbox 5</label>
</div>


<div class="form-check custom-checkbox checkbox-sm">
	<input type="checkbox" class="form-check-input" checked id="customCheckBox6" required>
	<label class="form-check-label" for="customCheckBox6"></label>
</div>
<div class="form-check custom-checkbox checkbox-info">
	<input type="checkbox" class="form-check-input" checked id="customCheckBox7" required>
	<label class="form-check-label" for="customCheckBox7"></label>
</div>
<div class="form-check custom-checkbox checkbox-success checkbox-lg">
	<input type="checkbox" class="form-check-input" checked id="customCheckBox8" required>
	<label class="form-check-label" for="customCheckBox8"></label>
</div>
<div class="form-check custom-checkbox checkbox-warning checkbox-xl">
	<input type="checkbox" class="form-check-input" checked id="customCheckBox9" required>
	<label class="form-check-label" for="customCheckBox9"></label>
</div>

Color Radio