Dropdown checkbox

Bootstrap 5 Dropdown checkbox component

Responsive Dropdown checkbox built with Bootstrap 5. The bootstrap dropdown checkbox is a component that combines dropdown and checkbox.

Basic example

Add checkboxes to the dropdown to get a dropdown checkbox.

Edit in sandbox 
        
             
      <div class="dropdown">
        <button data-mdb-button-init data-mdb-ripple-init data-mdb-dropdown-init class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" 
        data-mdb-toggle="dropdown" aria-expanded="false">
        Checkbox dropdown
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <li>
                <a class="dropdown-item" href="#">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="Checkme1" />
                        <label class="form-check-label" for="Checkme1">Check me</label>
                    </div>
                </a>
            </li>
            <li>
                <a class="dropdown-item" href="#">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="Checkme2" checked />
                        <label class="form-check-label" for="Checkme2">Check me</label>
                    </div>
                </a>
            </li>
            <li>
                <a class="dropdown-item" href="#">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="Checkme3" />
                        <label class="form-check-label" for="Checkme3">Check me</label>
                    </div>
                </a>
            </li>
            <li><hr class="dropdown-divider" /></li>
            <li>
                <a class="dropdown-item" href="#">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="" id="Checkme4" checked />
                        <label class="form-check-label" for="Checkme4">Check me</label>
                    </div>
                </a>
            </li>
        </ul>
    </div>