Theme

Select

One choice from a list too long to show at once.

Examples

With and without a value

Venue

Status

Props

`Select`

One choice from a list too long to show at once. Type to jump to an option.

Prop	Type	Default	Description
`label`	`string`	—	The visible label. Every field has one; it names the field for screen readers too. Text, so it can also be the field's aria-label: see `useFallbackName`.
`description?`	`ReactNode`	—	Help shown under the field and read with it.
`errorMessage?`	`ReactNode \| ((validation: ValidationResult) => ReactNode)`	—	Shown when the field is invalid; defaults to the browser's validation message.
`children`	`ReactNode \| ((item: T) => ReactNode)`	—	Option elements, or a function of each item when `items` is given.
`items?`	`Iterable<T>`	—

Also takes 106 props it passes to the underlying React Aria component or element (events, ARIA attributes, state such as isDisabled), documented by React Aria.

`Option`

An option in a Select or ComboBox.

Prop	Type	Default	Description
`children`	`ReactNode`	—
`description?`	`ReactNode`	—	A second line, read as the option's description.

Also takes 98 props it passes to the underlying React Aria component or element (events, ARIA attributes, state such as isDisabled), documented by React Aria.

Keyboard

Key	Does
`Enter` or `Space` or `ArrowDown`	Opens the list
`ArrowUp` or `ArrowDown`	Move through the options
`Type a letter`	Jumps to the option that starts with it
`Enter`	Chooses the focused option
`Escape`	Closes the list without choosing

Accessibility

The label is required and is the field's accessible name; the description and error are linked with aria-describedby.
Invalid fields are marked aria-invalid, and the error is announced when it appears.
The border meets 3:1 against every surface (borderControl), and text 4.5:1, in every theme.
Rendered in a portal at the end of the document, so it is not clipped by an overflow ancestor.
Entering and leaving animations use motion tokens, which are zero under prefers-reduced-motion.