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-full text-start flex justify-between items-center" type="button" data-ui-toggle="dropdown" data-ui-auto-close="outside" aria-expanded="false"><i class="bi bi-geo-alt-fill" aria-hidden="true"></i> Choose a city</button>
  <div class="dropdown-menu w-full p-2">
    <label for="sd-filter-input-440" class="sr-only">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">Austin</button></li>
      <li data-demo-filter-item><button class="dropdown-item" type="button">Seoul</button></li>
      <li data-demo-filter-item><button class="dropdown-item" type="button">Valencia</button></li>
      <li data-demo-filter-item><button class="dropdown-item" type="button">Edinburgh</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">Auckland</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">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-full" for="sd-multi-441">World-class speakers</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-full" for="sd-multi-442">Hands-on workshops</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-full" for="sd-multi-443">Networking lounges</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-full" for="sd-multi-444">Recorded sessions</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-full" for="sd-multi-445">Mobile agenda</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-full" for="sd-multi-446">Certificates</label></div></div></li>
    <li><hr class="dropdown-divider"></li>
    <li class="px-4 small text-muted">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 font-semibold mb-1">Assignee</p>
<div class="dropdown">
  <button class="btn btn-light border dropdown-toggle flex items-center gap-2" type="button" data-ui-toggle="dropdown" aria-expanded="false"> <img src="../assets/img/avatar-12.svg" alt="" width="24" height="24" class="rounded-full">Nora Lindqvist</button>
  <ul class="dropdown-menu">
    <li><button class="dropdown-item flex items-center gap-2" type="button"><img src="../assets/img/avatar-12.svg" alt="" width="28" height="28" class="rounded-full"><span><span class="block">Nora Lindqvist</span><small class="text-muted">Sales Executive</small></span></button></li>
    <li><button class="dropdown-item flex items-center gap-2" type="button"><img src="../assets/img/avatar-12.svg" alt="" width="28" height="28" class="rounded-full"><span><span class="block">Amara Morgan</span><small class="text-muted">Backend Engineer</small></span></button></li>
    <li><button class="dropdown-item flex items-center gap-2" type="button"><img src="../assets/img/avatar-11.svg" alt="" width="28" height="28" class="rounded-full"><span><span class="block">Mateo Delgado</span><small class="text-muted">HR Partner</small></span></button></li>
    <li><button class="dropdown-item flex items-center gap-2" type="button"><img src="../assets/img/avatar-5.svg" alt="" width="28" height="28" class="rounded-full"><span><span class="block">Zoe Quinn</span><small class="text-muted">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-ui-toggle="dropdown" aria-expanded="false"><i class="bi bi-people-fill" aria-hidden="true"></i> Visibility: Team</button>
  <ul class="dropdown-menu" style="max-width: 18rem;">
    <li><button class="dropdown-item flex gap-2 whitespace-normal" type="button"><i class="bi bi-globe" aria-hidden="true"></i><span><strong class="block">Public</strong><small class="text-muted">Anyone with the link can view</small></span></button></li>
    <li><button class="dropdown-item flex gap-2 whitespace-normal active" type="button"><i class="bi bi-people-fill" aria-hidden="true"></i><span><strong class="block">Team</strong><small>Only members of Bloomix Nest</small></span></button></li>
    <li><button class="dropdown-item flex gap-2 whitespace-normal" type="button"><i class="bi bi-lock-fill" aria-hidden="true"></i><span><strong class="block">Private</strong><small class="text-muted">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

releasecase studydesign

Suggested:

<label for="sd-tags-pre-448" class="form-label">Skills</label>
<div class="form-control flex flex-wrap gap-1 items-center" data-demo-tags>
  <span class="badge text-bg-primary inline-flex items-center gap-1">release
  <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 inline-flex 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><span class="badge text-bg-primary inline-flex 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 grow bg-transparent" id="sd-tags-pre-448" placeholder="Add skill" style="outline: none; min-width: 6rem;">
</div>
<div class="flex flex-wrap gap-1 mt-2">
  <span class="small text-muted me-1">Suggested:</span>
  <button type="button" class="btn btn-sm btn-light border rounded-full">+ how-to</button>
  <button type="button" class="btn btn-sm btn-light border rounded-full">+ guide</button>
  <button type="button" class="btn btn-sm btn-light border rounded-full">+ tutorial</button>
  <button type="button" class="btn btn-sm btn-light border rounded-full">+ update</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 ticket</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 flex gap-2 items-center" data-demo-filter-item><input class="form-check-input m-0" type="radio" name="sd-lg-list-450-pick"><span class="grow">Full access pass</span><span class="small text-muted">$534.00</span></label>
  <label class="list-group-item flex gap-2 items-center" data-demo-filter-item><input class="form-check-input m-0" type="radio" name="sd-lg-list-450-pick"><span class="grow">Panel day ticket</span><span class="small text-muted">$183.00</span></label>
  <label class="list-group-item flex gap-2 items-center" data-demo-filter-item><input class="form-check-input m-0" type="radio" name="sd-lg-list-450-pick"><span class="grow">Recording pass</span><span class="small text-muted">$53.00</span></label>
  <label class="list-group-item flex gap-2 items-center" data-demo-filter-item><input class="form-check-input m-0" type="radio" name="sd-lg-list-450-pick"><span class="grow">Early bird pass</span><span class="small text-muted">$322.99</span></label>
  <label class="list-group-item flex gap-2 items-center" data-demo-filter-item><input class="form-check-input m-0" type="radio" name="sd-lg-list-450-pick"><span class="grow">Speaker dinner</span><span class="small text-muted">$130.99</span></label>
  <label class="list-group-item flex gap-2 items-center" data-demo-filter-item><input class="form-check-input m-0" type="radio" name="sd-lg-list-450-pick"><span class="grow">Student pass</span><span class="small text-muted">$136.00</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="sr-only">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 flex items-center gap-2"><span class="badge text-bg-light border">PT</span><span class="grow">Portugal</span><small class="text-muted">+351</small></button></li>
      <li data-demo-filter-item><button type="button" class="dropdown-item flex items-center gap-2"><span class="badge text-bg-light border">CA</span><span class="grow">Canada</span><small class="text-muted">+1</small></button></li>
      <li data-demo-filter-item><button type="button" class="dropdown-item flex items-center gap-2"><span class="badge text-bg-light border">AU</span><span class="grow">Australia</span><small class="text-muted">+61</small></button></li>
      <li data-demo-filter-item><button type="button" class="dropdown-item flex items-center gap-2"><span class="badge text-bg-light border">DK</span><span class="grow">Denmark</span><small class="text-muted">+45</small></button></li>
      <li data-demo-filter-item><button type="button" class="dropdown-item flex items-center gap-2"><span class="badge text-bg-light border">JP</span><span class="grow">Japan</span><small class="text-muted">+81</small></button></li>
      <li data-demo-filter-item><button type="button" class="dropdown-item flex items-center gap-2"><span class="badge text-bg-light border">NO</span><span class="grow">Norway</span><small class="text-muted">+47</small></button></li>
      <li data-demo-filter-item><button type="button" class="dropdown-item flex items-center gap-2"><span class="badge text-bg-light border">IE</span><span class="grow">Ireland</span><small class="text-muted">+353</small></button></li>
    </ul>
  </div>
  <input type="tel" class="form-control" id="sd-phone-453" placeholder="555 132 3488">
</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">Sponsorship</button></li>
    <li><button class="dropdown-item" type="button">Speaker management</button></li>
    <li><button class="dropdown-item" type="button">Live streaming</button></li>
    <li><button class="dropdown-item" type="button">Networking app</button></li>
    <li><button class="dropdown-item" type="button">Live streaming</button></li>
  </ul>
</div>

13Multi-select with chips

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

<p class="small font-semibold mb-1">Departments</p>
<div class="dropdown">
  <button class="form-select text-start 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">Panel</span><span class="badge text-bg-secondary">Webinar</span></button>
  <ul class="dropdown-menu w-full">
    <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-full" for="sd-mb-455">Keynote</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-full" for="sd-mb-456">Workshop</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-full" for="sd-mb-457">Panel</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-full" for="sd-mb-458">Meetup</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" checked><label class="form-check-label w-full" for="sd-mb-459">Webinar</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-full" 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-full" 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-full" 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-full" 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-fill" aria-hidden="true"></i> Browse categories</button>
  <div class="dropdown-menu p-4" style="width: min(36rem, 92vw);">
    <div class="row g-3">
      <div class="col-sm-4">
        <h6 class="dropdown-header px-0">Keynote</h6>
        <button class="dropdown-item px-0 small" type="button">Elegant dashboard</button>
        <button class="dropdown-item px-0 small" type="button">Flexible story</button>
        <button class="dropdown-item px-0 small" type="button">Bright launch</button>
      </div>
      <div class="col-sm-4">
        <h6 class="dropdown-header px-0">Workshop</h6>
        <button class="dropdown-item px-0 small" type="button">Bright routine</button>
        <button class="dropdown-item px-0 small" type="button">Friendly process</button>
        <button class="dropdown-item px-0 small" type="button">Friendly dashboard</button>
      </div>
      <div class="col-sm-4">
        <h6 class="dropdown-header px-0">Panel</h6>
        <button class="dropdown-item px-0 small" type="button">Powerful process</button>
        <button class="dropdown-item px-0 small" type="button">Smart goal</button>
        <button class="dropdown-item px-0 small" type="button">Simple 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-ui-toggle="dropdown" data-ui-auto-close="outside" aria-expanded="false"><i class="bi bi-funnel-fill" 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-4">
      <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="flex justify-between border-t p-2">
      <button type="button" class="btn btn-sm btn-link no-underline">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-lg shadow-sm overflow-hidden" style="max-width: 30rem;">
  <div class="flex items-center gap-2 px-4 border-b">
    <i class="bi bi-command" aria-hidden="true"></i> 
    <label for="sd-cmd-469" class="sr-only">Search commands</label>
    <input type="search" class="form-control border-0 shadow-none py-4" 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 flex items-center gap-2" data-demo-filter-item><i class="bi bi-file-earmark-plus-fill" aria-hidden="true"></i><span class="grow">New document</span><kbd>Ctrl N</kbd></button>
    <button type="button" class="list-group-item list-group-item-action flex items-center gap-2" data-demo-filter-item><i class="bi bi-person-plus-fill" aria-hidden="true"></i><span class="grow">Invite teammate</span><kbd>Ctrl I</kbd></button>
    <button type="button" class="list-group-item list-group-item-action flex items-center gap-2" data-demo-filter-item><i class="bi bi-search" aria-hidden="true"></i><span class="grow">Search everywhere</span><kbd>Ctrl K</kbd></button>
    <button type="button" class="list-group-item list-group-item-action flex items-center gap-2" data-demo-filter-item><i class="bi bi-gear-fill" aria-hidden="true"></i><span class="grow">Open settings</span><kbd>Ctrl ,</kbd></button>
    <button type="button" class="list-group-item list-group-item-action flex items-center gap-2" data-demo-filter-item><i class="bi bi-box-arrow-right" aria-hidden="true"></i><span class="grow">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-fill" aria-hidden="true"></i> Labels</button>
  <div class="dropdown-menu p-0" style="min-width: 15rem;">
    <div class="p-2 border-b">
      <label for="sd-label-471" class="sr-only">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-full flex 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-full flex 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-full flex 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-full flex 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-full flex 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-full flex items-center gap-2" for="sd-label-opt-478"><span class="tl-label-dot bg-primary"></span>case study</label></div></div></li>
    </ul>
    <div class="border-t p-2">
      <button type="button" class="btn btn-sm btn-link no-underline 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-fill" aria-hidden="true"></i> Invite attendees</button>
  <div class="dropdown-menu p-0" style="min-width: 17rem;">
    <div class="p-2 border-b">
      <label for="sd-sm-filter-479" class="sr-only">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-4 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 font-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-full flex justify-between gap-4" for="sd-sm-opt-483"><span>Ella Fischer</span><small class="text-muted">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-full flex justify-between gap-4" for="sd-sm-opt-484"><span>Chloe Patel</span><small class="text-muted">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-485"><label class="form-check-label w-full flex justify-between gap-4" for="sd-sm-opt-485"><span>Luna Whitaker</span><small class="text-muted">Singapore</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-full flex justify-between gap-4" for="sd-sm-opt-486"><span>Ava Rossi</span><small class="text-muted">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-487"><label class="form-check-label w-full flex justify-between gap-4" for="sd-sm-opt-487"><span>Elena Varga</span><small class="text-muted">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-full flex justify-between gap-4" for="sd-sm-opt-488"><span>Sofia Mensah</span><small class="text-muted">Porto</small></label></div></div></li>
    </ul>
    <div class="border-t 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="flex flex-wrap gap-2 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>