Autocomplete

Text field with filtered suggestions. Prefer Combobox when selecting a closed set of values; use Autocomplete for freeform input with hints.

Examples

Overview

Pass items to the root and render a filtered list in the popup. The input stays editable; choosing an item fills the field.

tsx

import {
  Autocomplete,
  AutocompleteInputGroup,
  AutocompleteInput,
  AutocompleteClear,
  AutocompletePortal,
  AutocompletePositioner,
  AutocompletePopup,
  AutocompleteEmpty,
  AutocompleteList,
  AutocompleteItem,
} from "@standard-ui/react"

<Autocomplete items={tags}>
  <AutocompleteInputGroup>
    <AutocompleteInput placeholder="Search tags…" />
    <AutocompleteClear />
  </AutocompleteInputGroup>
  <AutocompletePortal>
    <AutocompletePositioner>
      <AutocompletePopup>
        <AutocompleteEmpty>No tags found.</AutocompleteEmpty>
        <AutocompleteList>
          {(item) => (
            <AutocompleteItem key={item} value={item}>
              {item}
            </AutocompleteItem>
          )}
        </AutocompleteList>
      </AutocompletePopup>
    </AutocompletePositioner>
  </AutocompletePortal>
</Autocomplete>

Usage

Items

Infer item type from items. List children can be a render function over each item.

tsx

<Autocomplete items={tags}>
  <AutocompleteList>
    {(item) => (
      <AutocompleteItem key={item} value={item}>
        {item}
      </AutocompleteItem>
    )}
  </AutocompleteList>
</Autocomplete>

Auto highlight

Set autoHighlight so the first match highlights as the user types.

tsx

<Autocomplete items={tags} autoHighlight>

API

Parts mirror Base UI Autocomplete. Common parts:

Part	Role
Autocomplete	Root state, items, and filter behavior.
AutocompleteInputGroup	Styled shell for input, clear, and trigger.
AutocompleteInput	Editable text field.
AutocompletePopup	Suggestion surface with list and empty state.
AutocompleteItem	Selectable suggestion row.