Form

Autocomplete

Free-text search with suggestions. You keep what you type; the list only helps. Need a required value? That's Combobox.

Show code

"use client";

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

const notes = [
  "First frost",
  "Bumblebee count",
  "Compost turned",
  "Seedlings up",
  "Rain gauge reading",
  "Ladybird sighting",
  "Mulch topped off",
  "Sweet pea trellis",
];

export default function AutocompleteDemo() {
  return (
    <div className="w-full max-w-72">
      <Autocomplete items={notes} openOnInputClick>
        <AutocompleteInput
          aria-label="Search field notes"
          placeholder="Search the field notes"
        />
        <AutocompleteContent>
          <AutocompleteEmpty />
          <AutocompleteList>
            {(note: string) => (
              <AutocompleteItem key={note} value={note}>
                {note}
              </AutocompleteItem>
            )}
          </AutocompleteList>
        </AutocompleteContent>
      </Autocomplete>
    </div>
  );
}

Installation

npx shadcn@latest add @lilt/autocomplete

Accessibility

Combobox semantics on a free-text input: suggestions are optional, arrows navigate, Escape closes — what you typed always stands.
Give it a visible label or wrap it in a Field; the clear button carries its own aria-label.