Combobox
Searchable select dropdown combining Popover and Command
Preview
Usage
import { Combobox, type ComboboxOption } from "@/components/ui/combobox"
import { useState } from "react"
const frameworks: ComboboxOption[] = [
{ value: "next", label: "Next.js" },
{ value: "remix", label: "Remix" },
{ value: "astro", label: "Astro" },
{ value: "nuxt", label: "Nuxt" },
]
function ComboboxDemo() {
const [value, setValue] = useState("")
return (
<Combobox
options={frameworks}
value={value}
onValueChange={setValue}
placeholder="Select framework..."
searchPlaceholder="Search frameworks..."
emptyMessage="No framework found."
/>
)
}This is a composed component that wraps Popover, Command, and Button into a single searchable select. The dropdown width automatically matches the trigger width.
Install
npx shadcn add @bonsai/combobox