Combobox

Autocomplete input with a list of suggestions. Built with Base UI.

Basic

Autocomplete input with a list of suggestions.

Installation

CLI

npx @sonojs/ui@latest add combobox

Also needsnpx @sonojs/ui@latest add button input-group && npm i @base-ui/react lucide-react

Usage

combobox.tsx

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

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

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

Props

Prop	Type	Default	Description
items	readonly T[]	—	Options passed to the combobox root.
multiple	boolean	false	Allow selecting more than one value (use chips).
showClear	boolean	false	On ComboboxInput — show a clear button.
showTrigger	boolean	true	On ComboboxInput — show the chevron trigger.
disabled	boolean	false	Disables the control.