Bootstrap 5 Checkbox and radio button groups

Last Updated : 05 Aug, 2024

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 Button Group Sizing

pokhrajverma6266

Improve

Article Tags :

Bootstrap 5 Checkbox and radio button groups

Similar Reads

Accordion Component

Badges Component

Breadcrumb Component

Button group Component

Close button Component

Collapse Component

Offcanvas Component

Progress Component

Scrollspy Component

Spinners Component

Thank You!

What kind of Experience do you want to share?