Select Dropdowns

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.

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">Prague</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">Denver</button></li>
      <li data-demo-filter-item><button class="dropdown-item" type="button">Singapore</button></li>
      <li data-demo-filter-item><button class="dropdown-item" type="button">Montreal</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>
      <li data-demo-filter-item><button class="dropdown-item" type="button">Kyoto</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"><label class="form-check-label w-100" for="sd-multi-441">Same-day appointments</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" checked><label class="form-check-label w-100" for="sd-multi-442">Certified specialists</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 results</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">Insurance friendly</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">Family 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-446" checked><label class="form-check-label w-100" for="sd-multi-446">Reminders</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-1.svg" alt="" width="24" height="24" class="rounded-circle">Mason Nguyen</button>
  <ul class="dropdown-menu">
    <li><button class="dropdown-item d-flex align-items-center gap-2" type="button"><img src="../assets/img/avatar-1.svg" alt="" width="28" height="28" class="rounded-circle"><span><span class="d-block">Mason Nguyen</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-6.svg" alt="" width="28" height="28" class="rounded-circle"><span><span class="d-block">Lea Carter</span><small class="text-body-secondary">Project Manager</small></span></button></li>
    <li><button class="dropdown-item d-flex align-items-center gap-2" type="button"><img src="../assets/img/avatar-4.svg" alt="" width="28" height="28" class="rounded-circle"><span><span class="d-block">Tariq Novak</span><small class="text-body-secondary">Sales Executive</small></span></button></li>
    <li><button class="dropdown-item d-flex align-items-center gap-2" type="button"><img src="../assets/img/avatar-4.svg" alt="" width="28" height="28" class="rounded-circle"><span><span class="d-block">Noah Lindqvist</span><small class="text-body-secondary">Project 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-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 Junoly Labs</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.

8Tags with suggestions

Existing chips inside the field and suggested tags below it.

Skills

newsproductinsights

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">news
  <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">product
  <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">insights
  <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">+ guide</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">+ guide</button>
  <button type="button" class="btn btn-sm btn-light border rounded-pill">+ guide</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 service</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">Vaccination</span><span class="small text-body-secondary">$35.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">Video consult</span><span class="small text-body-secondary">$42.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">Physio session</span><span class="small text-body-secondary">$67.99</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">Sports injury clinic</span><span class="small text-body-secondary">$110.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">Heart screening</span><span class="small text-body-secondary">$205.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">Braces consultation</span><span class="small text-body-secondary">Free</span></label>
</div>

10Country code picker

A searchable dropdown of dialling codes attached to a phone field.

Phone number

<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 749 6142">
</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.

Service

<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">Lab tests</button></li>
    <li><button class="dropdown-item" type="button">Telehealth</button></li>
    <li><button class="dropdown-item" type="button">Health check-ups</button></li>
    <li><button class="dropdown-item" type="button">Health check-ups</button></li>
    <li><button class="dropdown-item" type="button">General practice</button></li>
  </ul>
</div>

13Multi-select with chips

The toggle shows the chosen options as badges, the menu holds the checkboxes.

<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">Dental</span><span class="badge text-bg-secondary">Orthopedics</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"><label class="form-check-label w-100" for="sd-mb-455">Cardiology</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">Dental</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">Pediatrics</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" checked><label class="form-check-label w-100" for="sd-mb-458">Orthopedics</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">Dermatology</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">Cardiology</h6>
        <button class="dropdown-item px-0 small" type="button">Reliable routine</button>
        <button class="dropdown-item px-0 small" type="button">Bright experience</button>
        <button class="dropdown-item px-0 small" type="button">Bright journey</button>
      </div>
      <div class="col-sm-4">
        <h6 class="dropdown-header px-0">Dental</h6>
        <button class="dropdown-item px-0 small" type="button">Honest dashboard</button>
        <button class="dropdown-item px-0 small" type="button">Calm project</button>
        <button class="dropdown-item px-0 small" type="button">Flexible update</button>
      </div>
      <div class="col-sm-4">
        <h6 class="dropdown-header px-0">Pediatrics</h6>
        <button class="dropdown-item px-0 small" type="button">Bright release</button>
        <button class="dropdown-item px-0 small" type="button">Powerful dashboard</button>
        <button class="dropdown-item px-0 small" type="button">Powerful 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>guide</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>Zoe Kim</span><small class="text-body-secondary">Valencia</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>Omar Tanaka</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-485"><label class="form-check-label w-100 d-flex justify-content-between gap-3" for="sd-sm-opt-485"><span>Theo Kowalski</span><small class="text-body-secondary">Valencia</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>Freya Whitaker</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-487"><label class="form-check-label w-100 d-flex justify-content-between gap-3" for="sd-sm-opt-487"><span>Kai Fischer</span><small class="text-body-secondary">Austin</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 Brennan</span><small class="text-body-secondary">Barcelona</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>