Combobox
A searchable select built on the Command and Popover primitives.
When to use
Use when the list is long enough that the user should type to narrow it: people, projects, clients, anything past roughly fifteen entries. For a short fixed list use Select or RadioGroup; for a global "jump to" or action launcher use Command in a dialog, not this.
Platform notes
This is a recipe rather than a shadcn component, Popover plus Command assembled by hand, so it is yours to maintain and it belongs in the slice that owns the data, not in shared/ui. It is fully controlled (open and the selected value both in state, no hidden input), so react-hook-form needs a Controller, and CommandEmpty is the only state the primitives give you: a skeleton while the options load and an error path for a failed fetch are on you. One token detail: the trigger is Button variant="outline", which borders on --border, a step lighter than the --input used by Input and SelectTrigger, so add border-input to the trigger when it shares a row with them. The trigger placeholder, the search placeholder and the empty message are three separate user-facing strings, all of them t() calls.
Install
npx shadcn@latest add comboboxCode
"use client";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import {
Command,
CommandEmpty,
CommandGroup,
CommandInput,
CommandItem,
CommandList,
} from "@/components/ui/command";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Check, ChevronsUpDown } from "lucide-react";
import { cn } from "@/lib/utils";
const frameworks = [
{ value: "next.js", label: "Next.js" },
{ value: "react", label: "React" },
{ value: "tailwind", label: "Tailwind CSS" },
{ value: "shadcn", label: "shadcn/ui" },
{ value: "radix", label: "Radix UI" },
];
export function ComboboxDemo() {
const [open, setOpen] = useState(false);
const [value, setValue] = useState("");
return (
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<Button
variant="outline"
// biome-ignore lint/a11y/useSemanticElements: combobox opens a listbox, not a native <select>
role="combobox"
aria-expanded={open}
className="w-[220px] justify-between"
>
{value ? frameworks.find((f) => f.value === value)?.label : "Select framework..."}
<ChevronsUpDown className="opacity-50" />
</Button>
</PopoverTrigger>
<PopoverContent className="w-[220px] p-0">
<Command>
<CommandInput placeholder="Search framework..." className="h-9" />
<CommandList>
<CommandEmpty>No framework found.</CommandEmpty>
<CommandGroup>
{frameworks.map((framework) => (
<CommandItem
key={framework.value}
value={framework.value}
onSelect={(current) => {
setValue(current === value ? "" : current);
setOpen(false);
}}
>
{framework.label}
<Check
className={cn(
"ml-auto",
value === framework.value ? "opacity-100" : "opacity-0",
)}
/>
</CommandItem>
))}
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
);
}