Select
Native select menus keep forms accessible and work on every device. Here you will find sizes, multiple and grouped options, selects inside input groups and filter bars, and dark surfaces.
1Basic select
A labelled native select with an empty first option prompting a choice.
<label for="country-46" class="form-label">Country</label>
<select class="form-select" id="country-46" autocomplete="country-name">
<option value="" selected>Choose a country</option>
<option>Ireland</option>
<option>Denmark</option>
<option>Japan</option>
<option>Portugal</option>
<option>Spain</option>
<option>United States</option>
</select>2Sizes
Large, default and small selects matching the input sizes.
<div class="vstack gap-2">
<label for="sort-lg-47" class="visually-hidden">Sort large</label>
<select class="form-select form-select-lg" id="sort-lg-47">
<option selected>Newest first</option>
<option>Price: low to high</option>
<option>Price: high to low</option>
<option>Best rated</option>
</select>
<label for="sort-md-48" class="visually-hidden">Sort default</label>
<select class="form-select" id="sort-md-48">
<option selected>Newest first</option>
<option>Price: low to high</option>
<option>Price: high to low</option>
<option>Best rated</option>
</select>
<label for="sort-sm-49" class="visually-hidden">Sort small</label>
<select class="form-select form-select-sm" id="sort-sm-49">
<option selected>Newest first</option>
<option>Price: low to high</option>
<option>Price: high to low</option>
<option>Best rated</option>
</select>
</div>3Multiple selection
The multiple attribute allows several options; hold Ctrl or Cmd to pick more than one.
Hold Ctrl (Cmd on Mac) to choose several.
<label for="interests-50" class="form-label">Topics you follow</label>
<select class="form-select" id="interests-50" multiple aria-describedby="interests-help-51">
<option>Design</option>
<option selected>Development</option>
<option>Marketing</option>
<option>Product news</option>
<option>Case studies</option>
<option>Events</option>
</select>
<div id="interests-help-51" class="form-text">
Hold Ctrl (Cmd on Mac) to choose several.
</div>4Visible rows
The size attribute shows several options as a scrolling list instead of a closed menu.
<label for="team-member-52" class="form-label">Assign to</label>
<select class="form-select" id="team-member-52" size="4">
<option>Elena Nguyen - QA Engineer</option>
<option>Zoe Okafor - Backend Engineer</option>
<option>Lea Ashford - Product Designer</option>
<option>Liam Hughes - Finance Lead</option>
<option>Omar Lindqvist - Product Designer</option>
<option>Diego Ibrahim - Sales Executive</option>
<option>Hana Alvarez - Support Specialist</option>
</select>5Disabled select and options
Disable a whole select, or only the options that are not available.
<div class="row g-3">
<div class="col-sm-6">
<label for="billing-cycle-53" class="form-label">Billing cycle</label>
<select class="form-select" id="billing-cycle-53">
<option>Monthly</option>
<option selected>Yearly (save 20%)</option>
<option disabled>Lifetime - sold out</option>
</select>
</div>
<div class="col-sm-6">
<label for="region-locked-54" class="form-label">Data region</label>
<select class="form-select" id="region-locked-54" disabled>
<option>Portugal (locked by admin)</option>
</select>
</div>
</div>6Option groups
optgroup splits long lists into labelled sections such as delivery speeds.
<label for="shipping-method-55" class="form-label">Shipping method</label>
<select class="form-select" id="shipping-method-55">
<optgroup label="Standard">
<option>Ground - 5-7 days ($5.68)</option>
<option>Economy - 7-10 days (Free)</option>
</optgroup>
<optgroup label="Express">
<option>Two-day ($13.27)</option>
<option>Next day ($30.95)</option>
</optgroup>
<optgroup label="Pick up">
<option>Collect in Melbourne store</option>
</optgroup>
</select>7Select in an input group
Attach a label to the select so toolbars stay compact.
<div class="input-group" style="max-width: 22rem;">
<label class="input-group-text" for="sort-by-56"><i class="bi bi-sort-down" aria-hidden="true"></i> Sort by</label>
<select class="form-select" id="sort-by-56">
<option selected>Most relevant</option>
<option>Most recent</option>
<option>Most popular</option>
<option>Alphabetical</option>
</select>
</div>8Date of birth selects
Three small selects for day, month and year inside a fieldset with one legend.
<fieldset>
<legend class="col-form-label pt-0">Date of birth</legend>
<div class="row g-2">
<div class="col-3">
<label for="dob-day-57" class="visually-hidden">Day</label>
<select class="form-select" id="dob-day-57">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
</div>
<div class="col-5">
<label for="dob-month-58" class="visually-hidden">Month</label>
<select class="form-select" id="dob-month-58">
<option>January</option>
<option>February</option>
<option>March</option>
<option>April</option>
<option>May</option>
<option>June</option>
<option>July</option>
<option>August</option>
<option selected>September</option>
<option>October</option>
<option>November</option>
<option>December</option>
</select>
</div>
<div class="col-4">
<label for="dob-year-59" class="visually-hidden">Year</label>
<select class="form-select" id="dob-year-59">
<option>2008</option>
<option>2007</option>
<option>2006</option>
<option>2005</option>
<option>2004</option>
<option>2003</option>
<option>2002</option>
<option>2001</option>
<option>2000</option>
<option>1999</option>
<option>1998</option>
<option>1997</option>
<option>1996</option>
<option>1995</option>
<option>1994</option>
<option>1993</option>
<option>1992</option>
<option>1991</option>
<option>1990</option>
<option>1989</option>
<option>1988</option>
<option>1987</option>
<option>1986</option>
<option>1985</option>
<option>1984</option>
<option>1983</option>
<option>1982</option>
<option>1981</option>
<option>1980</option>
<option>1979</option>
<option>1978</option>
<option>1977</option>
<option>1976</option>
<option>1975</option>
<option>1974</option>
<option>1973</option>
<option>1972</option>
<option>1971</option>
<option>1970</option>
<option>1969</option>
<option>1968</option>
<option>1967</option>
<option>1966</option>
<option>1965</option>
<option>1964</option>
<option>1963</option>
<option>1962</option>
<option>1961</option>
<option>1960</option>
<option>1959</option>
<option>1958</option>
<option>1957</option>
<option>1956</option>
<option>1955</option>
<option>1954</option>
<option>1953</option>
<option>1952</option>
<option>1951</option>
<option>1950</option>
</select>
</div>
</div>
</fieldset>9Filter bar
Small selects lined up as a filter bar above a list or table.
Filters
<div class="d-flex flex-wrap gap-2 align-items-center p-2 border rounded-3 bg-body-tertiary">
<span class="small fw-semibold me-1"><i class="bi bi-funnel" aria-hidden="true"></i> Filters</span>
<label for="f-category-60" class="visually-hidden">Category</label>
<select class="form-select form-select-sm w-auto" id="f-category-60">
<option selected>All categories</option>
<option>Branding</option>
<option>Web</option>
<option>Motion</option>
<option>Print</option>
<option>Social</option>
</select>
<label for="f-status-61" class="visually-hidden">Status</label>
<select class="form-select form-select-sm w-auto" id="f-status-61">
<option>Any status</option>
<option>Active</option>
<option>Pending</option>
<option>Archived</option>
</select>
<label for="f-owner-62" class="visually-hidden">Owner</label>
<select class="form-select form-select-sm w-auto" id="f-owner-62">
<option>Anyone</option>
<option>Me</option>
<option>Mateo Moreau</option>
</select>
<button type="button" class="btn btn-sm btn-link ms-auto">Reset</button>
</div>10Selects with icons
Leading icons in input-group-text make preference selects easy to scan.
<div class="row g-3">
<div class="col-sm-6">
<label for="language-63" class="form-label">Language</label>
<div class="input-group">
<span class="input-group-text"><i class="bi bi-translate" aria-hidden="true"></i></span>
<select class="form-select" id="language-63">
<option>English (US)</option>
<option>English (UK)</option>
<option>Deutsch</option>
<option>Español</option>
</select>
</div>
</div>
<div class="col-sm-6">
<label for="currency-64" class="form-label">Currency</label>
<div class="input-group">
<span class="input-group-text"><i class="bi bi-currency-exchange" aria-hidden="true"></i></span>
<select class="form-select" id="currency-64">
<option>USD - US dollar</option>
<option>EUR - Euro</option>
<option>GBP - Pound sterling</option>
<option>JPY - Japanese yen</option>
</select>
</div>
</div>
</div>11Floating label select
The label sits inside the select, saving vertical space in compact forms.
<div class="form-floating">
<select class="form-select" id="floating-dept-65" aria-label="Department">
<option selected>Choose...</option>
<option>Engineering</option>
<option>Engineering</option>
<option>Research</option>
<option>Design</option>
<option>Marketing</option>
</select>
<label for="floating-dept-65">Department</label>
</div>12Placeholder option
A disabled, hidden first option acts as a placeholder that cannot be chosen again.
We route your message to the right team.
<label for="topic-66" class="form-label">What is your enquiry about?</label>
<select class="form-select" id="topic-66" required aria-describedby="topic-help-67">
<option value="" selected disabled hidden>Select a topic</option>
<option>UX research</option>
<option>UX research</option>
<option>Billing question</option>
<option>Something else</option>
</select>
<div id="topic-help-67" class="form-text">
We route your message to the right team.
</div>13Country and region pair
Two related selects side by side for addresses and tax settings.
<div class="row g-3">
<div class="col-md-6">
<label for="ship-country-68" class="form-label">Country</label>
<select class="form-select" id="ship-country-68">
<option selected>Canada</option>
<option>United States</option>
<option>Australia</option>
</select>
</div>
<div class="col-md-6">
<label for="ship-region-69" class="form-label">Province</label>
<select class="form-select" id="ship-region-69">
<option>Alberta</option>
<option>British Columbia</option>
<option selected>Ontario</option>
<option>Quebec</option>
<option>Nova Scotia</option>
</select>
</div>
</div>14Bulk action bar
A select with an apply button that acts on the rows chosen in a table.
3 items selected
<div class="d-flex flex-wrap align-items-center gap-2 p-2 rounded-3 bg-primary-subtle">
<span class="fw-semibold small me-2">3 items selected</span>
<label for="bulk-action-70" class="visually-hidden">Bulk action</label>
<select class="form-select form-select-sm w-auto" id="bulk-action-70">
<option selected>Bulk actions</option>
<option>Mark as draft</option>
<option>Move to archive</option>
<option>Export as CSV</option>
<option>Delete</option>
</select>
<button type="button" class="btn btn-sm btn-primary">Apply</button>
</div>15Rows per page
An inline select used next to pagination text at the foot of a table.
<div class="d-flex flex-wrap justify-content-between align-items-center gap-2 small">
<div class="d-flex align-items-center gap-2">
<label for="rows-per-page-71" class="text-nowrap">Rows per page</label>
<select class="form-select form-select-sm w-auto" id="rows-per-page-71">
<option>10</option>
<option selected>25</option>
<option>50</option>
<option>100</option>
</select>
</div>
<span class="text-body-secondary">1-25 of 375</span>
</div>16Rounded select
rounded-pill gives selects the same soft shape as pill buttons and search fields.
<div class="d-flex flex-wrap gap-2 align-items-center">
<label for="pill-sort-72" class="small text-body-secondary">Showing</label>
<select class="form-select rounded-pill w-auto px-4" id="pill-sort-72">
<option>All projects</option>
<option>Featured</option>
<option>On sale</option>
<option>New arrivals</option>
</select>
</div>17Settings card
A select within a settings card with title, description and save action.
Time zone
Reminders and reports use this zone.
<div class="card">
<div class="card-body">
<h3 class="h6 mb-1">Time zone</h3>
<p class="small text-body-secondary">Reminders and reports use this zone.</p>
<label for="timezone-73" class="visually-hidden">Time zone</label>
<select class="form-select" id="timezone-73">
<option>(UTC-08:00) Vancouver</option>
<option>(UTC-05:00) Toronto</option>
<option selected>(UTC+00:00) Lisbon</option>
<option>(UTC+01:00) Copenhagen</option>
<option>(UTC+09:00) Seoul</option>
<option>(UTC+12:00) Auckland</option>
</select>
</div>
<div class="card-footer text-end">
<button type="button" class="btn btn-sm btn-primary">Save</button>
</div>
</div>18Quantity in a cart line
A compact quantity select inside a shopping cart row.
Logo refresh
Branding
$2,750
<div class="d-flex align-items-center gap-3 border rounded-3 p-2">
<img src="../assets/img/product-7.svg" alt="Logo refresh" width="64" height="64" class="rounded">
<div class="flex-grow-1 min-w-0">
<div class="fw-semibold text-truncate">
Logo refresh
</div>
<div class="small text-body-secondary">
Branding
</div>
</div>
<label for="qty-74" class="visually-hidden">Quantity</label>
<select class="form-select form-select-sm w-auto" id="qty-74">
<option>1</option>
<option selected>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<div class="fw-semibold text-nowrap">
$2,750
</div>
</div>19Validation states
Selects support the same is-valid and is-invalid states as inputs.
Great choice.
Please choose the number of seats.
<div class="row g-3">
<div class="col-sm-6">
<label for="plan-ok-75" class="form-label">Plan</label>
<select class="form-select is-valid" id="plan-ok-75">
<option>Design retainer</option>
</select>
<div class="valid-feedback">
Great choice.
</div>
</div>
<div class="col-sm-6">
<label for="seat-bad-76" class="form-label">Seats</label>
<select class="form-select is-invalid" id="seat-bad-76">
<option selected value="">Select seats</option>
<option>5</option>
<option>10</option>
</select>
<div class="invalid-feedback">
Please choose the number of seats.
</div>
</div>
</div>20Dark theme select
Inside a dark section the select switches its arrow and colours automatically.
<div class="p-3 rounded-3 bg-dark" data-ui-theme="dark">
<label for="dark-sort-77" class="form-label text-white">Report period</label>
<select class="form-select" id="dark-sort-77">
<option>Last 7 days</option>
<option selected>Last 30 days</option>
<option>This quarter</option>
<option>This year</option>
</select>
</div>