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.

<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>