Français

<select>

Offering a choice from a closed list

— 1 min read

  • HTML
  • accessibility
  • semantics
  • forms

<select> + <option> + <optgroup> — The dropdown list

The <select> element creates a dropdown list. Each choice is an <option>. Choices can be grouped with <optgroup> and its label attribute.

When to use it

You want to offer a choice from a long list of options: country, product category, time zone. For 2 to 4 choices, radio buttons in a <fieldset> are often more accessible.

What you gain

Accessibility: screen readers announce the number of options and groups. The keyboard lets users navigate the list, type the first letters to jump to an option, and select without a mouse.

Code example

<label for="country">Country:</label>
<select id="country" name="country">
  <optgroup label="Europe">
    <option value="fr">France</option>
    <option value="de">Germany</option>
    <option value="es">Spain</option>
  </optgroup>
  <optgroup label="North America">
    <option value="us">United States</option>
    <option value="ca">Canada</option>
  </optgroup>
</select>

Further reading