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-ui-toggle="dropdown" aria-expanded="false" aria-labelledby="sd-cat-label-438">Strength</button>
<ul class="dropdown-menu w-100">
<li><button class="dropdown-item active" type="button" aria-current="true">Strength</button></li>
<li><button class="dropdown-item" type="button">Cardio</button></li>
<li><button class="dropdown-item" type="button">Yoga</button></li>
<li><button class="dropdown-item" type="button">HIIT</button></li>
<li><button class="dropdown-item" type="button">Recovery</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-ui-toggle="dropdown" data-ui-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">Lisbon</button></li>
<li data-demo-filter-item><button class="dropdown-item" type="button">Cape Town</button></li>
<li data-demo-filter-item><button class="dropdown-item" type="button">Austin</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">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">Valencia</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-ui-toggle="dropdown" data-ui-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">Certified coaches</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">Open 24/7</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">Progress tracking</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" checked><label class="form-check-label w-100" for="sd-multi-444">Flexible plans</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">Modern equipment</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"><label class="form-check-label w-100" for="sd-multi-446">Community events</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-ui-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-ui-toggle="dropdown" aria-expanded="false"> <img src="../assets/img/avatar-6.svg" alt="" width="24" height="24" class="rounded-circle">Noah Varga</button>
<ul class="dropdown-menu">
<li><button class="dropdown-item d-flex align-items-center gap-2" type="button"><img src="../assets/img/avatar-6.svg" alt="" width="28" height="28" class="rounded-circle"><span><span class="d-block">Noah Varga</span><small class="text-body-secondary">Frontend Engineer</small></span></button></li>
<li><button class="dropdown-item d-flex align-items-center gap-2" type="button"><img src="../assets/img/avatar-3.svg" alt="" width="28" height="28" class="rounded-circle"><span><span class="d-block">Kai Harlow</span><small class="text-body-secondary">Product Designer</small></span></button></li>
<li><button class="dropdown-item d-flex align-items-center gap-2" type="button"><img src="../assets/img/avatar-3.svg" alt="" width="28" height="28" class="rounded-circle"><span><span class="d-block">Samir Ortega</span><small class="text-body-secondary">HR Partner</small></span></button></li>
<li><button class="dropdown-item d-flex align-items-center gap-2" type="button"><img src="../assets/img/avatar-9.svg" alt="" width="28" height="28" class="rounded-circle"><span><span class="d-block">Finn Brennan</span><small class="text-body-secondary">Marketing Lead</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-ui-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 Aeroium Deck</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.
how-tohow-tocase study
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">how-to
<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">how-to
<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">case study
<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">+ news</button>
<button type="button" class="btn btn-sm btn-light border rounded-pill">+ tips</button>
<button type="button" class="btn btn-sm btn-light border rounded-pill">+ product</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 class</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">Spin class pack</span><span class="small text-body-secondary">$93.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">Sauna session</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">Massage</span><span class="small text-body-secondary">$71.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">Personal training</span><span class="small text-body-secondary">$65.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">Monthly pass</span><span class="small text-body-secondary">$48.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">Day pass</span><span class="small text-body-secondary">$16.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-ui-toggle="dropdown" data-ui-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 991 4468">
</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-ui-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-ui-toggle="dropdown" aria-expanded="false" aria-label="Show suggestions"></button>
<ul class="dropdown-menu dropdown-menu-end">
<li><button class="dropdown-item" type="button">Nutrition plans</button></li>
<li><button class="dropdown-item" type="button">Yoga</button></li>
<li><button class="dropdown-item" type="button">Group classes</button></li>
<li><button class="dropdown-item" type="button">Personal training</button></li>
<li><button class="dropdown-item" type="button">Online coaching</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-ui-toggle="dropdown" data-ui-auto-close="outside" aria-expanded="false" aria-label="Departments"> <span class="badge text-bg-secondary">Yoga</span><span class="badge text-bg-secondary">Strength</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">Strength</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"><label class="form-check-label w-100" for="sd-mb-456">Cardio</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" checked><label class="form-check-label w-100" for="sd-mb-457">Yoga</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">HIIT</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">Recovery</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-ui-toggle="dropdown" data-ui-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-ui-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">Strength</h6>
<button class="dropdown-item px-0 small" type="button">Friendly community</button>
<button class="dropdown-item px-0 small" type="button">Powerful journey</button>
<button class="dropdown-item px-0 small" type="button">Calm plan</button>
</div>
<div class="col-sm-4">
<h6 class="dropdown-header px-0">Cardio</h6>
<button class="dropdown-item px-0 small" type="button">Powerful release</button>
<button class="dropdown-item px-0 small" type="button">Practical community</button>
<button class="dropdown-item px-0 small" type="button">Elegant idea</button>
</div>
<div class="col-sm-4">
<h6 class="dropdown-header px-0">Yoga</h6>
<button class="dropdown-item px-0 small" type="button">Flexible idea</button>
<button class="dropdown-item px-0 small" type="button">Focused plan</button>
<button class="dropdown-item px-0 small" type="button">Calm plan</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-ui-toggle="dropdown" data-ui-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-ui-toggle="dropdown" data-ui-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-ui-toggle="dropdown" data-ui-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>Nadia Quinn</span><small class="text-body-secondary">Toronto</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>Ruby Lindqvist</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>Isla Carter</span><small class="text-body-secondary">Seoul</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>Mason Kim</span><small class="text-body-secondary">Lisbon</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>Amara Haddad</span><small class="text-body-secondary">Cape Town</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>Liam Brennan</span><small class="text-body-secondary">Dublin</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-ui-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-ui-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-ui-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>