Select

Overview #

You can create a select component by adding the .form-select class to a <select> element. Multi-select boxes can be created using the multiple attribute. You can read more about this element on MDN: <select> (opens in new tab).

<!-- Select component -->
<div class="mb-3">
  <label for="example-select-1" class="form-label">Area of specialization</label>
  <select class="form-select" id="example-select-1">
    <option selected>Select an option</option>
    <option value="frontend">Front-end</option>
    <option value="backend">Back-end</option>
    <option value="fullstack">Full-stack</option>
  </select>
</div>

<!-- Multi-select box -->
<div>
  <label for="example-select-2" class="form-label">Select languages</label>
  <select class="form-select" id="example-select-2" multiple>
    <option value="python">Python</option>
    <option value="ruby">Ruby</option>
    <option value="javascript">JavaScript</option>
    <option value="typescript">TypeScript</option>
  </select>
</div>

Sizing #

Create small and large select components with the .form-select-sm and .form-select-lg classes respectively. You can also use the size attribute on multi-select boxes.

<!-- Small select -->
<select class="form-select form-select-sm" aria-label="Small select example">...</select>

<!-- Large select -->
<select class="form-select form-select-lg" aria-label="Large select example">...</select>

<!-- Multi-select with size 3 -->
<select class="form-select rounded-end-0" multiple size="3" aria-label="Multi-select size 3">...</select>

Disabled #

Disable a select component by adding the disabled attribute. This will change the appearance of the input, remove pointer events, and prevent focusing.

<!-- Disabled select -->
<label for="example-select-3" class="form-label">Disabled select</label>
<select class="form-select" id="example-select-3" disabled>
  <option value="one">Option one</option>
  <option value="two" selected>Option two</option>
  <option value="three">Option three</option>
</select>