Autocomplete

Filters a menu or list from a search field as you type.

Filter topics

Design

Engineering

Research

Writing

autocomplete-demo.tsx

"use client";import { Autocomplete } from "@/components/vip-ui/autocomplete";import { ListBox, ListBoxItem } from "@/components/vip-ui/list-box";import { SearchField } from "@/components/vip-ui/search-field";export function AutocompleteDemo() {  return (    <Autocomplete>      <div className="grid w-full max-w-xs gap-2">        <SearchField label="Filter topics" placeholder="Search topics" />        <ListBox          aria-label="Topics"          className="max-h-52"          renderEmptyState={() => (            <p className="px-3 py-2 text-sm text-muted-foreground">              No topics found.            </p>          )}        >          <ListBoxItem id="design">Design</ListBoxItem>          <ListBoxItem id="engineering">Engineering</ListBoxItem>          <ListBoxItem id="research">Research</ListBoxItem>          <ListBoxItem id="writing">Writing</ListBoxItem>        </ListBox>      </div>    </Autocomplete>  );}

Installation

CLI

Manual

The CLI adds the files, packages, theme variables, and Tailwind plugin that this component uses. Before you run it, set up your project.

npm

yarn

pnpm

bun

pnpm dlx shadcn@latest add https://vip-ui.dev/r/vip-autocomplete.json

Composition

Autocomplete
- SearchField
  Install Search field separately.
- ListBox
  Install List box separately.

API reference

vip/ui adds or changes the props below. For all other props, see React Aria Autocomplete (opens in a new tab).

filter: (textValue: string, inputValue: string) => boolean: Decides which items match the input. Without it, an item matches when its text contains the input. The default ignores case and accents.