Query Combobox

Free-text search input with grouped autocomplete suggestions. Full ARIA combobox semantics (role=combobox, aria-expanded, role=listbox, role=option). Available in shell (for search bars) and input (standalone) variants. Supports loading skeleton and keyboard navigation.

core/query-combobox

Installation

1 · Add registry to components.json

2 · Install component

Examples

Default

Input and shell variants with grouped suggestions, loading skeleton.

Input variant (standalone)

Loading state

Shell variant (for search bars)

API Reference

Prop	Type	Default	Description
`value`req	`string`	—	Current input text value.
`onChange`req	`(value: string) => void`	—	Called when the text input changes.
`onSelect`	`(suggestion: QuerySuggestion) => void`	—	Called when the user selects a suggestion item.
`suggestions`	`QuerySuggestion[]`	`[]`	Autocomplete suggestions — can be async-populated.
`loading`	`boolean`	`false`	Shows a loading skeleton when true.
`placeholder`	`string`	`"Search…"`	Input placeholder text.
`label`	`string`	`"Where"`	Field label — used as aria-label and SearchFieldShell label.
`variant`	`"shell" \| "input"`	`"input"`	shell renders as a SearchFieldShell trigger; input renders as a bordered text input.
`disabled`	`boolean`	—	Disables the input.
`invalid`	`boolean`	—	Applies a destructive ring.
`emptyMessage`	`string`	`"No suggestions found."`	Text shown when suggestions are empty and not loading.