Dropdown (UI)
A control that reveals a list on demand — either for selecting a value or for offering a menu of actions.
“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 )
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.