Combobox

Autocomplete input and command palette with a list of suggestions.

shadcn/ui docs →

Preview

Installation

terminal
$
Other package managers 
bunx --bun shadcn@latest add https://trents.tech/r/combobox.json

Dependencies: cmdk

Usage

example.tsx
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
import { Button } from "@/components/ui/button"
import { Check, ChevronsUpDown } from "lucide-react"
import { cn } from "@/lib/utils"

const [open, setOpen] = useState(false)
const [value, setValue] = useState("")

const frameworks = [
  { value: "next", label: "Next.js" },
  { value: "remix", label: "Remix" },
  { value: "astro", label: "Astro" },
]

<Popover open={open} onOpenChange={setOpen}>
  <PopoverTrigger asChild>
    <Button variant="neutral" role="combobox" aria-expanded={open}>
      {value ? frameworks.find((f) => f.value === value)?.label : "Select framework..."}
      <ChevronsUpDown className="ml-2 size-4 shrink-0 opacity-50" />
    </Button>
  </PopoverTrigger>
  <PopoverContent className="w-[200px] p-0">
    <Command>
      <CommandInput placeholder="Search..." />
      <CommandList>
        <CommandEmpty>No framework found.</CommandEmpty>
        <CommandGroup>
          {frameworks.map((f) => (
            <CommandItem key={f.value} value={f.value} onSelect={(v) => { setValue(v); setOpen(false); }}>
              <Check className={cn("mr-2 size-4", value === f.value ? "opacity-100" : "opacity-0")} />
              {f.label}
            </CommandItem>
          ))}
        </CommandGroup>
      </CommandList>
    </Command>
  </PopoverContent>
</Popover>
0