UX Patterns Guide
UI + UX Search, Browse, And Discovery standard

Search suggestions

Show relevant suggested queries or result hints tied to the current input, while preserving user control of the final query.

Open in lab Compare alternatives
Decision first

Choose this pattern when the problem matches

Use when

  • The system can predict likely queries.
  • Users benefit from vocabulary guidance.

Avoid when

  • Suggestions are low quality or biased toward irrelevant content.
  • The input is a constrained value better served by autocomplete.

Problem it prevents

Users need help forming a useful search query before they submit or while they refine it.

Pattern anatomy

What a strong implementation has to make clear

User need

Users may not know the exact wording used by the system.

Pattern promise

Show relevant suggested queries or result hints tied to the current input, while preserving user control of the final query.

Required state

No input state.

Recovery path

Stale suggestions after the query changes.

Access contract

Expose the suggestions list and active option.

Quality bar

The difference between expert and weak execution

Strong implementation

Specific, visible, recoverable

  • Suggestions appear directly below the search field with active row, readable labels, and optional matched text.
  • Recent, popular, or scoped suggestions are visually distinguished when mixed.
  • Users can keep typing, choose a suggestion, dismiss suggestions, or submit their own query.
  • Suggestions update with the current input and do not submit until confirmed.
Weak implementation

Vague, hidden, hard to recover from

  • Suggestions overlay unrelated content without a dismiss path.
  • Promoted results styled the same as typed query suggestions.
  • Auto-submitting the top suggestion.
  • Stale suggestions remain after query changes.
UI guidance
  • Render a search field with query suggestions, active option, selected suggestion, and no-suggestion state.
  • Keep suggestions visually tied to the current input.
UX guidance
  • Help users formulate better search queries without forcing a choice.
  • Preserve free-form typing and avoid submitting suggestions without confirmation.
Implementation contract

What the implementation must handle

States

  • No input state.
  • Typing state with suggestions.
  • Selected suggestion state.
  • No suggestion state.

Interaction

  • Suggestions update from the current input without replacing it unexpectedly.
  • Selecting a suggestion makes the resulting query clear.
  • Users can dismiss or continue typing.

Accessibility

  • Expose the suggestions list and active option.
  • Do not rely only on visual highlighting for matched text.
  • Arrow keys can move through suggestions.
  • Enter can choose a highlighted suggestion.

Review

  • Do suggestions help users express intent, or are they distracting from the search task?
Interactive lab

Inspect the states before you copy the pattern

Use query suggestions

Type a partial query, choose a suggestion, and inspect whether the query remains editable.

Search suggestions
Interactive demo is ready

Launch the live UI/UX lab when you want to inspect states, keyboard behavior, and common failure modes.

State To Inspect

No input state.

Keyboard / Access

Arrow keys can move through suggestions.

Avoid Generating

Auto-submitting the top suggestion without confirmation.
Evidence trail

Source-backed claims behind this guidance

Carbon Design System Search Pattern

IBM Carbon Design System - checked

Carbon search guidance supports recent searches, type-ahead suggestions, keyboard selection, Escape dismissal, and search result counts.

Full agent/debug reference

Problem Context

  • Users may not know the exact wording used by the system.
  • The product can produce useful suggestions from content, history, or taxonomy.

Selection Rules

  • Choose suggestions when guidance improves query formulation.
  • Keep suggestions relevant to the current input and scope.
  • Let users ignore suggestions and continue free-form search.

Required States

  • No input state.
  • Typing state with suggestions.
  • Selected suggestion state.
  • No suggestion state.

Interaction Contract

  • Suggestions update from the current input without replacing it unexpectedly.
  • Selecting a suggestion makes the resulting query clear.
  • Users can dismiss or continue typing.

Implementation Checklist

  • Debounce remote suggestions where needed.
  • Highlight matching text only when it helps recognition.
  • Keep keyboard and pointer selection equivalent.
  • Handle stale suggestion responses.

Common Generated-UI Mistakes

  • Auto-submitting the top suggestion without confirmation.
  • Showing unrelated promoted results as suggestions.
  • Overwriting typed text unexpectedly.

Critique Questions

  • Do suggestions help users express intent, or are they distracting from the search task?
Accessibility
  • Expose the suggestions list and active option.
  • Do not rely only on visual highlighting for matched text.
Keyboard Behavior
  • Arrow keys can move through suggestions.
  • Enter can choose a highlighted suggestion.
  • Escape dismisses suggestions while keeping input.
Variants
  • Recent searches
  • Popular searches
  • Scoped suggestions
  • Inline query suggestions

Verification

Last verified: