Bootstrap 5 Checkbox and Radio Button

Course recommendation:

Checkbox

Example

<div class="form-check">
  If you want users to select any number of options from a predefined list, please use checkboxes.
  <input class="form-check-input" type="checkbox" id="check1" name="option1" value="something" checked>
</div>

Try It Yourself

<label class="form-check-label">Option 1</label>

Example explanation To set the checkbox style, please use class="form-check"

to the wrapping element to ensure that the label and checkbox have appropriate margins. .form-check-label class to the label element, and then add .form-check-input Add to .form-check within the container to correctly set the style of the checkbox.

If you want to default the checkbox to be checked, use Checked Properties.

Radio Buttons

If you want to limit users to select only one from the predefined option list, use radio buttons.

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 Switch

If you want to set the checkbox to the style of the toggle switch, please set .form-switch Class and .form-check Container usage together:

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