Autocomplete

A text input with suggestions; the value is whatever the user types.

When to use

Use when: People type free text and suggestions help, such as a search box or a tag input.
Avoid when: The value must be one of a fixed list; use Combobox or Select.

Installation

bunx shelf add autocomplete

The source lands in src/components/ui/autocomplete.tsx, along with any Shelf items it builds on, and .shelf/lock.json records what was installed. It's yours to edit.

Usage

import * as Autocomplete from "@/components/ui/autocomplete";

<Autocomplete.Root items={tags}>
  <Autocomplete.Input aria-label="Tag" placeholder="Add a tag" />
  <Autocomplete.Content>
    <Autocomplete.Empty>No matching tags.</Autocomplete.Empty>
    <Autocomplete.List>
      {(tag) => <Autocomplete.Item key={tag} value={tag}>{tag}</Autocomplete.Item>}
    </Autocomplete.List>
  </Autocomplete.Content>
</Autocomplete.Root>

Built on

Packages: @base-ui/react, @stylexjs/stylex
Shelf items: foundations, Icons, utils
Accessibility: Focus, keyboard, and ARIA behavior come from Base UI.
Figma: In progress. See Designers and Figma.