Bootstrap 5 Checks and Radios (original) (raw)

Last Updated : 23 Jul, 2025

Bootstrap 5 provides us with utility Checks and radios. This utility is used for creating checkboxes and radio without using CSS.

**Bootstrap 5 Checks and Radios:

**Checks****:** The checkboxes are used for selecting one or several options in a list.
**Radios: The radios are for selecting one option from many options.
**Switches: Switch in general gives the user an option to select one of the two possibilities present.
**Default (stacked)****:** Bootstrap 5 Checks and radios Default (stacked) is used to create a stack of checks and radios as a list. To create a stack we need to put the checks and radios normally one by one that will create stacks it’s the default behavior of Bootstrap 5 Checks and radios.
**Inline: For adding checks and radios in one horizontal row add ****.form-check-inline** class.
**Toggle buttons****:** With the help of this utility you can create checkboxes and radio buttons without using the .form-check-label class, but by using .btn styles.
**Without labels: This utility is used when we need to create checkboxes and radios without any label text.

**Example 1: Let's see an example of Bootstrap 5 Checks and radios by creating checks.

HTML `

GeeksforGeeks

Bootstrap5 Checks and radios

<div class="form-check">
    <input class="form-check-input"
           type="checkbox">
    <label>GFG Checkbox 1</label>
</div>
<div class="form-check">
    <input class="form-check-input"
           type="checkbox" checked>
    <label>GFG Checkbox 2</label>
</div>

**Output:

**Example 2: Let's see an example of Bootstrap 5 checks and radios by creating radios.

HTML `

GeeksforGeeks

Bootstrap5 Checks and radios

<div class="form-check">
    <input class="form-check-input" 
           type="radio" name="flexRadioDefault" 
           checked>
    <label>
        GFG Radio 1
    </label>
</div>
<div class="form-check">
    <input class="form-check-input" 
           type="radio" name="flexRadioDefault">
    <label>
        GFG radio 2
    </label>
  </div>

**Output:

**Reference: https://getbootstrap.com/docs/5.0/forms/checks-radios/