Web UI Playbook

Combobox

Searchable select component for efficient option selection

Edit this file
Purpose of Comboboxes
Understanding the core purpose and benefits of combobox components in user interfaces.

Efficient Search

Enable users to quickly find options from large datasets through real-time filtering and search.

Flexible Input

Combine the benefits of free text input with the convenience of predefined selection options.

Space Efficiency

Provide access to many options without consuming interface space until activated.

Core Functions

Filter Large Lists:

Help users navigate through extensive option sets with instant search filtering

Enable Multi-Selection:

Support selecting multiple values with visual tag representation

Provide Suggestions:

Offer autocomplete and predictive options to speed up data entry

Maintain Context:

Keep users in their current workflow while providing rich selection options

When to Use Comboboxes
Understanding the appropriate contexts for combobox components.
Use Comboboxes When:
  • • You have 10+ options that benefit from search
  • • Users need to find specific items quickly
  • • Supporting both selection and free text input
  • • Implementing tagging or multi-selection
  • • Working with dynamic or remote data
  • • Users are familiar with the option set
Avoid Comboboxes When:
  • • You have fewer than 5-7 simple options
  • • Users need to see all options at once
  • • Options are unfamiliar to users
  • • No search functionality is needed
  • • Mobile-first interfaces with limited space
  • • Simple yes/no or on/off selections

Combobox vs Alternatives

Combobox vs Select Dropdown:

Use comboboxes for searchable large lists (10+). Use select dropdowns for small, well-known option sets where users benefit from seeing all choices.

Combobox vs Autocomplete:

Use comboboxes for structured selection from known options. Use autocomplete for free-form input with helpful suggestions.

Combobox vs Radio/Checkbox Groups:

Use comboboxes for large option sets requiring search. Use radio/checkbox groups for small sets where all options should be visible simultaneously.

Single SelectChoose One Option
Standard combobox for selecting a single value from a searchable list

Select your country from the list

Best for:

  • • Country/region selection
  • • Category selection
  • • User assignment
  • • Status selection
Multi SelectChoose Multiple Options
Tag-based combobox for selecting multiple values with visual feedback

Select multiple technologies you work with

Best for:

  • • Skills and tags
  • • Category filtering
  • • Permission assignment
  • • Multi-criteria selection
Combobox vs Alternatives
Understanding when to use combobox over other input components
ComponentOptions CountSearchCustom InputUse Case
Combobox10+ options✅ Yes✅ OptionalLarge datasets, search required
Select2-10 options❌ No❌ NoFixed options, clear choices
AutocompleteAny✅ Yes✅ YesFree text with suggestions
Radio Group2-5 options❌ No❌ NoAlways visible options
Core Features
Essential functionality and interaction patterns

Real-time Search

Filter options instantly as users type, with case-insensitive matching across multiple fields.

Keyboard Navigation

Full keyboard support with arrow keys, Enter selection, and Escape to close for accessibility.

Multi-selection

Support for multiple value selection with visual tag representation and easy removal.

References & Resources
Essential resources for combobox component implementation and accessibility.
Adobe Spectrum - Combo Box
Apple HIG - Combo Boxes
Shopify Polaris - Combobox
Visa Design System - Combobox Accessibility
eBay Design System - Combobox
Pinterest Gestalt - Combobox