Search combobox

A live demo against a mocked server in your browser — the block is the registry's own source.

Install

npx shadcn add @mantle/search-combobox

Needs a React Aria shadcn project and the @mantle registry in components.json — see Install. The block lands in components/mantle/search-combobox.tsx, yours to edit.

Usage

Point it at a service and the field to match.

import { SearchCombobox } from "@/components/mantle/search-combobox";

<SearchCombobox<Article>
  service="articles"
  field="title"
  label="Search articles"
  onSelect={(article) => open(article.id)}
/>;

• Built on shadcn’s aria Combobox (React Aria ComboBox): keyboard navigation and live-region announcements included.
• operator="auto" (default) tries case-insensitive $ilike and falls back to $like for the rest of the session if the adapter rejects it — see the capability matrix.
• minChars, debounceMs, and limit tune how eagerly it queries.

View the source.