Docs
Components
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

Preview

Code

Installation

CLI

Manual

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

Preview

Code

Press ⌘J

Alert Avatar

On This Page

Installation
Anatomy
Examples
Dialog

Contribute

Report an issue
Request a feature
Edit this page