Checks and Radios

Checks and Radios

Bootstrap 5 offers styled checkboxes and radio buttons. They use the .form-check wrapper with .form-check-input and .form-check-label.

Checkbox

<div class="form-check">
  <input type="checkbox" class="form-check-input" id="check1">
  <label class="form-check-label" for="check1">Option 1</label>
</div>

Radio buttons

All radios in a group share the same name attribute:

<div class="form-check">
  <input type="radio" class="form-check-input" name="optradio" id="radio1" checked>
  <label class="form-check-label" for="radio1">Option 1</label>
</div>
<div class="form-check">
  <input type="radio" class="form-check-input" name="optradio" id="radio2">
  <label class="form-check-label" for="radio2">Option 2</label>
</div>

Disabled states

Add the disabled attribute to disable a checkbox or radio:

<div class="form-check">
  <input type="checkbox" class="form-check-input" id="check2" disabled>
  <label class="form-check-label" for="check2">Disabled</label>
</div>

Switch

Add .form-switch to turn a checkbox into a toggle switch:

<div class="form-check form-switch">
  <input type="checkbox" class="form-check-input" id="switch1">
  <label class="form-check-label" for="switch1">Toggle switch</label>
</div>

Inline checks

Add .form-check-inline to place checks or radios on the same line:

<div class="form-check form-check-inline">
  <input type="checkbox" class="form-check-input" id="inline1">
  <label class="form-check-label" for="inline1">One</label>
</div>

TL;DR

• Use .form-check wrapper with .form-check-input and .form-check-label.
• Radios in a group share the same name attribute.
• .form-switch turns a checkbox into a toggle.
• .form-check-inline puts them on one line.