18Switch language to العربية

Combobox

PreviousNext

Autocomplete input with a filtered list of suggestions.

import { ComboboxPreview } from "@/components/atom/combobox-preview"

export default function ComboboxDemo() {
  return (
    <>
      <ComboboxPreview />
    </>
  )
}

Installation

pnpm dlx shadcn@latest add @codebase/combobox

Usage

import {
  Combobox,
  ComboboxContent,
  ComboboxEmpty,
  ComboboxInput,
  ComboboxItem,
  ComboboxList,
} from "@/components/ui/combobox"
<Combobox items={frameworks}>
  <ComboboxInput placeholder="Select framework..." />
  <ComboboxContent>
    <ComboboxEmpty>No framework found.</ComboboxEmpty>
    <ComboboxList>
      {(item: string) => (
        <ComboboxItem key={item} value={item}>
          {item}
        </ComboboxItem>
      )}
    </ComboboxList>
  </ComboboxContent>
</Combobox>