Bootstrap 5 List group Checkboxes and radios

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 

Output:

👁 Image

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

Output:

👁 Image

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