Combobox

A text input joined to a filtered list — for choosing from more options than anyone should have to scroll through.

UI Components

A 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 )

Related terms

All terms

Defined by Mara Bureau LLP. Last reviewed . Corrections: hello@mara.ink.

( You may ask )

Questions about Combobox

Didn’t find your answer?

Ask us directly — a designer replies within one business day.

Contact us
  • 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.

  • 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.

  • 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.

( Contact )

What problems are we solving?

At our core, we believe in delivering high-quality designs in days, not weeks.

What do you need?

( Contact )

What problems are we solving?

At our core, we believe in delivering high-quality designs in days, not weeks.

What do you need?