Autocomplete

An input with a list of filtered options that appear as the user types.

Newformoverlayinteractive

Loading preview...

Installation

npx baseui-cn add autocomplete

Usage

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

<Autocomplete>
  <AutocompleteInput placeholder="Search..." showTrigger showClear />
  <AutocompleteContent>
    <AutocompleteList>
      <AutocompleteItem value="next">Next.js</AutocompleteItem>
      <AutocompleteItem value="remix">Remix</AutocompleteItem>
      <AutocompleteEmpty>No results.</AutocompleteEmpty>
    </AutocompleteList>
  </AutocompleteContent>
</Autocomplete>

Note: Autocomplete differs from Combobox: the input is always editable and typing filters the list. Built on Base UI's Autocomplete primitive.

Examples

Basic

A minimal autocomplete with no trigger or clear button — type to filter a static list.

Loading preview...

With clear button

Combine showClear and startAddon to add a search icon and clear action to the input.

Loading preview...

Async

Debounce input changes, clear the list while fetching, and populate results when the search resolves.

Loading preview...

API

AutocompleteInput

Prop	Type	Default	Description
`showTrigger`	`boolean`	`false`	Show a chevron open/close trigger button at the trailing edge
`showClear`	`boolean`	`false`	Show an × clear button when the field has a value
`startAddon`	`React.ReactNode`	—	Icon or element rendered as a leading decoration inside the input
`size`	`"sm" \| "default" \| "lg"`	`"default"`	Height and padding scale of the input

AutocompletePopup

Prop	Type	Default	Description
`side`	`"top" \| "bottom" \| "left" \| "right"`	`"bottom"`	Side of the anchor the popup appears on
`sideOffset`	`number`	`4`	Distance in px between the popup and its anchor
`align`	`"start" \| "center" \| "end"`	`"start"`	Alignment relative to the anchor
`alignOffset`	`number`	—	Offset in px along the alignment axis
`anchor`	`React.RefObject`	—	Custom anchor element to position against

API Reference

See the Base UI Autocomplete documentation for the full API reference, including all props, data attributes, and CSS classes.