Components

Dropdowns

Select menus and dropdown components — when to use them, how to design them, and when to use a different pattern instead.

#dropdown#select#menu#options#combobox#filter#sort

What is it?

A dropdown is a UI component that reveals a list of options when activated. It can be a native HTML select element or a custom component. Dropdowns are used for selection from a predefined set, navigation menus, action menus, and filter controls. They are frequently misused — often appearing where radio buttons, checkboxes, or a different pattern would serve better.

Why it matters

Dropdowns are one of the most overused components in UI design. They hide their options behind a click, requiring more effort than visible alternatives. Used correctly, they conserve space and handle large option sets. Used incorrectly (for 2-option selections, for critical choices on mobile), they add friction and confusion.

Best Practices

Use radio buttons instead of dropdowns when there are fewer than 5 options and space allows.
Dropdowns with more than 10 options need a search filter built in.
Never use a dropdown for yes/no or binary choices — use a toggle or radio buttons.
Label the dropdown clearly; don't use the first option as a label.
Provide a meaningful default or placeholder: "Select a country" not just a blank field.
Custom dropdowns must be keyboard-accessible (open on Space/Enter, navigate with arrows, close on Escape).
On mobile, native select elements often provide a better experience than custom dropdowns.
Multi-select dropdowns: show how many items are selected in the trigger ("3 selected"), not just an icon.
For action menus (kebab menus, more options), use a popover pattern, not a native select.
Grouped options should have visible group headers within the dropdown.

Common Mistakes

Using a dropdown for a 2-option binary choice (should be a toggle or radio buttons).
Dropdowns with 50+ options and no search functionality.
Using the first option as the label — it disappears when a selection is made.
Custom dropdowns that aren't keyboard-accessible.
Dropdowns that close when the user accidentally moves their mouse outside the menu area.
Size/variant dropdowns on product pages on mobile — creates misselection and returns.

Checklist

Dropdown is appropriate (>5 options, space-constrained)

Dropdowns with >10 options have search functionality

Binary/yes-no choices use radio buttons or toggles instead

Keyboard accessible: Space/Enter to open, arrows to navigate, Escape to close

Has a meaningful placeholder or default value

Multi-select shows count of selected items in trigger

Options are grouped with visible headers when there are categories

Mobile: native select used or custom dropdown is touch-friendly

Dropdown does not close on accidental mouse movement outside

Research & Theory

Luke Wroblewski's Research on Dropdowns

Luke W's extensive form design research found that dropdowns consistently perform worse than visible alternatives in user testing when the option count is small.

Why it's relevant

"If you can use something other than a dropdown, use it." Dropdowns should be the last option for small sets.

Real-World Examples

Notion

Database view filters use multi-select dropdowns with search. The trigger shows "3 filters" not just an icon. Keyboard-navigable.

Stripe Dashboard

Date range selector uses a custom dropdown with preset options (Last 7 days, Last 30 days) and a custom range option. Highly usable for a complex input.

Figma

Font selector is a dropdown with live search — necessary for hundreds of options. Auto-focuses search on open. No other pattern would work at this scale.