F1 component kit/Search and pickers/Swatch picker (PT colours)Desktop

Swatch picker (PT colours)

F1 variant22 · swatch-picker

PT colour tiles from the one backend matrix (Q23): code search, the selected tile, retired colours hidden by default (struck when shown).

Covers: swatch-picker primitive. Exports: SwatchPicker.

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.

Search code or colour
PT-0101NavyPT-0102BlackPT-0103Mid greyPT-0104TanPT-0105BurgundyPT-0106EcruPT-0107OlivePT-0108SkyPT-0109OxbloodPT-0110StonePT-0111BottlePT-0112Silver
Codes and colour names are example values (dotted rule); the matrix comes from admin.pt-colors.matrix.

States

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

selected
Search code or colour
PT-0101NavyPT-0102BlackPT-0103Mid greyPT-0104TanPT-0105BurgundyPT-0106EcruPT-0107OlivePT-0108SkyPT-0109OxbloodPT-0110StonePT-0111BottlePT-0112Silver
Codes and colour names are example values (dotted rule); the matrix comes from admin.pt-colors.matrix.
search
PT-01
PT-0101NavyPT-0102BlackPT-0103Mid greyPT-0104TanPT-0105BurgundyPT-0106EcruPT-0107OlivePT-0108SkyPT-0109OxbloodPT-0110StonePT-0111BottlePT-0112Silver
Codes and colour names are example values (dotted rule); the matrix comes from admin.pt-colors.matrix.
retired shown
Search code or colour
PT-0101NavyPT-0102BlackPT-0103Mid greyPT-0104TanPT-0105BurgundyPT-0106EcruPT-0107OlivePT-0108SkyPT-0109OxbloodPT-0110StonePT-0111BottlePT-0112Silver
Codes and colour names are example values (dotted rule); the matrix comes from admin.pt-colors.matrix.
no match
Search code or colour

No PT colour matches “PT-09”

Retired colours are hidden; switch them on to search them too.

Codes and colour names are example values (dotted rule); the matrix comes from admin.pt-colors.matrix.
loading
Search code or colour
Codes and colour names are example values (dotted rule); the matrix comes from admin.pt-colors.matrix.

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
Search code or colour
PT-0101NavyPT-0102BlackPT-0103Mid greyPT-0104TanPT-0105BurgundyPT-0106EcruPT-0107OlivePT-0108SkyPT-0109OxbloodPT-0110StonePT-0111BottlePT-0112Silver
Codes and colour names are example values (dotted rule); the matrix comes from admin.pt-colors.matrix.

English · 中文

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

en
Search code or colour
PT-0101NavyPT-0102BlackPT-0103Mid greyPT-0104TanPT-0105BurgundyPT-0106EcruPT-0107OlivePT-0108SkyPT-0109OxbloodPT-0110StonePT-0111BottlePT-0112Silver
Codes and colour names are example values (dotted rule); the matrix comes from admin.pt-colors.matrix.
中文 · lang=zh-Hans
搜索编码或颜色
PT-0101藏青PT-0102黑PT-0103中灰PT-0104棕褐PT-0105酒红PT-0106米白PT-0107橄榄PT-0108天蓝PT-0109牛血红PT-0110石色PT-0111墨绿PT-0112银灰
编码和颜色名为示例值；矩阵来自 admin.pt-colors.matrix。

Long string · permission denied

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

long string
Search code or colour
PT-0101Navy (thread + buttons + lining, primary binding at VBC)PT-0102BlackPT-0103Mid greyPT-0104TanPT-0105BurgundyPT-0106EcruPT-0107OlivePT-0108SkyPT-0109OxbloodPT-0110StonePT-0111BottlePT-0112Silver
Codes and colour names are example values (dotted rule); the matrix comes from admin.pt-colors.matrix.
permission denied
Search code or colour
PT-0101NavyPT-0102BlackPT-0103Mid greyPT-0104TanPT-0105BurgundyPT-0106EcruPT-0107OlivePT-0108SkyPT-0109OxbloodPT-0110StonePT-0111BottlePT-0112Silver
Pick only · editing bindings needs pt-colors:write
Codes and colour names are example values (dotted rule); the matrix comes from admin.pt-colors.matrix.

Contract

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

Export
SwatchPicker · @rj/admin-kit
Props
colours · value · excludeRetired · search
States
selected · retired · empty · loading · read-only
shadcn / Radix
RadioGroup (tiles)
Accessibility
radiogroup; each tile names code + colour
API operations
admin.pt-colors.matrix (exclude_retired) · admin.pt-colors.index
Phone variant
3-column grid