Autocomplete

InstallationCopy Anchor Link

pnpm dlx shadcn@latest add @columbus/autocomplete

UsageCopy Anchor Link

import {
  Autocomplete,
  AutocompleteEmpty,
  AutocompleteInput,
  AutocompleteItem,
  AutocompleteList,
  AutocompletePopup,
} from "@/components/ui/autocomplete";

const items = [
  { label: "feature", value: "feature" },
  { label: "fix", value: "fix" },
];

<Autocomplete items={items}>
  <AutocompleteInput aria-label="Tag" placeholder="e.g. feature" />
  <AutocompletePopup>
    <AutocompleteEmpty>No tags found.</AutocompleteEmpty>
    <AutocompleteList>
      {(item) => (
        <AutocompleteItem key={item.value} value={item}>
          {item.label}
        </AutocompleteItem>
      )}
    </AutocompleteList>
  </AutocompletePopup>
</Autocomplete>;

The value is the input's text. Suggestions help fill it, but any text is allowed. To limit the value to the list, use Combobox. AutocompleteList takes a function, so render autocomplete in a Client Component.

Inline completionCopy Anchor Link

mode="both" fills the input with the highlighted suggestion as you move through the list with the arrow keys.

Trigger and clear buttonsCopy Anchor Link

showTrigger and showClear add buttons to the end of the input. They have no text, so name them with triggerProps and clearProps.

GroupsCopy Anchor Link

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

API referenceCopy Anchor Link

Also accepts every Base UI Autocomplete prop. AutocompleteItem, AutocompleteEmpty, AutocompleteGroup, AutocompleteGroupLabel, AutocompleteSeparator, AutocompleteStatus, and AutocompleteValue are styled Base UI parts. useAutocompleteFilter re-exports Base UI's Autocomplete.useFilter.

AutocompleteInputCopy Anchor Link

AutocompletePopupCopy Anchor Link

Renders the portal, positioner, and popup for you.