Selectors

The paginated-combobox family from packages/ui, driven by a fixture source with real latency, paging, faceting and failure — 137 customers and 84 organizations, 25 rows per page.

Single-select field — InfiniteComboboxSingle

The form control: a popover trigger over a paginated list, with ref and aria-* forwarded so FormLabel / FormMessage associate. The last four specimens are the ones worth the page — a failed first page, a failed later page, an empty source and a slow one are states you cannot reach against a healthy service.

∅

137 rows, 25 per page. Scroll the list: the sentinel pulls the next page 150px before it reaches the bottom.

cus_01J003DREDW

selectedSeed resolves the trigger label for a committed value the loaded pages do not contain — without it the trigger falls back to the placeholder and reads as unset.

∅

Status (bounded checkboxes), Bank (bounded, multiple={false} — radio-like), Customer (a nested paginated selector running its own copy of the engine).

∅

Suspended and closed customers are listed but unselectable. Prefer this to filtering: a missing row reads as 'no such customer', a disabled one as 'this one, but not yet'.

∅

Rendered as the FIRST CommandItem so it owns cmdk's Enter and joins arrow-key navigation. noMatches holds it back while real rows are on screen, so it never steals Enter from the row being aimed at.

Select a customer.

The trigger takes the invalid ring, as it would under a FormMessage.

Seeded, so the disabled trigger still shows what is committed rather than a placeholder.

∅

Open it: three skeleton rows hold the list's height while the first page lands, and the status row announces 'Searching…' for assistive tech.

Zero rows is not an error: the copy has to read as 'nothing matches' rather than 'something broke'.

{ ok: false } surfaces as an inline error naming the noun, plus a retry — deliberately distinct from an empty page.

Page 1 lands, page 2 fails. The sentinel shows 'Couldn't load more.' with its own retry, and stops auto-retrying on every scroll tick — a blank there would read as the end of the list.

Multi-select editor — InfiniteCombobox

The same engine rendered inline, filling a filter dialog's editor pane. Two selection modes: callback, where the caller owns the toggle math, and link, where the combobox owns it and every row is a real href.

Multi-select with facets

Searching…

∅

Picks accumulate, so each row is a checkbox and the list is aria-multiselectable. Changing a facet or the sort re-keys the query and re-fetches from page 1.

multiple={false}

Searching…

∅

Not cosmetic: a pick replaces rather than accumulates, so the row shows a check mark instead of a checkbox. A checkbox here would promise an accumulation the control will not honour.

Selection off the loaded pages

Searching…
3 selected

cus_01J002GKEST, cus_01J002WAURO, cus_01J003MAURO

Three committed rows from deep in the set pin under a 'Selected' group at the top, so they stay visible and uncheckable while loaded rows toggle in place. Search for something else — they stay.

Nested search facet

Searching…

∅

An organization search with a Customer drilldown — a whole paginated selector inside the parent's facet bar, running its own copy of the engine.

Link mode

Rows are real hrefs and the selection lives in ?customer=. The combobox owns the toggle math and updates optimistically, reverting to server truth if the navigation is superseded.

renderEmpty

Searching…

∅

A three-row source. Type anything unmatched: the default copy is replaced with copy that explains why a constrained list is empty, rather than implying the search was wrong.

renderFooter + extraItem

Searching…

Type to search by name or ID.

∅

The footer is fed the live, undebounced query and is for non-interactive hints only — it sits outside cmdk's listbox, so keys never reach it. Anything actionable has to be an extraItem.

Failed source

Searching…

∅

The same { ok: false } → inline error + retry as the single-select field, but laid out for the inline pane rather than a popover.

Bounded enums — StaticComboboxSingle

A fixed, client-held set rendered through the same control as a paginated search, so a four-option field and a customer picker are visually the same thing. The search box appears only from eight options.

∅

Below SEARCH_THRESHOLD (8) the CommandInput is dropped: a filter over two rows is furniture. cmdk keeps working because its keydown handler lives on the Command root, which takes tabIndex={0} and is focused on open.

FLAT

Still search-less, and still the same trigger, popover, row anatomy and empty-state voice as the paginated customer field above.

∅

At or above the threshold the search box comes back. It filters instantly: a client-held source has no round-trip to spare, so the keystroke debounce is dropped rather than added as lag.

∅

Pix, Interac and SEPA instant have no credentials in this environment — listed but unselectable, so the row reads as 'this one, but not yet' rather than 'no such rail'.

SPEI

A committed value still shows on the trigger — the option is always in `options`, so it resolves its own label with no off-page seed.

Long list (~400 options)

The paging check has its own page — static combobox paging — because it needs the full IANA timezone list to show the failure it exists for: before `staticOptionsPage` honoured `page`, every one of ~400 rows mounted on open, of which eight are visible.

Facet parts — FacetPill, FacetOptionList, FacetTogglePill

The pill vocabulary a filter bar is built from: empty recedes, set lifts. Judged in a row, not one at a time.

The pill vocabulary

Static triggers, side by side: empty recedes, set lifts and reads 'label: value', and the count badge appears only from two selections — at one it would just restate the value beside it.

FacetOptionList — multi

The whole row is the toggle (aria-pressed); the checkbox is a non-interactive visual, because a Radix Checkbox would nest a <button> inside the row's <button>.

FacetOptionList — multiple={false}

Radio-like: picking replaces, and re-picking the selected value clears it. Same pill, same rows, different contract.

FacetTogglePill

A boolean facet with no popover — one click flips it. Same vocabulary as the popover pills so it sits naturally in the same bar, with aria-pressed carrying the state.

A whole bar

unverifiedOnly=false includeDeleted=false

Two popover facets and two toggles, live. This is the arrangement the vocabulary is actually judged in.

Applied filters — FilterBar

The committed-filter row above a list table. Every action is href-or-callback, which is what lets one component render both the URL-driven server row and the client dialog's draft.

Callback mode

last action → —

Delete a chip, then reset. When the last chip goes the bar shows its empty copy rather than collapsing to nothing — a bar that disappears takes the Filter button with it.

Link mode

Filter
Customer: Aurora Holdings
Bank: Victor
Clear

The same components with string hrefs: every chip and the reset are real links, so the applied state is a shareable URL and the whole row renders in a server component with no client JS.

Nothing applied

No filters.

The bar keeps its min-height so the table below does not jump by 48px the moment a filter is cleared.

Many filters, narrow column

flex-wrap, not overflow: an applied filter that scrolls out of sight is one nobody remembers setting.

List-page hero — CommandSearch

One input that filters the list and surfaces structured matches as you type, writing a debounced ?q= to the URL. Press / anywhere on this page to focus it.

Live hero

Try “aurora”, “summit” or “zephyr”. Typing writes ?q= (debounced 200ms); every row is a link to its applied-filter URL, and cmdk owns keyboard nav — arrows move, Enter follows, Escape collapses then clears.

Streaming and failure rows

Customers

Organizations

Couldn't load organizations.

What a group renders before and instead of results. The skeleton is fixed-height so the dropdown reserves its space and the keyboard cursor does not jump under the operator as groups resolve; the note is not a cmdk item, so keyboard nav skips it.