Select

Role and semantics

Select is built on Base UI Select and follows the APG select-only combobox pattern. The trigger has the combobox role and is named by the Field label. The list has the listbox role and the options the option role; the chosen option carries aria-selected, a disabled option aria-disabled.

Keyboard

Key	Behaviour
Enter, Space, down arrow	Open the list.
Up and down arrow	Move the highlight between options.
Letter keys	Move to the option whose label starts with that letter.
Enter, Space (list open)	Choose the highlighted option and close the list.
Escape	Close the list without choosing; focus returns to the trigger.
Tab	Close the list and move focus to the next element.

Focus

The trigger shows a 2 px color-focus-ring outline 2 px outside it with focus-visible. While the list is open, focus is in the list; the highlighted option takes the color-surface-selected background. When the list closes, focus returns to the trigger.

Screen reader output

Example	Output
Empty trigger	“Field label, combo box, Choose, collapsed”
List open	“First option, 1 of 3”
Disabled option	“Third option, dimmed” or “unavailable”

Contrast

The trigger border has 3:1 contrast; text and option labels have 4.5:1. The chosen option is shown by a check mark as well as by colour.

WCAG 2.2

Criterion	How Select meets it	What the product team does
1.3.1 Info and relationships	Field label and aria-describedby.	Give every field a label.
1.4.1 Use of colour	The chosen option carries a check mark.	Do not make icons the only carrier of meaning.
2.1.1 Keyboard	Arrows, letter keys, Enter, Escape.	Keep the list short.
4.1.2 Name, role, value	combobox, listbox, option, aria-selected.	Keep option labels unique.