semantic pattern · Selection and suggestions

Combobox

An input or selection control with an associated popup that presents allowed or suggested values.

reviewpublishedV1 field note

Decisive boundary

Autocomplete describes how suggestions respond to input; Combobox is the broader widget pattern.

Definition and intent

What is a Combobox UI pattern?

Use the behavior, not the silhouette

An input or selection control with an associated popup that presents allowed or suggested values. The term is used here as a semantic pattern whose role and interaction contract carry more meaning than its appearance. That distinction prevents a visual resemblance from silently deciding focus, keyboard, modality, or dismissal behavior.

Let users find or enter a value with help from an associated suggestion popup. A good implementation preserves that job while making the trigger, open state, close path, and responsive behavior observable to users.

Know when the label is wrong

The fastest way to identify a pattern is often to reject the nearest alternative. For Combobox, the boundary is: Autocomplete describes how suggestions respond to input; Combobox is the broader widget pattern.

Do not implement it as Select when typing adds no value, and Dropdown Menu when items are commands rather than values. If those requirements describe the real task better, use the related pattern page or the full Selection and suggestions comparison before writing code.

Decision process

Decide before choosing a component

Record these requirements in plain language. A library component name is not a substitute for the contract.

Confirm the user job

Let users find or enter a value with help from an associated suggestion popup.

Define opening and closing

Typing, focus, an open button, or arrow keys depending on configuration. Selection, Escape, focus change, or no matching suggestions.

Specify access behavior

DOM focus usually remains on the input while active descendant identifies a suggestion. Arrow keys explore suggestions, Enter accepts, Escape closes, and text editing keys remain intact.

Reject the near miss

Select when typing adds no value, and Dropdown Menu when items are commands rather than values.

Behavior contract

What must survive the build

trigger: Typing, focus, an open button, or arrow keys depending on configuration.
dismissal: Selection, Escape, focus change, or no matching suggestions.
modality: Non-modal.
focus: DOM focus usually remains on the input while active descendant identifies a suggestion.
keyboard: Arrow keys explore suggestions, Enter accepts, Escape closes, and text editing keys remain intact.
interactive: Users edit text and choose or confirm a value according to constraints.
persistence: The accepted value remains in the input.
placement: Popup is associated with the input.
mobile: Keep the input visible above the virtual keyboard and make options touch-friendly.

Failure modes

Common wrong builds

Stealing standard text editing keys.
Moving DOM focus unpredictably.
Failing to expose expanded state and the popup relationship.

Observable checks

Verify the result

The input has an accessible name.
Expanded state is exposed.
Arrow keys reach suggestions.
Enter accepts the intended value.
Escape closes without corrupting text.
Value constraints are clear.

Coding-agent handoff

Implementation brief template

Pattern: Combobox
Purpose: Let users find or enter a value with help from an associated suggestion popup.
Trigger: Typing, focus, an open button, or arrow keys depending on configuration.
Dismissal behavior: Selection, Escape, focus change, or no matching suggestions.
Modality: Non-modal.
Focus behavior: DOM focus usually remains on the input while active descendant identifies a suggestion.
Keyboard behavior: Arrow keys explore suggestions, Enter accepts, Escape closes, and text editing keys remain intact.
Interactive content: Users edit text and choose or confirm a value according to constraints.
Placement: Popup is associated with the input.
Mobile behavior: Keep the input visible above the virtual keyboard and make options touch-friendly.
Do not implement as: Select when typing adds no value, and Dropdown Menu when items are commands rather than values.
Acceptance checks:
- The input has an accessible name.
- Expanded state is exposed.
- Arrow keys reach suggestions.
- Enter accepts the intended value.
- Escape closes without corrupting text.
- Value constraints are clear.

Claim-level references

Sources, not a confidence score

01Combobox PatternW3C WAI-ARIA Authoring Practices · Official accessibility guidance

Editable and select-only combobox behavior

Frequently asked questions

Combobox UI pattern questions

Direct answers based on the reviewed behavior contract above.

What is a Combobox in web UI?

An input or selection control with an associated popup that presents allowed or suggested values. In this reference set it is a semantic pattern whose role and interaction contract carry more meaning than its appearance.

When should I use a Combobox?

Let users find or enter a value with help from an associated suggestion popup. The decisive boundary to confirm is this: Autocomplete describes how suggestions respond to input; Combobox is the broader widget pattern.

What keyboard and focus behavior does a Combobox need?

Arrow keys explore suggestions, Enter accepts, Escape closes, and text editing keys remain intact. DOM focus usually remains on the input while active descendant identifies a suggestion. These statements describe the reviewed expectation, but the final implementation still needs testing in the component library and browser you ship.

How should a Combobox behave on mobile?

Keep the input visible above the virtual keyboard and make options touch-friendly. Its modality is a separate requirement: Non-modal.

How do I verify a Combobox implementation?

Start with observable checks: The input has an accessible name. Expanded state is exposed. Arrow keys reach suggestions. Then verify the remaining checks and compare the result with the linked source guidance.