Checkbox list group

Bootstrap 5 Checkbox list group component

Responsive Checkbox list group built with Bootstrap 5. A guide showing how to easily and quickly create a list consisting of checkboxes.

Basic example

Place Bootstrap’s checkboxes and radios within list group items and customize as needed. You can use them without <label>s, but please remember to include an aria-label attribute and value for accessibility.

  • First checkbox
  • Second checkbox
  • Third checkbox
  • Fourth checkbox
  • Fifth checkbox
Edit in sandbox 
        
            
              <ul class="list-group list-group-light">
                <li class="list-group-item">
                  <input class="form-check-input me-1" type="checkbox" value="" aria-label="..." />
                  First checkbox
                </li>
                <li class="list-group-item">
                  <input class="form-check-input me-1" type="checkbox" value="" aria-label="..." />
                  Second checkbox
                </li>
                <li class="list-group-item">
                  <input class="form-check-input me-1" type="checkbox" value="" aria-label="..." />
                  Third checkbox
                </li>
                <li class="list-group-item">
                  <input class="form-check-input me-1" type="checkbox" value="" aria-label="..." />
                  Fourth checkbox
                </li>
                <li class="list-group-item">
                  <input class="form-check-input me-1" type="checkbox" value="" aria-label="..." />
                  Fifth checkbox
                </li>
              </ul>

And if you want <label>s as the .list-group-item for large hit areas, you can do that, too.

    • Edit in sandbox 
            
            
              <div class="list-group list-group-light">
                <li class="list-group-item">
                  <input class="form-check-input" type="checkbox" value="" id="checkboxExample1" />
                  <label class="form-check-label" for="checkboxExample1">First checkbox</label>
                </li>
                <li class="list-group-item">
                  <input class="form-check-input" type="checkbox" value="" id="checkboxExample2" />
                  <label class="form-check-label" for="checkboxExample2">Second checkbox</label>
                </li>
                <li class="list-group-item">
                  <input class="form-check-input" type="checkbox" value="" id="checkboxExample3" />
                  <label class="form-check-label" for="checkboxExample3">Third checkbox</label>
                </li>
                <li class="list-group-item">
                  <input class="form-check-input" type="checkbox" value="" id="checkboxExample4" />
                  <label class="form-check-label" for="checkboxExample4">Fourth checkbox</label>
                </li>
                <li class="list-group-item">
                  <input class="form-check-input" type="checkbox" value="" id="checkboxExample5" />
                  <label class="form-check-label" for="checkboxExample5">Fifth checkbox</label>
                </li>
              </div>