<select>

The <select> element creates a dropdown list of <option> items. Use the multiple attribute to allow multi-selection and size to show multiple rows. Always pair with a <label> to provide an accessible name.

Basic Usage

<select>
  <option selected disabled value="">
  Select your favorite cuisine...
  </option>
  <option>Italian</option>
  <option>Japanese</option>
  <option>Indian</option>
  <option>Thai</option>
  <option>French</option>
</select>

Select Multiple

<select aria-label="Select your favorite snacks..." multiple="multiple" size="6">
  <option disabled>
    Select your favorite snacks...
  </option>
  <option>Cheese</option>
  <option selected>Fruits</option>
  <option selected>Nuts</option>
  <option>Chocolate</option>
  <option>Crackers</option>
</select>

With Optgroup

<select aria-label="Select your country...">
  <optgroup label="North America">
    <option>United States</option>
    <option>Canada</option>
  </optgroup>
  <optgroup label="Europe">
    <option>United Kingdom</option>
    <option>France</option>
  </optgroup>
</select>

With Label

Always pair selects with a <label> or aria-label so screen readers can identify the field.

<label for="select-dish">Dish</label>
<select name="dish" id="select-dish">
  <option selected disabled value="">
  Select your favorite cuisine...
  </option>
  <option>Italian</option>
  <option>Japanese</option>
  <option>Indian</option>
  <option>Thai</option>
  <option>French</option>
</select>

With Helper Text

Helper text provides additional context about the select, such as instructions or character limits.

Use <small> element associated with a form control via aria-describedby to associate the helper text with the input for screen readers.

<label for="select-dish">Dish</label>
<select name="dish" id="select-dish" aria-describedby="select-dish-helper">
  <option selected disabled value="">
  Select your favorite cuisine...
  </option>
  <option>Italian</option>
  <option>Japanese</option>
  <option>Indian</option>
  <option>Thai</option>
  <option>French</option>
</select>
<small id="select-dish-helper">Subject to availability.</small>

Validation States

Just like any form elements, validation states are provided with aria-invalid. See more at [aria-invalid]

Note: The <small> element automatically inherits the validation state colors.

<label for="select-first-dish">First-dish</label>
<select name="first-dish" aria-invalid="false" id="select-first-dish" aria-describedby="select-first-dish-helper">
  <option selected disabled value="">
  Select your favorite cuisine...
  </option>
  <option>Italian</option>
  <option>Japanese</option>
  <option>Indian</option>
  <option>Thai</option>
  <option>French</option>
</select>
<small id="select-first-dish-helper">Looks good!</small>

<label for="select-second-dish">Second-dish</label>
<select name="second-dish" aria-invalid="true" id="select-second-dish" aria-describedby="select-second-dish-helper">
  <option selected disabled value="">
  Select your favorite cuisine...
  </option>
  <option>Italian</option>
  <option>Japanese</option>
  <option>Indian</option>
  <option>Thai</option>
  <option>French</option>
</select>
<small id="select-second-dish-helper">Sorry this dish is not available.</small>