Components / Combobox
Combobox
Autocomplete input and command palette with a list of suggestions.
Next.js
SvelteKit
Astro
Nuxt.js
Remix
<div class="w-full max-w-[300px] flex flex-col gap-4">
<!-- Combobox Composition -->
<Popover>
<PopoverTrigger class="w-full group">
<Button
variant="outline"
role="combobox"
class="w-full justify-between font-normal text-slate-600 hover:text-slate-900 data-[state=open]:text-slate-900 rounded-2xl h-14 px-5 bg-white border border-slate-200 hover:border-slate-300 transition-all shadow-sm hover:shadow-md group-data-[state=open]:border-slate-900 group-data-[state=open]:ring-4 group-data-[state=open]:ring-slate-100/50"
data-combobox-trigger
>
<span data-label class="truncate text-base">Select framework...</span>
<svg class="ml-2 h-5 w-5 shrink-0 text-slate-400 transition-transform duration-300 group-data-[state=open]:rotate-180 group-data-[state=open]:text-slate-900" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 9l4 4 4-4" /></svg>
</Button>
</PopoverTrigger>
<PopoverContent class="w-[300px] p-0 overflow-hidden rounded-3xl border border-slate-100 shadow-2xl shadow-slate-200/50" align="start">
<Command class="border-0 shadow-none rounded-none bg-white">
<CommandInput placeholder="Search framework..." class="h-14 border-b border-slate-50 text-base placeholder:font-serif placeholder:italic" />
<CommandList class="p-2">
<CommandEmpty class="py-6 text-center text-sm text-slate-400 font-serif italic">No framework found.</CommandEmpty>
<CommandGroup>
<CommandItem value="next.js" class="group cursor-pointer rounded-xl py-3 px-4 aria-selected:bg-slate-900 aria-selected:text-white transition-colors">
<svg class="mr-3 h-4 w-4 opacity-0 group-data-[selected=true]:opacity-100 transition-opacity text-slate-900 group-aria-selected:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
<span class="text-base font-medium">Next.js</span>
</CommandItem>
<CommandItem value="sveltekit" class="group cursor-pointer rounded-xl py-3 px-4 aria-selected:bg-slate-900 aria-selected:text-white transition-colors">
<svg class="mr-3 h-4 w-4 opacity-0 group-data-[selected=true]:opacity-100 transition-opacity text-slate-900 group-aria-selected:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
<span class="text-base font-medium">SvelteKit</span>
</CommandItem>
<CommandItem value="astro" class="group cursor-pointer rounded-xl py-3 px-4 aria-selected:bg-slate-900 aria-selected:text-white transition-colors">
<svg class="mr-3 h-4 w-4 opacity-0 group-data-[selected=true]:opacity-100 transition-opacity text-slate-900 group-aria-selected:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
<span class="text-base font-medium">Astro</span>
</CommandItem>
<CommandItem value="nuxt" class="group cursor-pointer rounded-xl py-3 px-4 aria-selected:bg-slate-900 aria-selected:text-white transition-colors">
<svg class="mr-3 h-4 w-4 opacity-0 group-data-[selected=true]:opacity-100 transition-opacity text-slate-900 group-aria-selected:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
<span class="text-base font-medium">Nuxt.js</span>
</CommandItem>
<CommandItem value="remix" class="group cursor-pointer rounded-xl py-3 px-4 aria-selected:bg-slate-900 aria-selected:text-white transition-colors">
<svg class="mr-3 h-4 w-4 opacity-0 group-data-[selected=true]:opacity-100 transition-opacity text-slate-900 group-aria-selected:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
<span class="text-base font-medium">Remix</span>
</CommandItem>
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>
</div> <!-- Combobox is a composition of Popover + Command -->
<Popover>
<PopoverTrigger>
<Button role="combobox" class="w-[200px] justify-between">
Select framework...
<ChevronsUpDown class="ml-2 h-4 w-4 shrink-0 opacity-50" />
</Button>
</PopoverTrigger>
<PopoverContent class="w-[200px] p-0">
<Command>
<CommandInput placeholder="Search framework..." />
<CommandList>
<CommandEmpty>No framework found.</CommandEmpty>
<CommandGroup>
<CommandItem>
<Check class="mr-2 h-4 w-4 opacity-0" />
Next.js
</CommandItem>
<CommandItem>
<Check class="mr-2 h-4 w-4 opacity-0" />
Astro
</CommandItem>
...
</CommandGroup>
</CommandList>
</Command>
</PopoverContent>
</Popover>