Autocomplete

(Also called )

• Autosuggest

Overview

The Autocomplete is an interactive input component that help users quickly find and select values from a predefined list of options as they type.

They combine the flexibility of text input with dropdown-style selection, providing suggestions that match the user’s input in real-time. This pattern reduces errors, speeds up data entry, and improves the overall form completion experience.

Use Cases

When to use:

• When users need to select from a large set of predefined options (e.g., country selection, airport codes)
• When you want to help users find and select options more quickly than scrolling through a long dropdown
• When you want to reduce errors by guiding users to valid input options
• When the input has a finite set of valid responses that are known in advance
• When you want to combine free text input with suggestion functionality

When not to use:

• When there are fewer than 10 options (use a standard dropdown/select instead)
• When users need to enter completely free-form text without restrictions
• When all options need to be visible at once for comparison
• When network latency could significantly delay suggestion results
• When the input field requires exact, verbatim text entry (like passwords)

Common scenarios and examples

• [Example 1]
• [Example 2]
• [Example 3]

Benefits

• [Benefit 1]
• [Benefit 2]
• [Benefit 3]

Anatomy

Component Structure

1. Container

2. Input

3. Label

4. Clear Button

Best Practices

Content

Do’s ✅

• [Best practice 1]
• [Best practice 2]

Don’ts ❌

• [Anti-pattern 1]
• [Anti-pattern 2]

Accessibility & UX

Do’s ✅

• [Best practice 1]
• [Best practice 2]

Don’ts ❌

• [Anti-pattern 1]
• [Anti-pattern 2]

Visual Design

Do’s ✅

• [Best practice 1]
• [Best practice 2]

Don’ts ❌

• [Anti-pattern 1]
• [Anti-pattern 2]

Layout & Positioning

Do’s ✅

• [Best practice 1]
• [Best practice 2]

Don’ts ❌

• [Anti-pattern 1]
• [Anti-pattern 2]

Code Examples

Basic Implementation

<!-- Basic implementation example -->

SEO

• [SEO consideration 1]
• [SEO consideration 2]

Testing Guidelines

Functional Testing

Should ✓

• [Test case 1]
• [Test case 2]

Design Tokens

These design tokens follow the Design Tokens Format specification and can be used with various token transformation tools to generate platform-specific variables.

Autocomplete Tokens in DTF Format

{
  "$schema": "https://design-tokens.org/schema.json",
  "Autocomplete": {}
}

Resources

Articles

• 9 UX Best Practice Design Patterns for Autocomplete Suggestions by Baymard Institute
• Best Practices: Designing autosuggest experiences

Documentation

• WAI-ARIA: Combobox Pattern

Libraries

• [Library 1]
• [Library 2]