1. Docs
  3. Components
  5. Autocomplete

Autocomplete

An autocomplete combines a TextField or SearchField with a Menu or ListBox, allowing users to search or filter a list of suggestions.

Docs

Installation

npx shadcn@latest add @kanpeki/autocomplete

Anatomy

import { Autocomplete } from "~/components/ui/autocomplete";
import { Menu } from "~/components/ui/menu";
import { SearchField } from "~/components/ui/search-field";

<Autocomplete>
  <SearchField /> or <TextField />
  <Menu /> or <ListBox />
</Autocomplete>

Examples

Dialog

Press ⌘J

AlertAvatar