║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Autocomplete description: An input that suggests options as you type. links: docs: https://base-ui.com/react/components/autocomplete api: https://base-ui.com/react/components/autocomplete#api-reference

<ComponentPreview name="autocomplete-demo" />

Installation

<CodeBlockCommand component="autocomplete" />

Examples

Grouped Items

<ComponentPreview name="autocomplete-group" />

Limit Results

<ComponentPreview name="autocomplete-limit-results" />

Auto Highlight

<ComponentPreview name="autocomplete-auto-highlight" />

Clear

<ComponentPreview name="autocomplete-clear" />

Emoji Picker

<ComponentPreview name="autocomplete-emoji-picker" />

Migrating from Radix UI

<Steps> <Step> <include>migration-steps/common.mdx</include> </Step> </Steps>

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║