Bootstrap 5 Forms
BS5 Checks and Radios
Checkboxes
If you want the user to be able to choose from a list of pre-selected options, you utilize checkboxes.
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>
Example Explained
Use a wrapper element with class=”form-check” to style checkboxes and guarantee that labels and checkboxes have the correct margins.
Next, give label elements the .form-check-label class and checkboxes inside the .form-check container the .form-check-input class to appropriately design them.
If you would like the checkbox to be checked by default, use the checked property.
Radio buttons
If you want to restrict the user to choose only one choice from a list of pre-selected options, you can 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>
Toggle Switches
To style your checkbox as a toggle switch, combine the .form-switch class with the .form-check container as follows:
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>
