Custom selects built from dropdowns and lists: searchable menus, multi-select with checkboxes, grouped options, people pickers and tag inputs for richer choices than a native select.
1Dropdown as select
A button styled like a select opens a menu of choices; the active item is highlighted.
Category
<p class="form-label mb-1" id="sd-cat-label-438">Category</p>
<div class="dropdown">
<button class="form-select text-start" type="button" data-bs-toggle="dropdown" aria-expanded="false" aria-labelledby="sd-cat-label-438">Starters</button>
<ul class="dropdown-menu w-100">
<li><button class="dropdown-item active" type="button" aria-current="true">Starters</button></li>
<li><button class="dropdown-item" type="button">Mains</button></li>
<li><button class="dropdown-item" type="button">Desserts</button></li>
<li><button class="dropdown-item" type="button">Drinks</button></li>
<li><button class="dropdown-item" type="button">Specials</button></li>
</ul>
</div>2Searchable dropdown
A filter field at the top of the menu hides options that do not match (data-demo-filter).
<div class="dropdown">
<button class="btn btn-outline-secondary dropdown-toggle w-100 text-start d-flex justify-content-between align-items-center" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false"><i class="bi bi-geo-alt" aria-hidden="true"></i> Choose a city</button>
<div class="dropdown-menu w-100 p-2">
<label for="sd-filter-input-440" class="visually-hidden">Filter cities</label>
<input type="search" class="form-control form-control-sm mb-2" id="sd-filter-input-440" placeholder="Type to filter..." data-demo-filter="#sd-filter-list-439">
<ul class="list-unstyled mb-0 overflow-auto" id="sd-filter-list-439" style="max-height: 12rem;">
<li data-demo-filter-item><button class="dropdown-item" type="button">Barcelona</button></li>
<li data-demo-filter-item><button class="dropdown-item" type="button">Copenhagen</button></li>
<li data-demo-filter-item><button class="dropdown-item" type="button">Denver</button></li>
<li data-demo-filter-item><button class="dropdown-item" type="button">Barcelona</button></li>
<li data-demo-filter-item><button class="dropdown-item" type="button">Porto</button></li>
<li data-demo-filter-item><button class="dropdown-item" type="button">Melbourne</button></li>
<li data-demo-filter-item><button class="dropdown-item" type="button">Dublin</button></li>
<li data-demo-filter-item><button class="dropdown-item" type="button">Lisbon</button></li>
</ul>
</div>
</div>3Multi-select with checkboxes
Checkboxes inside the menu; auto-close outside keeps it open while picking.
<div class="dropdown">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false"><i class="bi bi-ui-checks" aria-hidden="true"></i> Features</button>
<ul class="dropdown-menu">
<li><div class="dropdown-item"><div class="form-check mb-0"><input class="form-check-input" type="checkbox" id="sd-multi-441" checked><label class="form-check-label w-100" for="sd-multi-441">Local ingredients</label></div></div></li>
<li><div class="dropdown-item"><div class="form-check mb-0"><input class="form-check-input" type="checkbox" id="sd-multi-442"><label class="form-check-label w-100" for="sd-multi-442">Vegan options</label></div></div></li>
<li><div class="dropdown-item"><div class="form-check mb-0"><input class="form-check-input" type="checkbox" id="sd-multi-443"><label class="form-check-label w-100" for="sd-multi-443">Online reservations</label></div></div></li>
<li><div class="dropdown-item"><div class="form-check mb-0"><input class="form-check-input" type="checkbox" id="sd-multi-444"><label class="form-check-label w-100" for="sd-multi-444">Chef's specials</label></div></div></li>
<li><div class="dropdown-item"><div class="form-check mb-0"><input class="form-check-input" type="checkbox" id="sd-multi-445"><label class="form-check-label w-100" for="sd-multi-445">Fast delivery</label></div></div></li>
<li><div class="dropdown-item"><div class="form-check mb-0"><input class="form-check-input" type="checkbox" id="sd-multi-446" checked><label class="form-check-label w-100" for="sd-multi-446">Kid friendly</label></div></div></li>
<li><hr class="dropdown-divider"></li>
<li class="px-3 small text-body-secondary">Pick as many as you need</li>
</ul>
</div>4Grouped options
Dropdown headers and dividers group long option lists like optgroup does.
<div class="dropdown">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Time zone: Lisbon</button>
<ul class="dropdown-menu">
<li><h6 class="dropdown-header">Europe</h6></li>
<li><button class="dropdown-item active" type="button">Lisbon (UTC+0)</button></li>
<li><button class="dropdown-item" type="button">Prague (UTC+1)</button></li>
<li><hr class="dropdown-divider"></li>
<li><h6 class="dropdown-header">Americas</h6></li>
<li><button class="dropdown-item" type="button">Toronto (UTC-5)</button></li>
<li><button class="dropdown-item" type="button">Denver (UTC-7)</button></li>
<li><hr class="dropdown-divider"></li>
<li><h6 class="dropdown-header">Asia Pacific</h6></li>
<li><button class="dropdown-item" type="button">Seoul (UTC+9)</button></li>
<li><button class="dropdown-item" type="button">Auckland (UTC+12)</button></li>
</ul>
</div>5People picker
Avatars and roles in each option make assigning work faster.
Assignee
<p class="small fw-semibold mb-1">Assignee</p>
<div class="dropdown">
<button class="btn btn-light border dropdown-toggle d-flex align-items-center gap-2" type="button" data-bs-toggle="dropdown" aria-expanded="false"> <img src="../assets/img/avatar-11.svg" alt="" width="24" height="24" class="rounded-circle">Mia Kowalski</button>
<ul class="dropdown-menu">
<li><button class="dropdown-item d-flex align-items-center gap-2" type="button"><img src="../assets/img/avatar-11.svg" alt="" width="28" height="28" class="rounded-circle"><span><span class="d-block">Mia Kowalski</span><small class="text-body-secondary">Support Specialist</small></span></button></li>
<li><button class="dropdown-item d-flex align-items-center gap-2" type="button"><img src="../assets/img/avatar-8.svg" alt="" width="28" height="28" class="rounded-circle"><span><span class="d-block">Tariq Haddad</span><small class="text-body-secondary">Customer Success</small></span></button></li>
<li><button class="dropdown-item d-flex align-items-center gap-2" type="button"><img src="../assets/img/avatar-7.svg" alt="" width="28" height="28" class="rounded-circle"><span><span class="d-block">Elena Lindqvist</span><small class="text-body-secondary">QA Engineer</small></span></button></li>
<li><button class="dropdown-item d-flex align-items-center gap-2" type="button"><img src="../assets/img/avatar-7.svg" alt="" width="28" height="28" class="rounded-circle"><span><span class="d-block">Kai Ashford</span><small class="text-body-secondary">Operations Manager</small></span></button></li>
</ul>
</div>6Options with icons and descriptions
Each option shows an icon, a name and a short explanation.
<div class="dropdown">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"><i class="bi bi-people" aria-hidden="true"></i> Visibility: Team</button>
<ul class="dropdown-menu" style="max-width: 18rem;">
<li><button class="dropdown-item d-flex gap-2 text-wrap" type="button"><i class="bi bi-globe" aria-hidden="true"></i><span><strong class="d-block">Public</strong><small class="text-body-secondary">Anyone with the link can view</small></span></button></li>
<li><button class="dropdown-item d-flex gap-2 text-wrap active" type="button"><i class="bi bi-people" aria-hidden="true"></i><span><strong class="d-block">Team</strong><small>Only members of Iris Hub</small></span></button></li>
<li><button class="dropdown-item d-flex gap-2 text-wrap" type="button"><i class="bi bi-lock" aria-hidden="true"></i><span><strong class="d-block">Private</strong><small class="text-body-secondary">Only you and people you invite</small></span></button></li>
</ul>
</div>7Tag input
data-demo-tags turns typed text into removable chips on Enter or comma.
Separate tags with Enter or a comma.
<label for="sd-tags-447" class="form-label">Tags</label>
<div class="form-control d-flex flex-wrap gap-1 align-items-center" data-demo-tags>
<input type="text" class="border-0 flex-grow-1 bg-transparent" id="sd-tags-447" placeholder="Add a tag and press Enter" style="outline: none; min-width: 8rem;">
</div>
<div class="form-text">
Separate tags with Enter or a comma.
</div>8Tags with suggestions
Existing chips inside the field and suggested tags below it.
updatetipsdesign
Suggested:
<label for="sd-tags-pre-448" class="form-label">Skills</label>
<div class="form-control d-flex flex-wrap gap-1 align-items-center" data-demo-tags>
<span class="badge text-bg-primary d-inline-flex align-items-center gap-1">update
<button type="button" class="btn-close btn-close-white" style="font-size: .5rem;" aria-label="Remove tag"></button>
</span><span class="badge text-bg-primary d-inline-flex align-items-center gap-1">tips
<button type="button" class="btn-close btn-close-white" style="font-size: .5rem;" aria-label="Remove tag"></button>
</span><span class="badge text-bg-primary d-inline-flex align-items-center gap-1">design
<button type="button" class="btn-close btn-close-white" style="font-size: .5rem;" aria-label="Remove tag"></button>
</span> <input type="text" class="border-0 flex-grow-1 bg-transparent" id="sd-tags-pre-448" placeholder="Add skill" style="outline: none; min-width: 6rem;">
</div>
<div class="d-flex flex-wrap gap-1 mt-2">
<span class="small text-body-secondary me-1">Suggested:</span>
<button type="button" class="btn btn-sm btn-light border rounded-pill">+ case study</button>
<button type="button" class="btn btn-sm btn-light border rounded-pill">+ design</button>
<button type="button" class="btn btn-sm btn-light border rounded-pill">+ tutorial</button>
<button type="button" class="btn btn-sm btn-light border rounded-pill">+ tips</button>
</div>9Searchable list
A filter field above a list group works like a always-open searchable select.
<label for="sd-lg-filter-449" class="form-label">Pick a dish</label>
<input type="search" class="form-control mb-2" id="sd-lg-filter-449" placeholder="Search..." data-demo-filter="#sd-lg-list-450">
<div class="list-group overflow-auto" id="sd-lg-list-450" style="max-height: 14rem;">
<label class="list-group-item d-flex gap-2 align-items-center" data-demo-filter-item><input class="form-check-input m-0" type="radio" name="sd-lg-list-450-pick"><span class="flex-grow-1">Chocolate tart</span><span class="small text-body-secondary">$10.00</span></label>
<label class="list-group-item d-flex gap-2 align-items-center" data-demo-filter-item><input class="form-check-input m-0" type="radio" name="sd-lg-list-450-pick"><span class="flex-grow-1">Espresso martini</span><span class="small text-body-secondary">$13.00</span></label>
<label class="list-group-item d-flex gap-2 align-items-center" data-demo-filter-item><input class="form-check-input m-0" type="radio" name="sd-lg-list-450-pick"><span class="flex-grow-1">Wood-fired pizza</span><span class="small text-body-secondary">$17.00</span></label>
<label class="list-group-item d-flex gap-2 align-items-center" data-demo-filter-item><input class="form-check-input m-0" type="radio" name="sd-lg-list-450-pick"><span class="flex-grow-1">Garden salad</span><span class="small text-body-secondary">$12.00</span></label>
<label class="list-group-item d-flex gap-2 align-items-center" data-demo-filter-item><input class="form-check-input m-0" type="radio" name="sd-lg-list-450-pick"><span class="flex-grow-1">Slow-cooked lamb</span><span class="small text-body-secondary">$31.00</span></label>
<label class="list-group-item d-flex gap-2 align-items-center" data-demo-filter-item><input class="form-check-input m-0" type="radio" name="sd-lg-list-450-pick"><span class="flex-grow-1">House lemonade</span><span class="small text-body-secondary">$5.00</span></label>
</div>10Country code picker
A searchable dropdown of dialling codes attached to a phone field.
<label for="sd-phone-453" class="form-label">Phone number</label>
<div class="input-group">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">CA +1</button>
<div class="dropdown-menu p-2" style="min-width: 15rem;">
<label for="sd-country-filter-451" class="visually-hidden">Search countries</label>
<input type="search" class="form-control form-control-sm mb-2" id="sd-country-filter-451" placeholder="Search country" data-demo-filter="#sd-country-list-452">
<ul class="list-unstyled mb-0" id="sd-country-list-452">
<li data-demo-filter-item><button type="button" class="dropdown-item d-flex align-items-center gap-2"><span class="badge text-bg-light border">PT</span><span class="flex-grow-1">Portugal</span><small class="text-body-secondary">+351</small></button></li>
<li data-demo-filter-item><button type="button" class="dropdown-item d-flex align-items-center gap-2"><span class="badge text-bg-light border">CA</span><span class="flex-grow-1">Canada</span><small class="text-body-secondary">+1</small></button></li>
<li data-demo-filter-item><button type="button" class="dropdown-item d-flex align-items-center gap-2"><span class="badge text-bg-light border">AU</span><span class="flex-grow-1">Australia</span><small class="text-body-secondary">+61</small></button></li>
<li data-demo-filter-item><button type="button" class="dropdown-item d-flex align-items-center gap-2"><span class="badge text-bg-light border">DK</span><span class="flex-grow-1">Denmark</span><small class="text-body-secondary">+45</small></button></li>
<li data-demo-filter-item><button type="button" class="dropdown-item d-flex align-items-center gap-2"><span class="badge text-bg-light border">JP</span><span class="flex-grow-1">Japan</span><small class="text-body-secondary">+81</small></button></li>
<li data-demo-filter-item><button type="button" class="dropdown-item d-flex align-items-center gap-2"><span class="badge text-bg-light border">NO</span><span class="flex-grow-1">Norway</span><small class="text-body-secondary">+47</small></button></li>
<li data-demo-filter-item><button type="button" class="dropdown-item d-flex align-items-center gap-2"><span class="badge text-bg-light border">IE</span><span class="flex-grow-1">Ireland</span><small class="text-body-secondary">+353</small></button></li>
</ul>
</div>
<input type="tel" class="form-control" id="sd-phone-453" placeholder="555 532 7169">
</div>11Status picker
Coloured dots before each status make the options easy to tell apart.
<div class="dropdown">
<button class="btn btn-sm btn-light border dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"><span class="tl-dot bg-warning"></span> In progress</button>
<ul class="dropdown-menu">
<li><button class="dropdown-item" type="button"><span class="tl-dot bg-secondary"></span> Backlog</button></li>
<li><button class="dropdown-item" type="button"><span class="tl-dot bg-info"></span> To do</button></li>
<li><button class="dropdown-item active" type="button"><span class="tl-dot bg-warning"></span> In progress</button></li>
<li><button class="dropdown-item" type="button"><span class="tl-dot bg-primary"></span> In review</button></li>
<li><button class="dropdown-item" type="button"><span class="tl-dot bg-success"></span> Done</button></li>
</ul>
</div>12Combo box
Type a value freely or pick a suggestion from the attached menu.
<label for="sd-combo-454" class="form-label">Service</label>
<div class="input-group">
<input type="text" class="form-control" id="sd-combo-454" placeholder="Type or choose a service">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Show suggestions"></button>
<ul class="dropdown-menu dropdown-menu-end">
<li><button class="dropdown-item" type="button">Cooking classes</button></li>
<li><button class="dropdown-item" type="button">Dine-in</button></li>
<li><button class="dropdown-item" type="button">Cooking classes</button></li>
<li><button class="dropdown-item" type="button">Cooking classes</button></li>
<li><button class="dropdown-item" type="button">Dine-in</button></li>
</ul>
</div>13Multi-select with chips
The toggle shows the chosen options as badges, the menu holds the checkboxes.
Departments
<p class="small fw-semibold mb-1">Departments</p>
<div class="dropdown">
<button class="form-select text-start d-flex flex-wrap gap-1" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false" aria-label="Departments"> <span class="badge text-bg-secondary">Starters</span><span class="badge text-bg-secondary">Mains</span></button>
<ul class="dropdown-menu w-100">
<li><div class="dropdown-item"><div class="form-check mb-0"><input class="form-check-input" type="checkbox" id="sd-mb-455" checked><label class="form-check-label w-100" for="sd-mb-455">Starters</label></div></div></li>
<li><div class="dropdown-item"><div class="form-check mb-0"><input class="form-check-input" type="checkbox" id="sd-mb-456" checked><label class="form-check-label w-100" for="sd-mb-456">Mains</label></div></div></li>
<li><div class="dropdown-item"><div class="form-check mb-0"><input class="form-check-input" type="checkbox" id="sd-mb-457"><label class="form-check-label w-100" for="sd-mb-457">Desserts</label></div></div></li>
<li><div class="dropdown-item"><div class="form-check mb-0"><input class="form-check-input" type="checkbox" id="sd-mb-458"><label class="form-check-label w-100" for="sd-mb-458">Drinks</label></div></div></li>
<li><div class="dropdown-item"><div class="form-check mb-0"><input class="form-check-input" type="checkbox" id="sd-mb-459"><label class="form-check-label w-100" for="sd-mb-459">Specials</label></div></div></li>
</ul>
</div>14Single choice with radios
Radios inside the menu make the current selection explicit.
<div class="dropdown">
<button class="btn btn-outline-secondary btn-sm dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false"><i class="bi bi-sort-down" aria-hidden="true"></i> Sort: Newest</button>
<ul class="dropdown-menu">
<li><div class="dropdown-item"><div class="form-check mb-0"><input class="form-check-input" type="radio" name="sd-radio-460" id="sd-radio-opt-461"><label class="form-check-label w-100" for="sd-radio-opt-461">Relevance</label></div></div></li>
<li><div class="dropdown-item"><div class="form-check mb-0"><input class="form-check-input" type="radio" name="sd-radio-460" id="sd-radio-opt-462" checked><label class="form-check-label w-100" for="sd-radio-opt-462">Newest</label></div></div></li>
<li><div class="dropdown-item"><div class="form-check mb-0"><input class="form-check-input" type="radio" name="sd-radio-460" id="sd-radio-opt-463"><label class="form-check-label w-100" for="sd-radio-opt-463">Oldest</label></div></div></li>
<li><div class="dropdown-item"><div class="form-check mb-0"><input class="form-check-input" type="radio" name="sd-radio-460" id="sd-radio-opt-464"><label class="form-check-label w-100" for="sd-radio-opt-464">Most commented</label></div></div></li>
</ul>
</div>15Multi-column picker
A wide menu with grouped columns for large category trees.
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false"><i class="bi bi-grid-3x3-gap" aria-hidden="true"></i> Browse categories</button>
<div class="dropdown-menu p-3" style="width: min(36rem, 92vw);">
<div class="row g-3">
<div class="col-sm-4">
<h6 class="dropdown-header px-0">Starters</h6>
<button class="dropdown-item px-0 small" type="button">Calm routine</button>
<button class="dropdown-item px-0 small" type="button">Clear workflow</button>
<button class="dropdown-item px-0 small" type="button">Modern journey</button>
</div>
<div class="col-sm-4">
<h6 class="dropdown-header px-0">Mains</h6>
<button class="dropdown-item px-0 small" type="button">Clear community</button>
<button class="dropdown-item px-0 small" type="button">Practical experience</button>
<button class="dropdown-item px-0 small" type="button">Simple dashboard</button>
</div>
<div class="col-sm-4">
<h6 class="dropdown-header px-0">Desserts</h6>
<button class="dropdown-item px-0 small" type="button">Powerful release</button>
<button class="dropdown-item px-0 small" type="button">Modern workflow</button>
<button class="dropdown-item px-0 small" type="button">Fast launch</button>
</div>
</div>
</div>
</div>16Dropdown with footer actions
Clear and Apply buttons at the bottom of a filter menu.
<div class="dropdown">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false"><i class="bi bi-funnel" aria-hidden="true"></i> Payment status <span class="badge text-bg-primary">1</span></button>
<div class="dropdown-menu p-0" style="min-width: 14rem;">
<div class="p-3">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="sd-fo-465" checked>
<label class="form-check-label" for="sd-fo-465">Paid</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="sd-fo-466">
<label class="form-check-label" for="sd-fo-466">Pending</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="sd-fo-467">
<label class="form-check-label" for="sd-fo-467">Refunded</label>
</div>
<div class="form-check">
<input class="form-check-input" type="checkbox" id="sd-fo-468">
<label class="form-check-label" for="sd-fo-468">Failed</label>
</div>
</div>
<div class="d-flex justify-content-between border-top p-2">
<button type="button" class="btn btn-sm btn-link text-decoration-none">Clear</button>
<button type="button" class="btn btn-sm btn-primary">Apply</button>
</div>
</div>
</div>17Command palette
A large search over a list of actions with keyboard hints.
<div class="border rounded-3 shadow-sm overflow-hidden" style="max-width: 30rem;">
<div class="d-flex align-items-center gap-2 px-3 border-bottom">
<i class="bi bi-command" aria-hidden="true"></i>
<label for="sd-cmd-469" class="visually-hidden">Search commands</label>
<input type="search" class="form-control border-0 shadow-none py-3" id="sd-cmd-469" placeholder="Type a command..." data-demo-filter="#sd-cmd-list-470">
</div>
<div class="list-group list-group-flush" id="sd-cmd-list-470">
<button type="button" class="list-group-item list-group-item-action d-flex align-items-center gap-2" data-demo-filter-item><i class="bi bi-file-earmark-plus" aria-hidden="true"></i><span class="flex-grow-1">New document</span><kbd>Ctrl N</kbd></button>
<button type="button" class="list-group-item list-group-item-action d-flex align-items-center gap-2" data-demo-filter-item><i class="bi bi-person-plus" aria-hidden="true"></i><span class="flex-grow-1">Invite teammate</span><kbd>Ctrl I</kbd></button>
<button type="button" class="list-group-item list-group-item-action d-flex align-items-center gap-2" data-demo-filter-item><i class="bi bi-search" aria-hidden="true"></i><span class="flex-grow-1">Search everywhere</span><kbd>Ctrl K</kbd></button>
<button type="button" class="list-group-item list-group-item-action d-flex align-items-center gap-2" data-demo-filter-item><i class="bi bi-gear" aria-hidden="true"></i><span class="flex-grow-1">Open settings</span><kbd>Ctrl ,</kbd></button>
<button type="button" class="list-group-item list-group-item-action d-flex align-items-center gap-2" data-demo-filter-item><i class="bi bi-box-arrow-right" aria-hidden="true"></i><span class="flex-grow-1">Sign out</span><kbd>Ctrl Q</kbd></button>
</div>
</div>18Label picker
Filterable coloured labels with checkboxes, as used in issue trackers.
<div class="dropdown">
<button class="btn btn-sm btn-light border dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false"><i class="bi bi-tags" aria-hidden="true"></i> Labels</button>
<div class="dropdown-menu p-0" style="min-width: 15rem;">
<div class="p-2 border-bottom">
<label for="sd-label-471" class="visually-hidden">Filter labels</label>
<input type="search" class="form-control form-control-sm" id="sd-label-471" placeholder="Filter labels" data-demo-filter="#sd-label-list-472">
</div>
<ul class="list-unstyled mb-0 py-1" id="sd-label-list-472">
<li data-demo-filter-item><div class="dropdown-item"><div class="form-check mb-0"><input class="form-check-input" type="checkbox" id="sd-label-opt-473"><label class="form-check-label w-100 d-flex align-items-center gap-2" for="sd-label-opt-473"><span class="tl-label-dot bg-danger"></span>bug</label></div></div></li>
<li data-demo-filter-item><div class="dropdown-item"><div class="form-check mb-0"><input class="form-check-input" type="checkbox" id="sd-label-opt-474"><label class="form-check-label w-100 d-flex align-items-center gap-2" for="sd-label-opt-474"><span class="tl-label-dot bg-success"></span>feature</label></div></div></li>
<li data-demo-filter-item><div class="dropdown-item"><div class="form-check mb-0"><input class="form-check-input" type="checkbox" id="sd-label-opt-475"><label class="form-check-label w-100 d-flex align-items-center gap-2" for="sd-label-opt-475"><span class="tl-label-dot bg-info"></span>design</label></div></div></li>
<li data-demo-filter-item><div class="dropdown-item"><div class="form-check mb-0"><input class="form-check-input" type="checkbox" id="sd-label-opt-476"><label class="form-check-label w-100 d-flex align-items-center gap-2" for="sd-label-opt-476"><span class="tl-label-dot bg-secondary"></span>docs</label></div></div></li>
<li data-demo-filter-item><div class="dropdown-item"><div class="form-check mb-0"><input class="form-check-input" type="checkbox" id="sd-label-opt-477"><label class="form-check-label w-100 d-flex align-items-center gap-2" for="sd-label-opt-477"><span class="tl-label-dot bg-warning"></span>urgent</label></div></div></li>
<li data-demo-filter-item><div class="dropdown-item"><div class="form-check mb-0"><input class="form-check-input" type="checkbox" id="sd-label-opt-478"><label class="form-check-label w-100 d-flex align-items-center gap-2" for="sd-label-opt-478"><span class="tl-label-dot bg-primary"></span>tutorial</label></div></div></li>
</ul>
<div class="border-top p-2">
<button type="button" class="btn btn-sm btn-link text-decoration-none p-0"><i class="bi bi-plus" aria-hidden="true"></i> Create label</button>
</div>
</div>
</div>19Searchable multi-select
Filter, select-all and checkboxes combined for picking many people from a long list.
<div class="dropdown">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false"><i class="bi bi-people" aria-hidden="true"></i> Invite attendees</button>
<div class="dropdown-menu p-0" style="min-width: 17rem;">
<div class="p-2 border-bottom">
<label for="sd-sm-filter-479" class="visually-hidden">Search people</label>
<input type="search" class="form-control form-control-sm" id="sd-sm-filter-479" placeholder="Search people" data-demo-filter="#sd-sm-list-480">
</div>
<div class="px-3 pt-2">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="sd-sm-all-482" data-demo-select-all="sd-sm-group-481">
<label class="form-check-label small fw-semibold" for="sd-sm-all-482">Select everyone</label>
</div>
</div>
<ul class="list-unstyled mb-0 py-1 overflow-auto" id="sd-sm-list-480" style="max-height: 12rem;">
<li data-demo-filter-item><div class="dropdown-item"><div class="form-check mb-0"><input class="form-check-input" type="checkbox" name="sd-sm-group-481" id="sd-sm-opt-483"><label class="form-check-label w-100 d-flex justify-content-between gap-3" for="sd-sm-opt-483"><span>Priya Varga</span><small class="text-body-secondary">Auckland</small></label></div></div></li>
<li data-demo-filter-item><div class="dropdown-item"><div class="form-check mb-0"><input class="form-check-input" type="checkbox" name="sd-sm-group-481" id="sd-sm-opt-484"><label class="form-check-label w-100 d-flex justify-content-between gap-3" for="sd-sm-opt-484"><span>Noah Harlow</span><small class="text-body-secondary">Auckland</small></label></div></div></li>
<li data-demo-filter-item><div class="dropdown-item"><div class="form-check mb-0"><input class="form-check-input" type="checkbox" name="sd-sm-group-481" id="sd-sm-opt-485"><label class="form-check-label w-100 d-flex justify-content-between gap-3" for="sd-sm-opt-485"><span>Leo Duarte</span><small class="text-body-secondary">Denver</small></label></div></div></li>
<li data-demo-filter-item><div class="dropdown-item"><div class="form-check mb-0"><input class="form-check-input" type="checkbox" name="sd-sm-group-481" id="sd-sm-opt-486"><label class="form-check-label w-100 d-flex justify-content-between gap-3" for="sd-sm-opt-486"><span>Owen Silva</span><small class="text-body-secondary">Melbourne</small></label></div></div></li>
<li data-demo-filter-item><div class="dropdown-item"><div class="form-check mb-0"><input class="form-check-input" type="checkbox" name="sd-sm-group-481" id="sd-sm-opt-487"><label class="form-check-label w-100 d-flex justify-content-between gap-3" for="sd-sm-opt-487"><span>Liam Mensah</span><small class="text-body-secondary">Montreal</small></label></div></div></li>
<li data-demo-filter-item><div class="dropdown-item"><div class="form-check mb-0"><input class="form-check-input" type="checkbox" name="sd-sm-group-481" id="sd-sm-opt-488"><label class="form-check-label w-100 d-flex justify-content-between gap-3" for="sd-sm-opt-488"><span>Kenji Ibrahim</span><small class="text-body-secondary">Austin</small></label></div></div></li>
</ul>
<div class="border-top p-2 text-end">
<button type="button" class="btn btn-sm btn-primary">Send invites</button>
</div>
</div>
</div>20Sizes and states
Small, default and large dropdown selects plus a disabled one.
<div class="d-flex flex-wrap gap-2 align-items-center">
<div class="dropdown">
<button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Small</button>
<ul class="dropdown-menu">
<li><button class="dropdown-item" type="button">Small</button></li>
<li><button class="dropdown-item" type="button">Medium</button></li>
<li><button class="dropdown-item" type="button">Large</button></li>
</ul>
</div>
<div class="dropdown">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Default</button>
<ul class="dropdown-menu">
<li><button class="dropdown-item" type="button">Small</button></li>
<li><button class="dropdown-item" type="button">Medium</button></li>
<li><button class="dropdown-item" type="button">Large</button></li>
</ul>
</div>
<div class="dropdown">
<button class="btn btn-lg btn-outline-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">Large</button>
<ul class="dropdown-menu">
<li><button class="dropdown-item" type="button">Small</button></li>
<li><button class="dropdown-item" type="button">Medium</button></li>
<li><button class="dropdown-item" type="button">Large</button></li>
</ul>
</div>
<div class="dropdown">
<button class="btn btn-outline-secondary dropdown-toggle" type="button" disabled aria-expanded="false">Disabled</button>
</div>
</div>