Combobox

Searchable select with filtering, single and multi selection, and full keyboard navigation. Powered by cmdk.

Preview

Installation

npx drivn add combobox

Usage

1 import { useState } from "react"
2 import { Combobox } from "@/components/ui/combobox"
3 
4 const frameworks = [
5   { label: "React", value: "react" },
6   { label: "Vue", value: "vue" },
7   { label: "Angular", value: "angular" },
8   { label: "Svelte", value: "svelte" },
9   { label: "Next.js", value: "nextjs" },
10 ]
11 
12 export default function Page() {
13   const [value, setValue] = useState("")
14 
15   return (
16     <Combobox value={value} onChange={setValue}>
17       <Combobox.Trigger placeholder="Select framework...">
18         {frameworks.find(f => f.value === value)?.label}
19       </Combobox.Trigger>
20       <Combobox.Content placeholder="Search frameworks...">
21         <Combobox.Empty />
22         {frameworks.map(f => (
23           <Combobox.Item key={f.value} value={f.value}>
24             {f.label}
25           </Combobox.Item>
26         ))}
27       </Combobox.Content>
28     </Combobox>
29   )
30 }

Multi Select

With Groups

Clearable

With Icons

Disabled Items

Custom Empty State

API Reference

Combobox

Prop	Type	Default	Description
`value`	string \| string[]	—	Controlled value. String for single, string[] for multi
`onChange`	(value: string \| string[]) => void	—	Callback when the selected value changes
`multiple`	boolean	false	Enable multi-select mode with tag chips
`className`	string	—	Additional CSS classes for the root element

Combobox.Trigger

Prop	Type	Default	Description
`placeholder`	string	"Select..."	Text shown when no value is selected
`clearable`	boolean	false	Show a clear button (X) instead of chevron when a value is selected
`children`	ReactNode	—	Custom display for the selected value (single mode)
`className`	string	—	Additional CSS classes for the trigger

Combobox.Content

Prop	Type	Default	Description
`placeholder`	string	"Search..."	Placeholder text for the search input
`children`	ReactNode	—	Combobox items, groups, empty, and separators
`className`	string	—	Additional CSS classes for the dropdown content

Combobox.Item

Prop	Type	Default	Description
`value`	string	—	Unique value for the item
`icon`	ComponentType \| ReactElement	—	Icon component or element displayed before the label
`disabled`	boolean	false	Whether the item is disabled
`children`	ReactNode	—	Label content for the item
`className`	string	—	Additional CSS classes for the item

Combobox.Group

Prop	Type	Default	Description
`heading`	string	—	Group heading displayed above the items
`children`	ReactNode	—	Combobox items within the group
`className`	string	—	Additional CSS classes for the group

Combobox.Label

Prop	Type	Default	Description
`children`	ReactNode	—	Label text content
`className`	string	—	Additional CSS classes for the label

Combobox.Empty

Prop	Type	Default	Description
`children`	ReactNode	"No results found."	Custom content for the empty state
`className`	string	—	Additional CSS classes for the empty state

Combobox.Separator

Prop	Type	Default	Description
`className`	string	—	Additional CSS classes for the separator

1	import { useState } from "react"
2	import { Combobox } from "@/components/ui/combobox"
3
4	const frameworks = [
5	{ label: "React", value: "react" },
6	{ label: "Vue", value: "vue" },
7	{ label: "Angular", value: "angular" },
8	{ label: "Svelte", value: "svelte" },
9	{ label: "Next.js", value: "nextjs" },
10	]
11
12	export default function Page() {
13	const [value, setValue] = useState("")
14
15	return (
16	<Combobox value={value} onChange={setValue}>
17	<Combobox.Trigger placeholder="Select framework...">
18	{frameworks.find(f => f.value === value)?.label}
19	</Combobox.Trigger>
20	<Combobox.Content placeholder="Search frameworks...">
21	<Combobox.Empty />
22	{frameworks.map(f => (
23	<Combobox.Item key={f.value} value={f.value}>
24	{f.label}
25	</Combobox.Item>
26	))}
27	</Combobox.Content>
28	</Combobox>
29	)
30	}