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

---

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

<ComponentPreview name="autocomplete-demo" />

Installation

<InstallationTabs> <InstallationTabsList> <InstallationTabsTrigger value="cli">CLI</InstallationTabsTrigger> <InstallationTabsTrigger value="manual">Manual</InstallationTabsTrigger> </InstallationTabsList> <InstallationTabsContent value="cli"> <CodeBlockTabs> <CodeBlockTabsList> <CodeBlockTabsTrigger value="npm">npm</CodeBlockTabsTrigger> <CodeBlockTabsTrigger value="pnpm">pnpm</CodeBlockTabsTrigger> </CodeBlockTabsList> <CodeBlockTab value="npm">

npx shadcn@latest add @roiui/autocomplete

npx shadcn@latest add @roiui/autocomplete-tailwind

</CodeBlockTab> <CodeBlockTab value="pnpm">

pnpm dlx shadcn@latest add @roiui/autocomplete

pnpm dlx shadcn@latest add @roiui/autocomplete-tailwind

</CodeBlockTab> </CodeBlockTabs> </InstallationTabsContent> <InstallationTabsContent value="manual" data-manual="true">

Copy and paste the following files:

<ComponentSource name="autocomplete" />

</InstallationTabsContent> </InstallationTabs>

Anatomy

<CodeBlock filename="anatomy" language="tsx" code={`<Autocomplete> <AutocompleteInput /> <AutocompleteTrigger /> <AutocompleteIcon /> <AutocompleteClear /> <AutocompleteValue />

<AutocompletePortal>
    <AutocompleteBackdrop />
    <AutocompletePositioner>
        <AutocompletePopup>
            <AutocompleteArrow />
            <AutocompleteStatus />
            <AutocompleteEmpty />

            <AutocompleteList>
                <AutocompleteRow>
                    <AutocompleteItem />
                </AutocompleteRow>
                <AutocompleteSeparator />
                <AutocompleteGroup>
                    <AutocompleteGroupLabel />
                    <AutocompleteCollection />
                </AutocompleteGroup>
            </AutocompleteList>
        </AutocompletePopup>
    </AutocompletePositioner>
</AutocompletePortal>

</Autocomplete> `} />

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