Combobox
A text input joined to a filtered list — for choosing from more options than anyone should have to scroll through.
UI ComponentsA combobox is an input and a listbox working together: the user types, the list narrows, and they pick. It exists for the case a plain select cannot handle — hundreds or thousands of options, where scrolling is not a realistic way to find one. Countries, currencies, tickers, accounts, cities, customers.
Most of the design work is in the filtering, not the component. Does it match from the start of the string or anywhere inside it? Does “usa” find “United States”? Does it tolerate a typo, and does it rank exact matches above partial ones? Does it handle no matches with something better than an empty box? These answers decide whether the control feels sharp or broken, and none of them are visible in a design file.
Combobox vs dropdown vs autocomplete
A dropdown shows a fixed list and does not accept typing — right up to roughly ten options. A combobox adds a text filter over a known set of options. Autocomplete usually means the same interaction over a search query rather than a constrained list, where free text is a valid answer.
In practice
A payments product used a native select for 190 countries. Support saw repeated cases of users in the United Kingdom selecting “United States” — adjacent in the list, and scrolling on a trackpad overshoots. A combobox with prefix-and-substring matching removed that class of error and cut average time on the field from 9 seconds to under 2.
Where teams get it wrong
- Prefix-only matching, so “kingdom” finds nothing in “United Kingdom”.
- No empty-results state, leaving a blank panel where an explanation should be.
- Filtering thousands of options client-side without debouncing, which janks on every keystroke.
- No keyboard support — arrow keys to move, Enter to select, Escape to close are the minimum.
- Allowing free text where only a listed option is valid, producing values the backend rejects later.
Learn more
You may ask
Frequently Asked Questions
What is the difference between a combobox and a dropdown?
A dropdown presents a fixed list to pick from; a combobox pairs the list with a text input that filters it. Use a dropdown up to around ten options and a combobox when scrolling is no longer a sensible way to find one.
When should you use a combobox instead of a select?
Once the option count passes roughly 15–20, or whenever people already know the value they want and typing three characters is faster than hunting for it.
Should a combobox allow values that are not in the list?
Only if the underlying data accepts them. Allowing free text against a constrained set produces entries that pass the form and fail on the server, which is worse than rejecting them at the field.
Related terms
All terms- Dropdown (UI)A control that reveals a list on demand — either for selecting a value or for offering a menu of actions.
- Input FieldThe control a person types into — the most-used element in most products and the one where small decisions cost the most.
- Search (UI)The search control and the results behind it — where people go when they know what they want and cannot find it.
- Filter (UI)Controls that narrow a set of records — and the much harder job of keeping what was narrowed visible.
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