Select controls

  1. Forms
  2. Form Elements
  3. Select controls

Standard dropdown

<select class="form-select">
  <option selected>Choose status</option>
  <option>Planning</option>
  <option>In progress</option>
  <option>On hold</option>
  <option>Complete</option>
</select>

Disabled state

Unavailable until an owner is selected. 
<select class="form-select" disabled>
  <option selected>Choose an owner first</option>
</select>

Pill-shaped dropdown

<select class="form-select rounded-pill">
  <option selected>Normal</option>
  <option>Low</option>
  <option>High</option>
  <option>Urgent</option>
</select>

Multi-option list

Use Ctrl or Command to select more than one option. 
<select class="form-select" multiple size="4">
  <option selected>Design</option>
  <option>Product</option>
  <option>Engineering</option>
  <option>Customer success</option>
</select>

Compact, default & large 

<select class="form-select form-select-sm">...</select>
<select class="form-select">...</select>
<select class="form-select form-select-lg">...</select>

Searchable single choice

<select class="form-control" data-trigger id="choices-single-default">
  <option value="">Choose a workflow</option>
  <option value="Choice 1">Standard delivery</option>
  <option value="Choice 2">Product launch</option>
</select>

Grouped single choice

<select class="form-control" data-trigger id="choices-single-groups">
  <optgroup label="Internal">...</optgroup>
  <optgroup label="Customer work">...</optgroup>
</select>

Removable multi-choice tags

Choose multiple teams and remove tags individually. 
<select class="form-control" data-trigger id="choices-multiple-default" multiple>
  <option value="Choice 1">Design</option>
  <option value="Choice 2">Product</option>
  <option value="Choice 3">Engineering</option>
</select>

Preselected workstream tags

<select class="form-control" id="choices-multiple-remove-button" multiple>
  <option value="Choice 1" selected>Research</option>
  <option value="Choice 2">Design system</option>
  <option value="Choice 3">Frontend delivery</option>
</select>

Grouped location tags

<select class="form-control" id="choices-multiple-groups" multiple>
  <optgroup label="North America">...</optgroup>
  <optgroup label="Europe">...</optgroup>
  <optgroup label="Asia Pacific">...</optgroup>
</select>

Email address tags

Enter valid email addresses as tags. 
<input class="form-control" id="choices-text-email-filter"
       type="text" placeholder="name@example.com">

Preset label tags

<input class="form-control" id="choices-text-preset-values"
       type="text" value="Planning">

Unique-value tags

Duplicate entries are ignored.
<input class="form-control" id="choices-text-unique-values"
       type="text" value="Kickoff, Prototype">

Search-free single choice

<select class="form-control" id="choices-single-no-search">
  <option value="0">Private to project team</option>
</select>