Component · Inputs · 08
Select
Select = a trigger, a menu, a selected item, and an empty state; four parts, not one dropdown box.
Workspace
Open list
What is a Select?
A select is a trigger plus a list. Name chevron, selected value, menu elevation, and keyboard behavior.
Variants
Tap a property to highlight it in the preview.
- A select that picks exactly one value from its menu.
- A select whose menu includes a filter field for long lists.
- The control that opens the menu.
- The floating list of options shown after the trigger is activated.
- The currently chosen value or tab, marked distinctly from the rest.
- The small arrow that signals the control is expandable.
States
Tap a property to highlight it in the preview.
- The resting, valid state of a field before any input or error.
- The expanded state of a menu, dropdown, or dialog while it is visible.
- The currently chosen value or tab, marked distinctly from the rest.
Anatomy
These are the parts to name in your prompt.
- 01 Trigger
- 02 Chevron
- 03 Menu
- 04 Selected item
When to use
- Choosing one value from a known list
- Filtering dashboards and tables
- Settings forms — workspace, timezone, role
Avoid when
- Fewer than 3 options — use a Radio group
- Free-text input — use an Input
- Multi-select of many items — use checkboxes
See also
Themes
Finance Dashboard→Anti-patterns
Removed Focus Ring→ Create a select menu.
STYLE
- 12px radius trigger, 8px menu offset
COMPONENTS
- trigger, chevron, list, selected check
TECHNICAL
- React
- Tailwind CSS
- shadcn/ui