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.
∅
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.
∅
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.
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.
∅
An organization search with a Customer drilldown — a whole paginated selector inside the parent's facet bar, running its own copy of the engine.
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.
∅
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.
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.
∅
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.
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.
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.
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>.
Radio-like: picking replaces, and re-picking the selected value clears it. Same pill, same rows, different contract.
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.
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.
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.
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.
The bar keeps its min-height so the table below does not jump by 48px the moment a filter is cleared.
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.
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.
Customers
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.