Combobox

InstallationCopy Anchor Link

pnpm dlx shadcn@latest add @columbus/combobox

UsageCopy Anchor Link

import {
  Combobox,
  ComboboxEmpty,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
  ComboboxPopup,
} from "@/components/ui/combobox";

const items = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
];

<Combobox items={items}>
  <ComboboxInput
    aria-label="Fruit"
    placeholder="Select a fruit…"
    triggerProps={{ "aria-label": "Show fruits" }}
  />
  <ComboboxPopup>
    <ComboboxEmpty>No fruits found.</ComboboxEmpty>
    <ComboboxList>
      {(item) => (
        <ComboboxItem key={item.value} value={item}>
          {item.label}
        </ComboboxItem>
      )}
    </ComboboxList>
  </ComboboxPopup>
</Combobox>;

Typing filters the list. Unlike Autocomplete, the value must be one of the items. ComboboxList takes a function, so render combobox in a Client Component.

ComboboxInput shows a chevron button by default. It has no text, so give it a name with triggerProps={{ "aria-label": "…" }}, or hide it with showTrigger={false}.

Multiple selectionCopy Anchor Link

With multiple, use ComboboxChips in place of ComboboxInput. Each chip has a remove button: name it with removeProps.

GroupsCopy Anchor Link

Pass groups as items, and render each one's items with ComboboxCollection.

Select-like triggerCopy Anchor Link

Render SelectButton as the trigger and put the input inside the popup.

API referenceCopy Anchor Link

Also accepts every Base UI Combobox prop. ComboboxItem, ComboboxEmpty, ComboboxGroup, ComboboxGroupLabel, ComboboxSeparator, ComboboxStatus, and ComboboxValue are styled Base UI parts. createComboboxItems and useComboboxFilter re-export Base UI's Combobox.createItems and Combobox.useFilter.

ComboboxInputCopy Anchor Link

ComboboxPopupCopy Anchor Link

Renders the portal, positioner, and popup for you. In multiple mode it lines up with ComboboxChips.

ComboboxChips and ComboboxChipCopy Anchor Link

ComboboxChipsInput is the text input for inside ComboboxChips. It takes the same size as ComboboxInput.