Radio Input
Definition
Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.
Description
From Bootstrap 5's documentation:Browser default
checkboxes and radios are replaced with the help of .form-check, a series of classes for both input types that improves the layout and
behavior of their HTML elements, that provide greater customization and
cross browser consistency.
Accessibility Considerations
Addchecked in the input element to enable a default option. A simple
test to see if the ID on your label matches the ID on your input is to click
the label. If the input is selected, the IDs match. Test all the input labels
to be sure they are not associated with another group of buttons.
Basic Radio Group
<fieldset>
<legend class="h4 mb-0">Pick Your Car</legend>
<p class="help-text">If your car isn't listed select "None."</p>
<div class="form-check">
<input class="form-check-input" id="porsche9996" name="car" type="radio" />
<label for="porsche9996">Porsche 911</label>
</div>
<div class="form-check">
<input class="form-check-input" id="mustang9996" name="car" type="radio" />
<label for="mustang9996">Ford Mustang</label>
</div>
<div class="form-check">
<input class="form-check-input" id="nissan9996" name="car" type="radio" />
<label for="nissan9996">Nissan 370Z</label>
</div>
<div class="form-check">
<input class="form-check-input" id="none" name="car" type="radio" checked />
<label for="none">None</label>
</div>
</fieldset>