Railbase
GPTClaude

Combobox

An autocomplete input — a Popover wrapping a Command list (composed, not a single tag).

Updated

Popover + Command
<Popover>
  <PopoverTrigger asChild><Button variant="outline" class="w-56 justify-between">Select framework…</Button></PopoverTrigger>
  <PopoverContent class="w-56 p-0">
    <Command>
      <CommandInput placeholder="Search framework…" />
      <CommandList>
        <CommandEmpty>No framework found.</CommandEmpty>
        <CommandGroup>
          <CommandItem value="next">Next.js</CommandItem>
          <CommandItem value="astro">Astro</CommandItem>
          <CommandItem value="remix">Remix</CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  </PopoverContent>
</Popover>

An autocomplete input — a Popover wrapping a Command list (composed, not a single tag).

Installation

railbase ui add combobox

Note

railbase ui add also copies the command, popover components — they ship alongside this component automatically.

Usage

import { Popover, PopoverTrigger, PopoverContent, Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from "@/lib/ui/combobox";

<Popover>
  <PopoverTrigger>Select framework…</PopoverTrigger>
  <PopoverContent>
    <Command>
      <CommandInput placeholder="Search…" />
      <CommandList>
        <CommandEmpty>No results.</CommandEmpty>
        <CommandGroup>
          <CommandItem value="next">Next.js</CommandItem>
          <CommandItem value="astro">Astro</CommandItem>
        </CommandGroup>
      </CommandList>
    </Command>
  </PopoverContent>
</Popover>

Anatomy

Exported parts: Popover · PopoverTrigger · PopoverContent · Command · CommandInput · CommandList · CommandEmpty · CommandGroup · CommandItem · CommandSeparator

← PreviousCollapsibleNext →Command