Bootstrap 5 List group Checkboxes and radios

Last Updated : 23 Jul, 2025

Bootstrap 5 List group Checkboxes and radios use .list-group and .list-group-item classes to create a list of items. The .list-group class is used with <ul> element and the .list-group-item is used with <li> element. Then create the checkbox and radios in the input element using the type attribute.

Note: In situations where the element's potential label text is not visible, we can use the aria-label attribute.

Bootstrap 5 List group Checkboxes and radios Classes: No special classes are used in List group Checkboxes and radios. We use classes of List Group, Checkbox and Radio combined to achieve it.

 

Syntax:

<ul class="list-group">
     <li class="list-group-item">
           <input class="form-check-input me-1" 
               type="checkbox" value="" aria-label="...">   
    </li>
</ul>

Example 1: In this example, we will learn about  List group Checkboxes 

HTML 
<!DOCTYPE html>
<html>

<head>
    <!-- Load Bootstrap -->
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
</head>

<body>
    <div>
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <h2>List group Checkboxes and radios</h2>
        <div class="list-group">
            <label class="list-group-item">
                <input class="form-check-input me-1" 
                    type="checkbox">
                Java
            </label>
            <label class="list-group-item">
                <input class="form-check-input me-1" 
                        type="checkbox">
                CSS
            </label>
            <label class="list-group-item">
                <input class="form-check-input me-1" 
                        type="checkbox">
                HTML
            </label>
            <label class="list-group-item">
                <input class="form-check-input me-1" 
                    type="checkbox">
                Angular
            </label>
          <label class="list-group-item">
            <input class="form-check-input me-1" 
                type="checkbox">
                React
          </label>
        </div>         
    </div>
</body>
</html>

Output:

 

Example 2: In this example, we will learn about list group radio buttons.

HTML 
<!DOCTYPE html>
<html>
<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
        rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">


</head>

<body>
    <div>
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
        <h2>List group Checkboxes and radios</h2>
        <div class="list-group">
            <label class="list-group-item">
                <input class="form-check-input me-1"  
                        type="radio" name="GFG">
                Java
            </label>
            <label class="list-group-item">
                <input class="form-check-input me-1" 
                        type="radio" name="GFG">
                CSS
            </label>
            <label class="list-group-item">
                <input class="form-check-input me-1" 
                        type="radio" name="GFG">
                HTML
            </label>
            <label class="list-group-item">
                <input class="form-check-input me-1" 
                        type="radio" name="GFG">
                Angular
            </label>
            <label class="list-group-item">
                <input class="form-check-input me-1" 
                        type="radio" name="GFG">
                React
            </label>
        </div>      
    </div>
</body>
</html>

Output:

 

References: https://getbootstrap.com/docs/5.0/components/list-group/#checkboxes-and-radios

Comment

Explore