Bootstrap 5 Checkbox and radio button groups

Bootstrap5 checkbox and radio button group provide to combine the button, such as checkbox and radio toggle buttons in a button group, by implementing the .btn-group class.

Checkbox and Radio Button Group Classes:

.btn-group: This class is used to combine buttons.
.btn-check: This class is used to create checkable type buttons.

Syntax:

<section class="btn-group">
  <input type="checkbox" 
           class="btn-check"/>
      ...
</section>

Example 1: This example describes the use of the radio button groups in Bootstrap 5.

HTML

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" 
          href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
          crossorigin="anonymous">
</head>
<body class="d-flex flex-column align-items-center justify-content-center min-vh-100 text-center">
    <h1 class="text-success">
      GeeksforGeeks 
    </h1>
    <h3>
      Bootstrap 5 Checkbox and radio button groups
    </h3>
    <br>
    <section class="btn-group">
        <input type="radio" 
               class="btn-check" 
               name="btnradio" 
               id="gfg" checked>
        <label class="btn btn-outline-danger" 
               for="gfg">
            GFG Radio 1
        </label>
      
        <input type="radio" 
               class="btn-check" 
               name="btnradio" 
               id="gfg2">
        <label class="btn btn-outline-danger" 
               for="gfg2">
               GFG Radio 2
        </label>
      
        <input type="radio" 
               class="btn-check" 
               name="btnradio" 
               id="gfg3">
        <label class="btn btn-outline-danger" 
               for="gfg3">
               GFG Radio 3
        </label>
    </section>
</body>
</html>

Output:

Example 2: This example describes the use of the checkbox button groups in Bootstrap 5.

HTML

<!DOCTYPE html>
<html>

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

<body class="d-flex flex-column align-items-center justify-content-center min-vh-100 text-center">
    <h1 class="text-success"> 
        GeeksforGeeks 
    </h1>
    <h3>
        Bootstrap 5 Checkbox and radio button groups
    </h3>
    <br>
    <section class="btn-group">
        <input type="checkbox" 
               class="btn-check" 
               id="gfg1">
        <label class="btn btn-outline-success" 
               for="gfg1">
               GFG Checkbox 1
        </label>
      
        <input type="checkbox" 
               class="btn-check" 
               id="gfg2">
        <label class="btn btn-outline-success" 
               for="gfg2">
               GFG Checkbox 2
        </label>
      
        <input type="checkbox" 
               class="btn-check" 
               id="gfg3">
        <label class="btn btn-outline-success" 
               for="gfg3">
               GFG Checkbox 3
        </label>
    </section>
</body>
</html>

Output:

Reference: https://getbootstrap.com/docs/5.0/components/button-group/#checkbox-and-radio-button-groups

Bootstrap 5 Checkbox and radio button groups

Explore