Select
Dropdown select built on Radix Select. Supports keyboard navigation, typeahead, and portal rendering. Use for simple single-value dropdowns; use Combobox for searchable or multi-select.
Basic
Uncontrolled select with a placeholder. Value is managed internally.
Controlled
Controlled value with onValueChange callback.
Selected: banana
Sizes
Same sm / md / lg vocabulary as Button, with matching heights (h-8 / h-10 / h-11) so a Select lines up with a Button on the same row. Compact-first: sm is the default; reach for md/lg on prominent surfaces. Text steps 12 → 14 → 16 on the closed type scale.
Sizes with icons
Option icons render in the trigger and scale with the select size, matching the Button size scale (h-8 / h-10 / h-11).
With icons
Options can include a leading icon ReactNode — but only when icons differentiate the options (here: Email / Phone / Website). If every option would carry the same icon, drop icons entirely; a uniform icon is decorative noise.
With descriptions
A second line under each label, in the open list only — the trigger stays one line showing the chosen label. Use it when the labels alone can't be told apart (a conversion event's definition and volume, a plan's price, a role's permissions), not to restate the label. It is secondary by construction — smaller, subtler, clamped to two lines — so an option that needs it to be understood at all is better re-labelled.
Error state
Pass an error string to show validation feedback below the trigger.
Disabled
Disabled state prevents interaction.
Disabled option
Individual options can be disabled.