# Autocomplete (/docs/components/autocomplete)
## Overview [#overview]
Use autocomplete when users type into an input and need suggestions from a list.
Autocomplete is useful for search, people pickers, command-style inputs, tags, addresses, and large option sets. It keeps typing as the main action while making valid choices easier to find.
## Anatomy [#anatomy]
Autocomplete includes an input, popup, list, items, and optional clear or trigger controls. The input owns the typed value. The popup shows matching suggestions. Each item should have clear display text and a stable value.
## Behavior [#behavior]
Use local filtering for small lists. Use async search for remote data. Add a limit when the full list is large. Auto-highlight can speed up keyboard selection, but it should not surprise users by choosing an item before they confirm.
## Accessibility [#accessibility]
Provide a label through Field or another visible label. Keep keyboard navigation intact, including arrow keys, Enter, Escape, and focus return. Make empty and loading states clear when suggestions come from a server.
## Installation [#installation]
CLI
Manual
```bash
npx love-ui@latest add autocomplete
```
Install the following dependencies:
```bash
npm install @base-ui-components/react
```
Copy and paste the following code into your project.
Update the import paths to match your project setup.
## Usage [#usage]
```tsx
import {
Autocomplete,
AutocompleteEmpty,
AutocompleteInput,
AutocompleteItem,
AutocompleteList,
AutocompletePopup,
} from "@/components/ui/autocomplete"
```
```tsx
const items = [
{ value: "apple", label: "Apple" },
{ value: "banana", label: "Banana" },
{ value: "orange", label: "Orange" },
{ value: "grape", label: "Grape" },
]
No results found.
{(item) => {item.label}}
```
## API Reference [#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 [#examples]
These examples show disabled, sized, labeled, grouped, limited, async, and form-connected autocomplete patterns.
### Disabled [#disabled]
Use disabled when the user cannot search or choose yet.
### Small Size [#small-size]
Use the small size in compact toolbars, filters, or dense forms.
### Large Size [#large-size]
Use the large size when the input is a primary search or selection control.
### With Label [#with-label]
Use a label whenever the autocomplete appears in a form or settings area.
### Inline Autocomplete [#inline-autocomplete]
Autofill the input with the highlighted item while navigating with arrow keys.
### Auto Highlight [#auto-highlight]
Automatically highlight the first matching option.
### With Clear Button [#with-clear-button]
Use a clear button when users often need to reset the value.
### With Trigger and Clear Buttons [#with-trigger-and-clear-buttons]
Use a trigger button when users may want to browse options without typing.
### With Groups [#with-groups]
Use groups when suggestions have meaningful categories.
### With Limit Results [#with-limit-results]
Limit results to keep the popup quick to scan.
### Async Search [#async-search]
Use async search when suggestions come from an API or remote index.
### Form Integration [#form-integration]
Use form integration when the selected value must be validated and submitted.