Combobox
Filterable autocomplete select.
Usage
Compose Combobox.Root, Combobox.Input, Combobox.Content, and Combobox.Item. Filtering
is consumer-driven — update a derived list from the input's value.
Filtering
The component does not filter internally. Declare a comboQuery state
variable, update it from Combobox.Input's oninput handler, and derive the filtered list with $derived. This gives you full control over the matching algorithm.
Props
All subcomponents forward their corresponding Bits props and native HTML attributes via spreading.
| Prop | Type | Default |
|---|---|---|
Combobox.Root · type Selection mode. | 'single' | 'multiple' | — |
Combobox.Root · value Bindable selected value. | string | — |
Combobox.Input · placeholder Placeholder text for the search field. | string | — |
Combobox.Input · oninput Handler to update filter query. | (e: InputEvent) => void | — |
Combobox.Input · class Extra classes on the input. | string | — |
Combobox.Item · value Required. The value this item represents. | string | — |
Combobox.Item · label Required. Accessible label text for the item. | string | — |
Combobox.Item · class Extra classes on the item. | string | — |