Form

Select typeahead input

Published on

Description

The select typeahead input lets people filter a long list of options by typing, while keeping the behaviour of a native <select>. All options are pre-rendered in the page and no requests are made — typing simply narrows the visible list.

It is built as a progressive enhancement. Without JavaScript the control renders as a plain <select> and works normally; the browser downloads the enhancement only when the field scrolls into view. Once enhanced, the visible input shows the chosen option's label while the underlying <select> keeps its value, so form submissions are unchanged.

Prefer a plain select — or better, radios — when there are only a handful of options. Reach for the typeahead only for long lists (countries, currencies, timezones) where filtering meaningfully reduces effort.

Example

Open in new tab
View HTML markup 
  <form method="POST" novalidate="">
  <div><label for="country">
      <hgroup>
        <h1>Country</h1>
      </hgroup>
    </label> <span id="country-hint">Start typing to filter the list</span>
    <div><select id="country" name="country" is="ds-select-typeahead" data-i18n-no-results="No results found" aria-describedby="country-hint">
        <option label="" value=""></option>
        <option label="Australia" value="AU"></option>
        <option label="Brazil" value="BR"></option>
        <option label="Canada" value="CA"></option>
        <option label="France" value="FR"></option>
        <option label="Germany" value="DE"></option>
        <option label="Japan" value="JP"></option>
        <option label="United Kingdom" value="GB"></option>
        <option label="United States" value="US"></option>
      </select></div>
  </div> <button type="button">Submit</button>
  <p>Need help? <a href="/form/input-select-typeahead" target="_top">View our guidance</a></p>
</form>

Accessibility

  • The enhanced control exposes a combobox with an attached listbox, following the WAI-ARIA authoring practices for autocomplete.
  • Keyboard: type to filter, ArrowDown / ArrowUp to move through results, Enter to confirm, and Escape to dismiss the menu.
  • A polite live region announces the number of available results and the highlighted option to screen reader users.
  • The native <label for> stays associated with the enhanced input, so the field keeps its accessible name.
  • Because the base control is a real <select>, keyboard and assistive technology support is guaranteed even if the enhancement fails to load.

Internationalization

The "no results" message is set with the textNoResults prop, which is forwarded to the web component as data-i18n-no-results. Provide a translated string per locale.

References

Variables

None for input