Autocomplete

You might say

When someone types the first few letters, show suggestions and let them click one to finish the entry.

Show matching suggestions while the user typesAutocomplete works for addresses, contacts, and tags that have common answers but may still allow free text. The user can choose a suggestion or keep typing. If only listed values are valid, use a searchable Select instead.

Know first

Input Select

AutoComplete

Vibe Coding beginner guide VibeHub component guide Vibe design guidelines

Quick checkChoose the best answer

To invite Wang Xiaoming among thousands of employees, which interaction fits?

Accept arbitrary text and create a new employee with that nameOffer matching suggestions after typing, then select an existing employeePut every employee in one long Select

You can say this to an AI Agent

For member invite, query matching employees after at least two characters and send the invite only after a suggestion is selected. Test no result, same-name candidates, and keyboard selection: explain no result, distinguish duplicate names, and submit an employee id after selection.

Autocomplete≠Select

Autocomplete offers matches based on what someone types. Select needs no typing and chooses only from a fixed list.

Autocomplete≠Combobox

A combobox is the complete control of an input plus a popup option list. Autocomplete emphasizes the behavior of showing matches as someone types; component libraries often use the terms differently.

When to use it

Address entry
vibe
vibe coding basicsvibe-ui-guidevibe design guidelines
Contact lookup
oil-oil@
oil-oil@gmail.comoil-oil@qq.comoil-oil@163.com
Tag suggestions
🔍 Search components…
Recent searchesDate pickerForm validation
Search with likely matches
⌘ New
➕ New project📄 New document📁 New folder

When NOT to use it

Force a suggestion when free text should remain valid
All states
All statesIn progressCompletedExpired
Show unrelated results before enough text is entered
Province / City / DistrictGuangdong ProvinceShenzhenNanshan District
Change the typed value without clear confirmation
AllIn progressCompleted
Use it for a tiny fixed list
CityShenzhenx
Invalid values can still be submitted, affecting later reporting

Anatomy

vibe coding getting started guidevibe-ui-guide component illustration

The same type of field users type into for ordinary input

Updates suggestions as the user types

One suggestion; users can move through suggestions with the keyboard

Highlights matching keywords to show why the suggestion appears.

Variants

Search Suggest

vibe Getting started with codingvibe-ui-guide

Type candidate words in the search box

Email Suffix

alex.chen@gmail.comalex.chen@qq.com

Semi-fixed format input such as email and URL

History

🕘 date picker🕘 form validation

Allow users to reselect recently searched content with one click

Grouped

ComponentButtonDocumentationButton design guidelines

When candidates are from different types, group them by type for easier identification

Typical use cases

Address form

VibeHub 🔔

Button · Component Button guidelines · Documentation Radio button · Component

Mention a teammate

maya-lee@gmail.com maya-lee@qq.com

Tag editor

Shipping address

Building R2-B, South Area, Science and Technology Park, Nanshan District, Shenzhen Zone C, Shekou Sea World, Nanshan District, Shenzhen No. 12, Nanshan Street, Guangzhou

Search box

⌘ New

➕ New project 📄 New document

Want GPT or Codex?VibeHubGPT support

GPT-6 Astra

Build in 3D. Put your computer to work.