F1 component kit/Search and pickers/Combobox, cloth picker and ⌘KDesktop

Combobox, cloth picker and ⌘K

F1 variant12 · combobox

Async search over thousands of rows: debounced server search + per_page, “20 of 186”, loading / empty / error, multi-select, creatable, recent picks, and matching on the en or cn name. The cloth picker re-points to admin.fabrics.index (~3,600 cloths); ⌘K adds server quick search plus pages from /me/menu.

Covers: combobox primitive, combobox designer, cloth-picker designer, command-palette designer. Exports: Combobox, ClothPicker, CommandPalette.

Whole page:Phone is fixed at comfortable (POWERUPS #15).Laravel · navyDTC · midnight green

Anatomy

The component as it sits in the product: English, compact, real data shapes.

Cloth 3,604 cloths · search code or name (en / 中文)Search cloths

States

8 states, left to right, top to bottom. A mock poll never finishes, so each state is drawn on purpose.

closed

Cloth 3,604 cloths · search code or name (en / 中文)Search cloths

results · 20 of 186

Pick a cloth

Cloth 3,604 cloths · search code or name (en / 中文)2281

searching

Pick a cloth

Cloth 3,604 cloths · search code or name (en / 中文)2281

multi-select

Pick a cloth

Cloth 3,604 cloths · search code or name (en / 中文)2281492281552281

recent picks

Pick a cloth

Cloth 3,604 cloths · search code or name (en / 中文)2281

creatable

Pick a cloth

TagsAutumn 2026 capsule

no match

Pick a cloth

Cloth 3,604 cloths · search code or name (en / 中文)2281

search failed

Pick a cloth

Cloth 3,604 cloths · search code or name (en / 中文)2281

Density

The phone shell is always comfortable (POWERUPS #15): 44px tap targets, 16px inputs. Compact exists on desktop only; see the desktop page.

comfortable · phone default

Cloth 3,604 cloths · search code or name (en / 中文)Search cloths

English · 中文

Staff pick en or cn (T001 Q25). Labels arrive localised; CJK falls back to PingFang SC / Noto Sans SC.

en

Cloth 3,604 cloths · search code or name (en / 中文)Search cloths

中文 · lang=zh-Hans

面料 3,604 种面料 · 搜索编码或名称（中/英）搜索面料

Long string · permission denied

The long-string case (PL-063) and what a role without the permission sees (the server decides; T003).

long string

Cloth 3,604 cloths · search code or name (en / 中文)oxford

permission denied

Cloth 3,604 cloths · search code or name (en / 中文)228149

Read only: changing the cloth needs edit orders.

Contract

The @rj/admin-kit API for this family. Mirrored in CONTRACT.md.

Export: Combobox · @rj/admin-kit
Props: query (async fn: search, page) · value · multiple · creatable · recentKey · renderOption · minChars
States: closed · typing · loading · results · empty · error · selected · multi · creatable · read-only
shadcn / Radix: Popover + Command (cmdk)
Package underneath: cmdk · @tanstack/react-query · use-debounce · @tanstack/react-virtual
Accessibility: combobox / listbox roles, aria-activedescendant; result count announced
API operations: admin.fabrics.index (search, per_page) · admin.orders.lookup · admin.pickers.account-options
Phone variant: full-screen picker sheet

Export: ClothPicker · @rj/admin-kit
Props: supplier facet · status · multiple
States: as Combobox + stock chip
Package underneath: Combobox + cloth row
API operations: admin.fabrics.index

Export: CommandPalette · @rj/admin-kit
Props: menu (from /me/menu) · quickSearch
shadcn / Radix: Dialog + Command
Package underneath: cmdk · react-hotkeys-hook
Accessibility: ⌘K / Ctrl K; Esc closes and returns focus
API operations: admin.dashboard.quick-search · admin.me.menu
Phone variant: search icon in the app bar, full screen