Inputs / Combobox

Combobox

<Combobox />Stable

A searchable select that filters as you type. Reach for it over Select when a list is long, and over a plain DropdownMenu when a menu has too many items to scan — the Popup / Searchable-menu variants are exactly that: a popover menu with search inside. Built on @base-ui/react Combobox; every state resolves through our tokens (border --input, focus --ring-soft, invalid --destructive).

import { Combobox, ComboboxInput, ComboboxContent, ComboboxList, ComboboxItem } from "@/components/upnext";

Playground

Edit any prop in the inspector — preview and code update together. Hover any color for hex + token.

Preview

Code

import { Combobox } from "@/components/upnext";


<Combobox />

Variants

Single (inline or popover button), multi-select chips, a clear button, custom item rows, a searchable command menu, plus disabled and invalid states — all on the same primitive.

{/* inline rectangular field — filters as you type */}
<Combobox items={POSITIONS}>
  <ComboboxInput placeholder="Search positions…" />
  <ComboboxContent>
    <ComboboxList>
      <ComboboxEmpty>No positions found.</ComboboxEmpty>
      {POSITIONS.map((p) => (
        <ComboboxItem key={p.value} value={p}>{p.label}</ComboboxItem>
      ))}
    </ComboboxList>
  </ComboboxContent>
</Combobox>

Source

The wrapper is a thin re-export; the actual styling lives in the shadcn primitive.