Bootstrap 5 List group Checkboxes and radios

Last Updated : 07 Dec, 2022

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>