Combobox

Installation

npx shadcn@latest add @uqudo/combobox

Installing it also installs Button and Input Group, which it depends on. The behaviour comes from the Combobox primitive in @base-ui/react.

Usage

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

const frameworks = ["Next.js", "SvelteKit", "Nuxt.js", "Remix", "Astro"]

<Combobox items={frameworks}>
  <ComboboxInput placeholder="Select a framework" />
  <ComboboxContent>
    <ComboboxEmpty>No results.</ComboboxEmpty>
    <ComboboxList>
      {(item) => (
        <ComboboxItem key={item} value={item}>
          {item}
        </ComboboxItem>
      )}
    </ComboboxList>
  </ComboboxContent>
</Combobox>

Pass the options to items on the root and render each one through the function child of ComboboxList. Base UI filters the list against the input for you. Items can be strings or { value, label } objects; for other shapes provide itemToStringLabel.

Examples

Multiple

Add multiple and swap the input for ComboboxChips. ComboboxValue receives the selected values so you can render a ComboboxChip per value, and the popup is anchored to the chips container through useComboboxAnchor.

API Reference

Combobox

The Base UI Combobox.Root, re-exported unchanged. The most used props:

ComboboxInput

Renders the text input inside an Input Group with the trigger button at the end.

ComboboxContent

Portal, positioner and popup in one. Positioning props are forwarded to the positioner.

ComboboxList

ComboboxItem

ComboboxChips

Container for the selected values in a multiple combobox. Attach the ref from useComboboxAnchor and pass the same ref to ComboboxContent's anchor.

ComboboxChip

Other parts