Combobox

Installation

import {
  Combobox,
  ComboboxInput,
  ComboboxContent,
  ComboboxEmpty,
  ComboboxList,
  ComboboxItem,
  ComboboxGroup,
  ComboboxLabel,
  ComboboxCollection,
  ComboboxSeparator,
  ComboboxChips,
  ComboboxChip,
  ComboboxChipsInput,
  ComboboxValue,
  ComboboxTrigger,
  useComboboxAnchor,
} from "@aspyn-io/kit";

Single select

Pass items to the root; ComboboxList renders each as a ComboboxItem. Built-in filtering + empty state.

Clearable

showClear adds a × button once something is selected.

Multiple (chips)

Add `multiple`; render selected values as ComboboxChip inside ComboboxChips, anchored via useComboboxAnchor.

Grouped + separators

Group data as { value, items }; ComboboxGroup + ComboboxLabel + ComboboxCollection, with ComboboxSeparator between groups.

Custom item content

Object items with a title + description. Set itemToStringValue so typing filters by the label.

Button trigger

Open from a Button (ComboboxTrigger render) with the selected value shown via ComboboxValue and the search moved inside the popup.

Disabled & invalid

disabled and aria-invalid sit on ComboboxInput.

Notes

• Inherited from shadcn/ui — the Base UI Combobox (@base-ui/react): built-in filtering, keyboard highlight, item indicators, clear, grouping, and multi-select chips.
• ComboboxList takes a render-function child `(item) => <ComboboxItem>`; grouped lists nest ComboboxCollection inside ComboboxGroup.
• For object items, pass itemToStringValue so typing filters by the display string; ComboboxItem value is the whole item.
• Controlled via value / onValueChange on the root (a single item for single-select, an array for multiple).