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

---

title: Autocomplete description: An input that suggests options as you type.

links: doc: https://base-ui.com/react/components/autocomplete#api-reference

<ComponentPreview name="autocomplete-demo" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

Installation

<CodeTabs> <TabsList> <TabsTab value="cli">CLI</TabsTab> <TabsTab value="manual">Manual</TabsTab> </TabsList> <TabsPanel value="cli">

npx shadcn@latest add @coss/autocomplete

</TabsPanel> <TabsPanel value="manual"> <Steps>

<Step>Install the following dependencies:</Step>

npm install @base-ui-components/react

<Step>Copy and paste the following code into your project.</Step>

<ComponentSource name="autocomplete" title="components/ui/autocomplete.tsx" />

<Step>Update the import paths to match your project setup.</Step>

</Steps> </TabsPanel> </CodeTabs>

Usage

import {
  Autocomplete,
  AutocompleteEmpty,
  AutocompleteInput,
  AutocompleteItem,
  AutocompleteList,
  AutocompletePopup,
} from "@/components/ui/autocomplete"

const items = [
  { value: "apple", label: "Apple" },
  { value: "banana", label: "Banana" },
  { value: "orange", label: "Orange" },
  { value: "grape", label: "Grape" },
]

<Autocomplete items={items}>
  <AutocompleteInput placeholder="Search..." />
  <AutocompletePopup>
    <AutocompleteEmpty>No results found.</AutocompleteEmpty>
    <AutocompleteList>
      {(item) => <AutocompleteItem key={item.value} value={item}>{item.label}</AutocompleteItem>}
    </AutocompleteList>
  </AutocompletePopup>
</Autocomplete>

API Reference

The AutocompleteInput component extends the original Base UI component with a few extra props:

| Prop | Type | Default | Description | | ------------- | --------------------------- | ----------- | ------------------------------------------------------------------------------------------------ | | size | "sm" \| "default" \| "lg" | "default" | The size variant of the input field. | | showTrigger | boolean | false | Whether to display a trigger button (chevron icon) on the right side of the input. | | showClear | boolean | false | Whether to display a clear button (X icon) on the right side of the input when there is a value. |

Examples

Disabled

<ComponentPreview name="autocomplete-disabled" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

Small Size

<ComponentPreview name="autocomplete-sm" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

Large Size

<ComponentPreview name="autocomplete-lg" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

With Label

<ComponentPreview name="autocomplete-with-label" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

Inline Autocomplete

Autofill the input with the highlighted item while navigating with arrow keys.

<ComponentPreview name="autocomplete-inline" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

Auto Highlight

Automatically highlight the first matching option.

<ComponentPreview name="autocomplete-autohighlight" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

With Clear Button

<ComponentPreview name="autocomplete-with-clear" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

With Trigger and Clear Buttons

<ComponentPreview name="autocomplete-with-trigger-clear" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

With Groups

<ComponentPreview name="autocomplete-grouped" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

With Limit Results

<ComponentPreview name="autocomplete-limit" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

Async Search

<ComponentPreview name="autocomplete-async" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

Form Integration

<ComponentPreview name="autocomplete-form" className="[&_.preview>*]:w-full [&_.preview>*]:max-w-64" />

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