Dropdown vs. Select vs. Combobox
A dropdown menu runs actions. A select picks from a fixed list. A combobox also lets you type or search.
Use a menu for actions. Use a select for a short fixed list. Use a combobox for a long or searchable list.
See what each pattern does
Try each example. Then read about the job it is made to do.
Dropdown & Context Menu — Learning Bundle
This learning bundle compares menus by how they open. A dropdown opens from a control. A context menu belongs to one object and often opens at the pointer. The bundle is not one standard menu term.
DropdownMenu / ContextMenuThe More button opens general actions. Right-clicking a file opens actions only for that file.
- Use it when
- Choose a menu whose trigger and object fit the task. Then build its keyboard behavior.
- Do not use it when
- Never put form fields or the main site navigation inside a command menu.
- Name used in code
DropdownMenu / ContextMenu
Select
A select opens a fixed list and lets a person choose one value.
A country field shows a fixed list and rejects values outside it.
- Use it when
- Use it when the list is fixed, not too long, and the page has little space.
- Do not use it when
- Never use it for a long list people need to search. Use a combobox instead.
- Name used in code
<select> / role="listbox"
Editable Combobox
An editable combobox is a text field joined to a list that filters as you type.
Type “Tai” to show Taipei and Tainan. Then use the arrow keys to choose.
- Use it when
- Use it for long searchable lists, autocomplete, or choices that allow a custom answer.
- Do not use it when
- Never call a plain menu or a native select a combobox because they work differently.
- Name used in code
role="combobox" + aria-controls
Quick comparison
| UI pattern | Best for | Not for | Name used in code |
|---|---|---|---|
| Dropdown & Context Menu — Learning Bundle | Choose a menu whose trigger and object fit the task. Then build its keyboard behavior. | Never put form fields or the main site navigation inside a command menu. | DropdownMenu / ContextMenu |
| Select | Use it when the list is fixed, not too long, and the page has little space. | Never use it for a long list people need to search. Use a combobox instead. | <select> / role="listbox" |
| Editable Combobox | Use it for long searchable lists, autocomplete, or choices that allow a custom answer. | Never call a plain menu or a native select a combobox because they work differently. | role="combobox" + aria-controls |
Before you ship
- 01
Write down what the person needs to do.
- 02
Test the keyboard, focus, touch, zoom, loading, empty, and error states.
- 03
Make sure people can get the same information without hover or motion.
- 04
Test with real content on both small and large screens.
Comparison request you can copy
Copy this when your team needs help choosing between the patterns.
Choose the best pattern from Dropdown & Context Menu — Learning Bundle, Select, Editable Combobox for our real user flow. Use this rule: A dropdown menu runs actions. A select picks from a fixed list. A combobox also lets you type or search. Write down the task, amount of content, and cost of stopping the flow. Check keyboard, touch, loading, error, and reduced-motion behavior. Explain your choice, then build the smallest accessible version with the project's design system.