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

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:CompactComfortableLaravel · navyDTC · midnight green

Anatomy States Density EN · 中文 Edge cases Contract

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

Command palette (⌘K)

Server quick search across orders (admin.dashboard.quick-search) plus navigation built from /me/menu: only pages the role can open.

4521esc

Orders · quick-search

4521 · S. ChenManufacturing↵

4520 · P. SandovalManufacturing

Pages · from your menu

Orders › Order Print Jobs

Gantt › Order Map

↑↓ move ↵ open ⌘↵ new tab

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

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

searching

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

multi-select

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

recent picks

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

creatable

TagsAutumn 2026 capsule

no match

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

search failed

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

Density

Compact (2b ultra, the default) and comfortable, side by side. Same markup, only the density tokens change.

compact · default · data-density=compact

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

comfortable · data-density=comfortable

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.

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.

Both apps

One @rj/admin-kit component, two themes: the Laravel admin (navy pinned) and the DTC admin (kit v4 Midnight green), by token swap only.

Laravel admin · :root

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

DTC admin · data-theme=dtc

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

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

No cloth matches “2281x”