Combobox
A text field that filters its list as you type. With multiple set, each pick becomes a chip in the field.
Installation
npx shadcn@latest add @afterglow/comboboxComposition
Component structure.
- ComboboxInput
- ComboboxTrigger
- ComboboxClear
- ComboboxChips
- ComboboxValue
- ComboboxChip
- ComboboxChipsInput
- ComboboxValue
- ComboboxContent
- ComboboxEmpty
- ComboboxList
- ComboboxGroup
- ComboboxLabel
- ComboboxCollection
- ComboboxItem
- ComboboxSeparator
- ComboboxGroup
Multiple
With multiple, each choice becomes a chip beside the input. The list anchors to the whole chip row.
Clear button
showClear swaps the chevron for a button that empties the field.
Groups
Each ComboboxGroup takes its own items and renders them through a ComboboxCollection.
Custom items
The items are objects, so itemToStringValue picks the string the filter matches against.
Invalid
aria-invalid on the input turns the whole field red.
Disabled
Auto highlight
autoHighlight lights the first match as you type, so Enter picks it.
Popup
A button opens the list, and the search field moves inside the popup.
Input group
An InputGroupAddon passed to ComboboxInput puts an icon in front of the text. alignOffset pulls the list back so it starts under the icon.
API Reference
A label has to sit inside its ComboboxGroup. Base UI throws when it does not, and it throws at open time rather than at compile time.
ComboboxInput
An InputGroup holding the text field, the chevron and the clear button. Children land inside the group, so an InputGroupAddon can put an icon in front of the text.
| Prop | Type | Default |
|---|---|---|
| showTrigger | boolean | true |
| showClear | boolean | false |
ComboboxChips
The field for multiple. Pass it the ref from useComboboxAnchor and hand the same ref to ComboboxContent as anchor.
ComboboxContent
Base UI's Portal, Positioner and Popup in one part.
| Prop | Type | Default |
|---|---|---|
| side | Side | "bottom" |
| align | Align | "start" |
| sideOffset | number | 4 |
| anchor | RefObject<HTMLElement | null> | - |
Everything else is Base UI combobox's API, documented there.