Listbox

Listbox is an always visible list to choose one or several options from, like a native select with size.

Labeling

Name the list with aria-labelledby or aria-label. The component does not add a name by itself.
Name a ListboxGroup the same way.

AnnouncementFocus the demo and press a key from the table.

Key	Action
`Tab`	Moves the focus to the list, which makes the selected option, or the first enabled one, active. The list is one tab stop.
`↓↑`	Makes the next or previous enabled option active, skipping disabled ones and stopping at the ends. The focus stays on the list.
`HomeEnd`	Makes the first or last enabled option active.
`Page DownPage Up`	Moves the active option 10 options down or up, stopping at the last or first enabled one.
`p`	Typeahead: a printable character makes the next option whose label starts with the typed text active; characters typed quickly add up. Turned off with `typeahead={false}`.
`EnterSpace`	Selects the active option. With `multiple`, toggles it and keeps the other selected options.

Every row is checked in a real browser: Playwright presses the key in Chromium and checks where the focus and the active item land.

The list is one tab stop. On focus the selected option becomes active, or the first available one.
The focus stays on the list, and options do not take it.

The list renders role='listbox' and aria-activedescendant, and aria-multiselectable with multiple.
Options render role='option' with aria-selected, and aria-disabled when unavailable.
Groups render role='group'.

Listbox does not submit a value in a form. Keep the value in state and send it yourself, or use Select with SelectHiddenSelect.

leaving the list or a group without a name
putting interactive controls inside an option
relying on aria-activedescendant without testing in the screen readers you support