Bootstrap 5 Radio Button

Bootstrap 5 Radio buttons are used when there is a list of two or more mutually exclusive options, and the user must select exactly one option. In other words, clicking a non-selected radio button will deselect whatever other button was previously chosen in the list.

Bootstrap 5 Radio buttons are used when you wish to limit the user to only one option from a list of preset selections.

Default Radio button

Bootstrap 5 default radio button shows unchecked and non-disabled in the form. Bootstrap 5 radio button uses in the form of a single selection of the single input element. It is a user interaction function and is dependent on each other.

Syntax

The following syntax shows us to create bootstrap 5 radio button in form.

Example

• To style the radio button, use a wrapper element with the class = "form-check" to ensure suitable label and checkbox margins.
• Then, add the ".form-check-label" and ".form-check-input" classes used to label elements and show the radio button. It places inside of the ".form-check" class of the container.
• We can use the following example and its output to show bootstrap 5 checkboxes.

Output

The following image shows the default bootstrap 5 radio buttons in the form.

Checked Radio button

The checked radio button selects the default value using bootstrap 5 elements and keywords. This radio button provides an on the button, but we can uncheck and select another button per requirement. We can check one radio button.

Syntax

Example

The following example shows one checked and other unchecked radio button. The first element is checked by default but we can select other option using radio button.

Output

The following image shows checked bootstrap 5 radio buttons in the form.

Example

The following example shows two checked and one unchecked radio button. The first element is checked does not display as by default checked button. The last checked button shows as default checked button. we can select other option using radio button.

Output

The following image shows the default bootstrap 5 radio buttons in the form.

Disabled Radio button

If we want the radio button to be disabled by default, use the disabled property in the bootstrap 5 radio button input element.

Syntax

The following syntax shows us to create bootstrap 5 disabled radio buttons by default in form.

Example

The following example shows two radio button disabled, one radio button enabled and one radio button checked. We can disabled multiple radio button in the form.

Output

The following image shows the default bootstrap 5 radio buttons in the form.

Conclusion

The bootstrap 5 radio button selects single output data in the form. It is a user interface function for the bootstrap 5 form. The radio buttons are dependent on user-friendly and space-saving functions.