shadcn-syntax-selectors

What problem does it solve?

Prevents predictable UX and integration failures when selecting between shadcn UI’s four “value picking” primitives (Native <select>, shadcn Select/Radix Select, Combobox, and Command palette), especially when React Hook Form binding and accessibility contracts are easy to get wrong.

Core Features & Use Cases

• Decision tree for the right primitive: Chooses Native <select>, shadcn Select, Combobox, or Command palette based on list size, searchability/async loading needs, mobile-native picker expectations, and palette UX (Cmd+K).
• Correct form-binding contracts: Enforces that Native <select> uses react-hook-form register, while shadcn Select and Combobox use Controller (to avoid swallowed onValueChange / missing controlled state).
• Battle-tested wiring & a11y requirements: Guards against missing SelectValue, missing Popover modal=true in Combobox recipes, missing CommandDialog for palettes, and incorrect aria attributes for trigger/list behavior.
• Async combobox state handling: Ensures loading/empty/error states are mutually exclusive so users don’t see “No results” during an in-flight request.

Quick Start

Ask Claude to “Recommend the correct shadcn selector for a searchable async list bound to React Hook Form, and generate the correct component wiring and a11y attributes.”