Use when implementing expand and collapse content sections.
Use when implementing user account configuration and preferences.
Use when implementing social activity and updates stream.
Use when implementing conversational AI chat interfaces.
Use when implementing handling AI-specific errors.
Use when implementing loading states for AI operations.
| name | autocomplete |
| description | Use when implementing suggest options as users type. |
| metadata | {"id":"autocomplete","category":"forms","pattern":"Autocomplete","source":"uxpatterns.dev","url":"https://uxpatterns.dev/patterns/forms/autocomplete","sourcePath":"apps/web/content/patterns/forms/autocomplete.mdx"} |
Suggest options as users type
Autocomplete helps users quickly find and select values from predefined options as they type. Autocomplete combines text input flexibility with dropdown-style selection, providing real-time suggestions matching user input. This pattern reduces errors, speeds data entry, and improves form completion.
references/pattern.md, then choose the smallest viable variation.role="combobox", aria-expanded, aria-controls).ArrowUp/ArrowDown, Enter, Escape, and Tab.aria-activedescendant and stable option IDs.For full implementation detail, examples, and testing notes, see references/pattern.md.
Pattern page: https://uxpatterns.dev/patterns/forms/autocomplete