Combobox
An autocomplete input that allows users to select from a list of options.
Installation
The Combobox component is built using a combination of the Command component from cmdk and the Popover component from Radix UI.
npm install cmdk @radix-ui/react-popoverUsage
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
import * as React from "react"
import { Check, ChevronsUpDown } from "lucide-react"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import {
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
} from "@/components/ui/command"
import {
Popover,
PopoverContent,
PopoverTrigger,
} from "@/components/ui/popover"
const frameworks = [
{ label: "Next.js", value: "next.js" },
{ label: "SvelteKit", value: "sveltekit" },
{ label: "Nuxt.js", value: "nuxt.js" },
{ label: "Remix", value: "remix" },
{ label: "Astro", value: "astro" },
]
export function ComboboxDemo() {
const [open, setOpen] = React.useState(false)
const [value, setValue] = React.useState("")
return (
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<Button
variant="outline"
role="combobox"
aria-expanded={open}
className="w-[200px] justify-between"
>
{value
? frameworks.find((framework) => framework.value === value)?.label
: "Select framework..."}
<ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button>
</PopoverTrigger>
<PopoverContent className="w-[200px] p-0">
<Command>
<CommandInput placeholder="Search framework..." />
<CommandEmpty>No framework found.</CommandEmpty>
<CommandGroup>
{frameworks.map((framework) => (
<CommandItem
key={framework.value}
value={framework.value}
onSelect={(currentValue) => {
setValue(currentValue === value ? "" : currentValue)
setOpen(false)
}}
>
<Check
className={cn(
"mr-2 h-4 w-4",
value === framework.value ? "opacity-100" : "opacity-0"
)}
/>
{framework.label}
</CommandItem>
))}
</CommandGroup>
</Command>
</PopoverContent>
</Popover>
)
}Examples
Multi-select
Props
| Component | Props | Description |
|---|---|---|
| Combobox (default) | value, onSelect, open, onOpenChange | Basic single-selection combobox using Popover and Command components. |
| Multi-select | value[], onChange, Input, Badge | Allows users to select multiple values and removes them with a badge button. |
| CommandItem | value, onSelect | Each selectable item inside the command palette. |
| CommandInput | placeholder, value, onChange | Search input to filter options. |
| Popover | open, onOpenChange | Manages visibility of the dropdown. |