Select (Listbox)
A custom dropdown component for selecting one option from a list
Related WCAG criteria — click to view details
Code example
Common baseline
Applies to all design systemslistbox and option roles
The dropdown list must have role="listbox" and each item must have role="option".
Connect to its label
The trigger/select must be associated with its label via aria-labelledby.
Full keyboard navigation
Arrow keys must navigate options; Enter/Space must select; Escape must close.
Communicate selected state
The selected option must have aria-selected="true".
Focus management on open/close
Move focus to the listbox when it opens; restore focus to the trigger when closed.
Typeahead search
Pressing a letter key should jump to the first option beginning with that letter.
Home/End key support
Home moves to the first option; End moves to the last option.
Group options with role="group"
Use role="group" with an accessible name to group related options.
Do not implement without semantic roles
A custom select built with only CSS and JS, without ARIA roles, is inaccessible to screen reader users.
Do not auto-select on arrow key press
Navigating through options with arrow keys should not automatically confirm the selection.
Additional checks
FormControl + InputLabel combination is required
Always wrap MUI Select in FormControl with InputLabel. The labelId must match the Select's labelId prop.
Code sample
Implementation notes
- –The labelId on Select and the id on InputLabel must match for screen readers to read the label.
- –Using the native prop renders the browser's default <select>.
- –Disabled options automatically receive aria-disabled.