Combobox

Uppercase popover selector that layers on top of the glass command menu primitives, complete with search, grouping, and indicator controls.

Examples

Region selector

Surface production regions with inline metadata and fast filtering.

Choose a region to see its operational role.

Assignment workflow

Compact toolbar variant that toggles between teams without leaving the command surface.

Installation

pnpm dlx shadcn@latest add @omni/combobox

The combobox depends on the command and popover primitives. Add them via the copy command above if they are not already in your project.

Usage

import {
  Combobox,
  ComboboxTrigger,
  ComboboxContent,
  ComboboxSearch,
  ComboboxList,
  ComboboxEmpty,
  ComboboxItem,
} from "@/components/ui/combobox"

const regions = [
  { value: "tokyo", label: "Tokyo" },
  { value: "osaka", label: "Osaka" },
]

export function RegionCombobox() {
  const [open, setOpen] = useState(false)
  const [value, setValue] = useState<string | null>(null)

  return (
    <Combobox open={open} onOpenChange={setOpen}>
      <ComboboxTrigger placeholder="Select region">
        {regions.find((item) => item.value === value)?.label}
      </ComboboxTrigger>
      <ComboboxContent>
        <ComboboxSearch placeholder="Filter regions" />
        <ComboboxList>
          <ComboboxEmpty>No regions found.</ComboboxEmpty>
          <ComboboxGroup>
            {regions.map((item) => (
              <ComboboxItem
                key={item.value}
                value={item.value}
                onSelect={(current) => {
                  setValue(current)
                  setOpen(false)
                }}
              >
                {item.label}
              </ComboboxItem>
            ))}
          </ComboboxGroup>
        </ComboboxList>
      </ComboboxContent>
    </Combobox>
  )
}