recognition-pickers-and-palettes

Match the control to the option count: toggles for 2 options, radio groups or segmented controls for 3-5, select dropdowns for 5-8, grouped selects for 8-20, comboboxes with type-ahead filtering for 20+, and search-first pickers for 100+ items.

Combine categorical groups (recents, actions, navigation) with search-as-you-type filtering, triggered by cmd-K or cmd-shift-P. Libraries like cmdk provide accessible React implementations following the pattern popularized by Sublime Text, VSCode, and Linear.

Radix, React Aria, Headless UI, cmdk, and Downshift all implement the WAI-ARIA combobox pattern with correct focus management, aria-expanded, aria-activedescendant, and keyboard navigation. Hand-rolling these behaviors is error-prone, so prefer a tested library.

The input likely requires recall instead of recognition: options are not shown on focus, there is no fuzzy matching for typos, or labels use internal names instead of user vocabulary. Show options on focus, add fuzzy filtering, and surface recents.

Use visual pickers for inherently visual content: a swatch grid for colors instead of hex codes, a calendar for dates instead of text entry, and a map for locations instead of latitude/longitude fields. Recognition of a visual target beats recalling a coded value.