Select

A native select, restyled. One choice from a list too long for radios.

When to use

When there are more than about seven options and people know what they are looking for: a region, a country, a year.

When not to use

For fewer than seven options, use radios so every option is visible. For very long lists where people type to search, a native datalist is the accessible fallback until a combobox exists.

<div class="ag-field ag-mb-0">
  <label class="ag-label" for="sel-region" data-docs-string="region-label">Region</label>
  <select class="ag-select" id="sel-region" name="region" data-docs-regions>
    <option value="" data-docs-string="region-choose">Choose a region</option>
    <option>Central</option>
    <option>Coastal</option>
    <option>Eastern</option>
    <option>Northern</option>
    <option>Southern</option>
    <option>Western</option>
  </select>
</div>

Accessibility

• It is the native element, so keyboard, screen reader and phone behaviour come from the browser.
• The first option is an instruction with an empty value, so an unanswered select fails validation.
• Do not use a select for navigation. Changing it should never load a page.
• Sort options in a way people expect: alphabetical for places, chronological for years.

Pack fields

regions.label, regions.choose, regions.items.