Build Assets
UI Component
Dropdown / Select
Single-choice selector for 5–15 options that would clutter the layout as radio buttons.
Platform: bothTags: dropdown, select, form, choice, menu
Purpose
Lets users choose one option from a list. Use when there are 5–15 options and space is constrained. Fewer than 5: use radio buttons (all visible). More than 15: use a searchable combobox.
Anatomy
- Trigger: full-width button showing current value, down-chevron right
- Placeholder: grey text when nothing selected ("Select an option")
- Dropdown panel: white card, 1px border, 8px radius, shadow-md
- Option items: 14px, 36–40px height, hover background
- Selected option: checkmark or accent text color
- Optional search input: at top of panel for 10+ options
States
- Closed: trigger button with current value or placeholder
- Open: panel visible below (or above if near viewport bottom), trigger focused
- Option hover: background highlight
- Selected: checkmark or accent color on active option
- Disabled: 40% opacity, no interaction
- Error: red border on trigger, error message below
Tokens
spacing
optionPadding: 8px 12pxpanelRadius: 8pxmaxHeight: 240px
sizing
triggerHeight: 40pxoptionHeight: 38px
Do
- Show the selected value in the trigger at all times
- Sort options logically: alphabetical, frequency, or natural order
- Add search input when list exceeds 10 items
- Close on Escape and on selection
Don't
- Use for 2–4 options — use radio buttons so all options are visible
- Use for navigation — use a nav component
- Require a "Select" placeholder without a default — force a conscious choice
- Open dropdowns that extend beyond the viewport without flipping position
Accessibility
- role="combobox" with aria-expanded and aria-haspopup="listbox"
- role="listbox" on the panel, role="option" on each item
- aria-selected="true" on the selected option
- Arrow keys navigate options; Enter selects; Escape closes
- Type-ahead: typing first letter jumps to matching option