shadcn-syntax-selectors

Choose a shadcn Combobox for searchable or async-loaded option lists, and use a Radix Select for medium-to-large static lists where native search isn't required. A command palette serves app-wide Cmd+K actions rather than form fields.

React Hook Form works with shadcn Select, but you must use the Controller component instead of the register function. Using register with Radix-based Select or Combobox components causes onValueChange to be swallowed and controlled state to be lost.

Shadcn Combobox shows "No results" during async loading because loading, empty, and error states are not mutually exclusive. Proper async tri-state rendering ensures users see a loading indicator during in-flight requests instead of an empty results message.

The best way to handle command palette accessibility is to use the CommandDialog component and apply correct aria attributes for trigger and list behavior. This enforces the required component contracts for accessible app-wide action palettes.

You need a native HTML select element when mobile-native picker expectations are a priority. Native select elements use the react-hook-form register function for form binding, unlike shadcn Select components which require Controller.

A shadcn Combobox requires the Popover modal prop to be set to true. This prevents layout and interaction issues, ensuring the component contract is met when rendering searchable dropdowns within forms.