Select

Select lets a person pick one option from a list that's too long to show inline but short enough to scan in a popover (roughly 5–15 choices). It's a compound component: Select owns the value and open state, SelectTrigger is the button you see (it renders the shared field surface, so it carries the same appearance × size variants as Input and lines up with the rest of a form), and SelectContent is the portaled listbox of SelectItems — optionally organized with SelectGroup + SelectLabel.

Because it's built on Radix, the keyboard and ARIA model — typeahead, arrow navigation, aria-activedescendant, focus return — comes for free. Reach for Select when the choices are predefined and the user just needs to pick; if they need to search a long list, that's a Combobox, and if there are only two-to-five always-visible options, a RadioGroup reads better.

Give every SelectItem a unique, non-empty value. An empty string collides with the placeholder slot and will throw; use a real key. Keep the visible label short — the trigger truncates, and a wall of long options is hard to scan.

Use a placeholder for the empty state, a label for the name. SelectValue's placeholder says what to pick ("Choose a country"); it is not a substitute for an external label. Wire the field's accessible name with a Label or Form, the same as any other control.

Group only when it earns its keep. SelectGroup + SelectLabel help when options fall into a few clear buckets; for a flat list they add noise. Don't nest a Select inside another popover/menu — if you're tempted, the pattern probably wants a Command palette or a Combobox instead.