Combobox

An input that filters a list of options while you type and lets you pick one. Use it when the list is long enough that a Select is hard to scan.

Pass the options and name the field with aria-label, or with a visible label.

Use initialValue to start with a selection. An option with disabled cannot be picked.

Change what shows when nothing matches with emptyText.

A disabled Combobox cannot be focused.

Attribute	Description	Type	Accepted values	Default
options	the options to choose from	`ComboboxOption[]`	ComboboxOption	-
value	selected value, to control the component	`string` / `null`	-	-
initialValue	selected value at the start	`string` / `null`	-	`null`
onChange	called with the chosen value, or `null` when it is cleared	`(value: string \| null) => void`	-	-
onInputChange	called with the text while the user types	`(text: string) => void`	-	-
filter	decides which options match the text	`(option, text) => boolean`	-	contains, case insensitive
placeholder	text shown when the input is empty	`string`	-	-
emptyText	text shown when no option matches	`string`	-	`No results`
disabled	disable the component	`boolean`	-	`false`
...	native props, passed to the input	`InputHTMLAttributes`	`'aria-label', 'name', 'id', ...`	-

type ComboboxOption = {
  value: string
  label?: string // shown in the list and in the input, `value` when missing
  disabled?: boolean
}

The ref points at the input.

The input has role="combobox" and points at the active option with aria-activedescendant. The list is a listbox of option elements.

Key	Action
Arrow Down and Up	Open the list, and move between the options
Enter	Choose the active option
Escape	Close the list
Tab	Close the list and restore the text of the selection

A screen reader hears how many options match while the user types. Give the input a name with aria-label or aria-labelledby.