Combobox

Combobox is a neobrutalist React component from Cruise UI. A filterable select: type to filter, grouped options, async loading and multi-select chips. Install it with npx shadcn@latest add @cruiseui/combobox.

Install

Terminal

npx shadcn@latest add @cruiseui/combobox

First time? Installation shows the one-off components.json setup (the @cruiseui registry) and how to turn the theme on.

Example

Corners

Try typing “lag” or “river”.

When to use it

When to use

Long lists, or when people know what they're looking for (their state, their bank).

When not to

Under ~8 options (use a native Select).

Props

CruiseCombobox

PropTypeDefaultDescription
label?string—Visible label. Leave out inside a CruiseFormField (it brings the label).
itemsCruiseComboOption[] | CruiseComboGroup[]—Options, or groups of options with a heading each.
placeholder?string——
hint?string——
error?string—Error message: --danger border and text under the field.
disabled?boolean——
searchIcon?boolean—Search icon at the start of the field.
loading?boolean—Async lists: shows the spinner + "Searching…".
onInputChange?((query: string) => void)—Called as people type (e.g. to fetch matches).
remote?boolean—The list is already filtered (e.g. by a server), so don't filter it again.
popupClassName?string—Extra classes on the list / sheet, e.g. "nepa-mode" (they render in <body>).
className?string——
multiple?boolean——
value?CruiseComboOption | null | CruiseComboOption[]——
defaultValue?CruiseComboOption | null | CruiseComboOption[]——
onValueChange?((value: CruiseComboOption | null) => void) | ((value: CruiseComboOption[]) => void)——

Accessibility

  • ARIA combobox pattern: aria-expanded, aria-controls, aria-activedescendant; listbox / option / aria-selected.
  • Works with the keyboard only; "No matches" and "Searching…" are announced.
  • Below 640px it opens as a bottom sheet with the search focused.