Forms & Input
Dropdown / Select
A dropdown is an input that keeps a set of choices hidden and reveals them as a list when you click its trigger, so you can pick just one.
Definition
A dropdown keeps a set of choices tucked away and reveals them as a list only when they're needed. On screen you see just one button, called the trigger, sitting quietly. When someone clicks it, the list of options opens downward. They pick one item, the list closes again, and the value they chose stays displayed in the trigger. Because the choices only appear on demand, a dropdown can hold plenty of options without crowding the layout, which is its biggest strength. In effect it trades screen space for the number of choices, so the real skill is knowing when to keep the list folded away and when it's better to leave the options visible.
Why does it matter?
A dropdown is an efficient way to save screen space when there are lots of choices. Think of a country or category picker with ten or twenty items. Show them all at once as radio buttons and the layout fills up with nothing but options. A dropdown folds that whole list behind a single trigger and keeps the screen tidy. The trade-off is that, because everything is hidden, people can't see what's available until they open it, and finding the right item means opening the list and scanning through it. So when there are only a few choices, or when people need to compare options side by side before deciding, a dropdown can actually get in the way. In the end you're weighing the space you save against the extra step of opening the list, and choosing the right input for the situation.
Common mistakes
- Using a dropdown when there are only two or three choices. With so few items, laying them out as radio buttons so people can see everything at a glance is the better move. Making someone open and close a menu just forces an unnecessary extra step on them.
- Not clearly showing the selected value or whether the menu is open or closed. If the chosen value doesn't stay in the trigger, or there's no arrow indicator, people may not even realize this is a menu they're supposed to click to open.
- Unfolding a list of dozens of options with no way to search. People have to scroll for ages to find the item they want, and along the way they get worn out, grab whatever's closest, or give up and leave.
Practical tips
- Reach for a dropdown once you have five or more options. With just a few, radio buttons are faster; the more choices you add, the more a dropdown pays off by folding them away and keeping the screen tidy.
- Always keep the current selection visible in the trigger, and show open and closed states with an arrow. Even a simple arrow that flips up and down tells people right away that this is a menu they can open and close.
- When there are a great many options, add a search field above the list. Instead of scrolling through dozens of items one by one, people can type a few letters to narrow things down and reach what they want far faster. For a fixed but long list like countries, that one line of search makes an especially big difference.