Dropdown (UI)
A control that reveals a list on demand — either for selecting a value or for offering a menu of actions.
UI Components“Dropdown” covers two components that look alike and behave differently. A select holds a value: it has a current state, it appears in a form, and choosing changes data. A menu holds actions: it has no state, choosing does something immediately. Building one and using it for both produces menus that look like they remember a choice and selects that fire before anything is submitted.
For a select, the option count decides the pattern. Up to about five, radio buttons or a segmented control show everything at once and cost one click instead of two. From five to fifteen, a select is right. Past that, use a combobox. Native selects are also the case where platform default beats custom: they get mobile pickers, keyboard behaviour and accessibility for free, and custom replacements usually ship without them.
Nested menus are a smell
A menu that opens another menu is hard to hit with a mouse, worse on touch, and a sign the structure is doing navigation's job. Flatten it or move it into a page.
In practice
A CRM replaced its native selects with a custom component for visual consistency. Mobile completion on the lead form dropped 18% in a week: the custom list did not trigger the native picker and scrolled badly inside the sheet. Reverting to native selects with styling limited to the closed state restored it.
Where teams get it wrong
- One component used for both value selection and actions.
- Custom selects that drop keyboard support, type-ahead and the native mobile picker.
- A select for three options, where showing all three would have cost nothing.
- No default and no empty label, so the control shows the first option as if it were chosen.
- Nested submenus, which are unusable on touch.
Learn more
You may ask
Frequently Asked Questions
When should you use a dropdown instead of radio buttons?
Radio buttons up to about five options, because showing them all is faster and needs one click. A dropdown from roughly five to fifteen. Above that, a combobox with a text filter.
What is the difference between a select and a dropdown menu?
A select holds a value and belongs in a form; a menu offers actions and executes on choice. They are drawn similarly and should not share a component, or menus start looking like they remember a selection.
Should you use native select elements?
Usually yes. Native selects bring keyboard behaviour, type-ahead and mobile pickers at no cost. Replace one only when you genuinely need multi-select, icons or grouping that the native element cannot express.
Related terms
All terms- ComboboxA text input joined to a filtered list — for choosing from more options than anyone should have to scroll through.
- Segmented ControlA small row of mutually exclusive options that switches how a view is shown, not what it contains.
- Radio ButtonA control for choosing exactly one option from a visible, mutually exclusive set.
- Form DesignDesigning the fields, sequence, validation and error handling of a form so people can finish it without stopping to think.
Defined by Mara Last reviewed .
Let's talk about your product.
Happy to look at what you're building and say where design would move the needle.
Contact Us