Components / Forms

Combobox

An autocomplete input built on Base UI: type to filter a list, then pick a value. Built-in filtering, keyboard navigation, and an empty state.

Installation

bash

npx shadcn add https://raw.githubusercontent.com/levi-putna/elements/main/registry/combobox/registry.json

Basic

Start typing to filter the buildings.

Combobox · autocomplete

tsx

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

const buildings = [
  { value: "harbourview", label: "Harbourview" },
  { value: "parkside", label: "Parkside" },
  { value: "the-quay", label: "The Quay" },
]

<Combobox items={buildings}>
  <ComboboxInput placeholder="Search buildings…" className="w-64" />
  <ComboboxContent>
    <ComboboxEmpty>No building found.</ComboboxEmpty>
    <ComboboxList>
      {(item) => (
        <ComboboxItem key={item.value} value={item}>
          {item.label}
        </ComboboxItem>
      )}
    </ComboboxList>
  </ComboboxContent>
</Combobox>

Combobox props

Prop	Type	Default	Description
items	T[]	-	The full list of selectable items; Base UI filters them against the input value.
value	T \| null	-	Controlled selected value.
onValueChange	(value: T \| null) => void	-	Fires when the selection changes.
multiple	boolean	false	Allow selecting more than one item.