Theme
Combo box
A text input that filters a list of options as the reader types.
Examples
Props
ComboBox
A text input that filters a list of options as the reader types.
| 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) | — | |
placeholder? | string | — |
Also takes 111 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 |
|---|---|
| ArrowDown | Opens the list |
| ArrowUp or ArrowDown | Move through the options |
| Enter | Chooses the focused option |
| Escape | Closes the list, then clears the input |
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.