Select-Only Combobox

A select-only combobox allows users to select a single option from a dropdown list. It can be used whenever users must choose from a known, limited set of predefined values. It does not allow freeform text entry.

Accessibility Features

The role and state of the trigger element and options must be communicated programmatically to screen readers.
Space and Enter expand and collapse the combobox when the trigger element is focused.
Up Arrow and Down Arrow navigate between options, and Space and Enter select one.
Esc collapses the dropdown and returns focus to the trigger.
Tab moves focus away from the dropdown and collapses it automatically.
Home and End move focus to the first and last option.

Select Element

The native <select> element handles keyboard support, screen reader announcements and dropdown behaviour automatically. Using it is recommended when possible. Its styling is limited across browsers however, which is why some may prefer a custom implementation.

Example

Code Snippet

Custom Select-Only

A custom implementation may be necessary when the desired visual design cannot be achieved with the native <select> element. It requires explicit attributes to communicate dropdown semantics:

role="combobox" identifies the trigger element and aria-expanded communicates its expanded or collapsed state.
role="option" identifies an option, and aria-selected communicates its selection state.
aria-activedescendant on the trigger tracks which option currently has focus.
aria-controls points to the element the trigger controls.