Bootstrap 5 Checks and Radios

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 
<!DOCTYPE html>
<html>

<head>
    <!-- Bootstrap CDN -->
    <link rel="stylesheet"
          href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
          crossorigin="anonymous">
</head>

<body class="m-3">
    <h1 class="text-success">
        GeeksforGeeks
    </h1>
    <h3>Bootstrap5 Checks and radios</h3>
    <br>

    <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>
</body>

</html>

Output:

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

HTML 
<!DOCTYPE html>
<html>

<head>
    <!-- Bootstrap CDN -->
    <link rel="stylesheet"
          href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
          crossorigin="anonymous">
</head>

<body class="m-4">
    <h1 class="text-success"> 
        GeeksforGeeks 
    </h1>
    <h3>Bootstrap5 Checks and radios</h3>
    <br>

    <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>
</body>

</html>

Output:

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

Comment

Explore