Bootstrap 5 Checkboxes and Radio buttons


Checkboxes

Checkboxes are used if you want the user to select any number of options from a list of preset options.

Example

<div class="form-check">
  <input class="form-check-input" type="checkbox" id="check1" name="option1" value="something" checked>
  <label class="form-check-label">Option 1</label>
</div>
Try it Yourself »

Example Explained

To style checkboxes, use a wrapper element with class="form-check" to ensure proper margins for labels and checkboxes.

Then, add the .form-check-label class to label elements, and .form-check-input to style checkboxes properly inside the .form-check container.

Use the checked attribute if you want the checkbox to be checked by default.


Radio buttons

Radio buttons are used if you want to limit the user to just one selection from a list of preset options.

Example

<div class="form-check">
  <input type="radio" class="form-check-input" id="radio1" name="optradio" value="option1" checked>Option 1
  <label class="form-check-label" for="radio1"></label>
</div>
<div class="form-check">
  <input type="radio" class="form-check-input" id="radio2" name="optradio" value="option2">Option 2
  <label class="form-check-label" for="radio2"></label>
</div>
<div class="form-check">
  <input type="radio" class="form-check-input" disabled>Option 3
  <label class="form-check-label"></label>
</div>
Try it Yourself »

Toggle Switches

If you want your checkbox to be styled as a toggle switch, use the .form-switch class together with the .form-check container:

Example

<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="mySwitch" name="darkmode" value="yes" checked>
  <label class="form-check-label" for="mySwitch">Dark Mode</label>
</div>
Try it Yourself »

Copyright 1999-2023 by Refsnes Data. All Rights Reserved.