Combobox
Each example below is a real component instance — flip the theme toggle to see how it adapts.
Default#
Loading…
Rich Options#
Loading…
Props#
| Prop | Type | Default | Description |
|---|---|---|---|
| options * | readonly ComboboxOption[] | — | Available options. Strings are normalized to `{ value, label: value }`. |
| value | string | undefined | — | Controlled selected option value. |
| defaultValue | string | undefined | — | Default selected value (uncontrolled). |
| onValueChange | ((value: string) => void) | undefined | — | Fires with the option's `value` when a selection is committed. |
| query | string | undefined | — | Controlled query. |
| defaultQuery | string | undefined | — | Default query (uncontrolled). |
| onQueryChange | ((query: string) => void) | undefined | — | Fires whenever the query changes. |
| placeholder | string | undefined | — | |
| filter | ((option: NormalizedOption, query: string) => boolean) | undefined | (option: NormalizedOption, query: string) =>
option.searchText.includes(query.toLowerCase()) | Custom matcher. Default: case-insensitive substring on label/description. |
| emptyState | ReactNode | — | Empty-state node rendered when filtering yields nothing. |
| width | string | number | undefined | 260 | Pixel or CSS width of the wrapper. Default 260. |
| disabled | boolean | undefined | — | |
| name | string | undefined | — | |
| id | string | undefined | — | |
| aria-label | string | undefined | — |