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

API Reference

Prop	Type	Default
`filter`	`function`
`options`	`Intl.CollatorOptions`
`disableVirtualFocus`	`boolean`	`false`
`disableAutoFocusFirst`	`boolean`	`false`
`defaultInputValue`	`string`
`inputValue`	`string`
`onInputChange`	`function`
`children`	`ReactNode`

Aspect Ratio Avatar

On This Page

Installation
Anatomy
Examples
Dialog
API Reference

Contribute

Report an issue
Request a feature
Edit this page