--- title: "Combobox UI: anatomy, variants and examples | Kombai" description: "A combobox is a text field with a list of options that narrows as people type, so they can find one value among many." canonical_url: https://kombai.com/glossary/combobox/ author: "The Kombai Team" --- # Combobox A combobox is a text field with a list of options that narrows as people type, so they can find one value among many. - Also called: autocomplete, typeahead, searchable select - Platforms: Web, Mobile - [Bellbuoy](https://kombai.com/gallery/inspirations/search-bar-ios-13/) (Mobile) - [Halden Business](https://kombai.com/gallery/inspirations/search-web-11/) (Web) - [Gridwell](https://kombai.com/gallery/inspirations/suggestions-similar-items-web-41/) (Web) ## What is a combobox? A combobox pairs a text input with a list of suggestions. As people type, the list keeps only the options that match, often with the matching letters in bold. They pick one with a tap, a click or the arrow keys and Enter, and it fills the field. Also called autocomplete or typeahead. - The list filters with every keystroke and says so when nothing matches. - Focus stays in the text field while the arrow keys move through the list. ## When to use combobox - **Long lists of known values.** Countries, cities, airports and banks, where scrolling a select would take too long. - **Picking people.** Recipients, assignees and teammates found by typing part of a name. - **Search with suggestions.** Completing a query or jumping to a product before the full search runs. ## When not to use one - **Short lists.** Under a few dozen options, a select or radio buttons are quicker to scan. - **Free text with no list.** If there is nothing to suggest, a plain text field is enough. - **Running commands.** A keyboard-first launcher for actions is a command palette. ## Anatomy 1. **Label**: Says what to look for 2. **Input**: Where people type 3. **Suggestion list**: Narrows as they type 4. **Matched text**: The typed letters, in bold 5. **Clear button**: Empties the field 6. **States**: Empty, typing, no match, picked ## Variants We sorted the combobox designs in the Kombai gallery into five patterns. ### 1. Search suggestions Completed queries listed under a search field, updating with each letter people type. - [Moraven](https://kombai.com/gallery/inspirations/search-bar-web-1/) (Web) - [Halcyon Audio](https://kombai.com/gallery/inspirations/search-ios-23/) (Mobile) - [Bramblewick](https://kombai.com/gallery/inspirations/search-bar-ios-16/) (Mobile) ### 2. Place and address lookups Typing a street or a place name lists matching places, often with a second line for the town or region. - [Kestrel](https://kombai.com/gallery/inspirations/search-ios-13/) (Mobile) - [Skerrivik](https://kombai.com/gallery/inspirations/search-bar-ios-4/) (Mobile) - [Murmur](https://kombai.com/gallery/inspirations/search-web-23/) (Web) ### 3. Multi-select with chips Each pick becomes a removable chip in the field, and the input stays open for the next one. - [Feldspire](https://kombai.com/gallery/inspirations/search-bar-ios-25/) (Mobile) - [Ravel](https://kombai.com/gallery/inspirations/checkout-web-147/) (Web) - [Warpline](https://kombai.com/gallery/inspirations/dialog-web-8/) (Web) ### 4. Recipient pickers A To field in a new message or group, with suggested people below and picked names as chips. - [Bluehour](https://kombai.com/gallery/inspirations/avatar-ios-24/) (Mobile) - [Perch](https://kombai.com/gallery/inspirations/suggestions-similar-items-web-26/) (Web) - [Corvid](https://kombai.com/gallery/inspirations/add-and-create-ios-24/) (Mobile) ### 5. Searchable pickers A filter field at the top of a popover or dialog, over a list of sources, assignees or institutions. - [Angelvine](https://kombai.com/gallery/inspirations/search-bar-web-36/) (Web) - [Oakhelm](https://kombai.com/gallery/inspirations/crm-web-41/) (Web) - [Brimhaven](https://kombai.com/gallery/inspirations/dialog-web-109/) (Web) ## Where comboboxes show up ### Shop search Suggested queries and products open under the search field as soon as people start typing. - [Vitrine](https://kombai.com/gallery/inspirations/search-web-24/) (Web) - [Nimbra](https://kombai.com/gallery/inspirations/search-web-19/) (Web) - [Solva](https://kombai.com/gallery/inspirations/search-ios-15/) (Mobile) ### Known values in forms A home airport, a region or a service area picked from matches, so the form gets a value it recognizes. - [Wayfare](https://kombai.com/gallery/inspirations/search-web-30/) (Web) - [Bramblewick](https://kombai.com/gallery/inspirations/search-bar-web-18/) (Web) - [Godwit](https://kombai.com/gallery/inspirations/search-bar-web-11/) (Web) ### Adding people Finding a neighbor, a payee or a teammate by name, with near matches when the spelling is off. - [Colmere](https://kombai.com/gallery/inspirations/search-bar-web-23/) (Web) - [Havenpay](https://kombai.com/gallery/inspirations/search-web-34/) (Web) - [Kestrel](https://kombai.com/gallery/inspirations/invite-and-refer-friends-ios-39/) (Mobile) ## Combobox vs similar components | | [Combobox](https://kombai.com/glossary/combobox/) | [Select](https://kombai.com/glossary/select/) | [Search bar](https://kombai.com/glossary/search-bar/) | |---|---|---|---| | People | Type, then pick | Open, then pick | Type, then submit | | Result | One value from the list | One value from the list | A page of results | | Best for | Long lists and people | Short, fixed lists | Finding content | ## Build notes - Give the input role="combobox", aria-expanded and aria-controls pointing at a role="listbox" list. - Keep focus in the input and move the highlight with aria-activedescendant, so people can keep typing. - Down Arrow opens the list and moves down, Enter picks the highlighted option, and Escape closes the list. - Set aria-autocomplete="list" when the list filters, and announce the number of matches in a live region. - Show a "No matches" row instead of an empty list, and keep what people typed when nothing matches. - Debounce server lookups by a couple of hundred milliseconds, and show stale results rather than flashing an empty list. ## FAQ ### What's the difference between a combobox and a select? A select opens a list to scroll; a combobox lets people type to narrow the list first. Both end with one value from the list. Pick a select for short lists and a combobox when the list is long or people know what they want. ### Is autocomplete the same as a combobox? Mostly. "Combobox" is the accessibility name for the pattern: an input plus a popup of options. Autocomplete and typeahead describe what it does. A search box with suggestions is a combobox too. ### Should the first suggestion be highlighted automatically? Only when Enter should pick it, like in an address or city lookup. In search, leave nothing highlighted, so Enter runs the search for exactly what was typed. ### Can people enter a value that is not in the list? It depends on the field. For a country or an assignee, only list values make sense, so treat other text as unfinished. For tags or search queries, let people keep their own text and offer it as an option, like "Add 'kayaking'". ## Related terms - [Select](https://kombai.com/glossary/select/) - [Search bar](https://kombai.com/glossary/search-bar/) - [Text field](https://kombai.com/glossary/text-field/) - [Filter chips](https://kombai.com/glossary/filter-chips/) ## References - [WAI-ARIA Authoring Practices: Combobox pattern](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) - [MDN: ARIA combobox role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/combobox_role) - [MDN: The datalist element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist)