autocomplete

Autocomplete

Autocomplete

Search input with debounced suggestions and keyboard navigation.

Preview

Features

  • Debounced filtering with use-debounce.
  • Keyboard navigation (ArrowUp, ArrowDown, Enter, Escape).
  • Accessible listbox semantics for suggestions.

Installation

npx shadcn@latest add https://www.shadcn-form.com/registry/autocomplete.json

Registry JSON: /registry/autocomplete.json

Install dependencies:

npm install use-debounce

Usage

import Autocomplete from '@/components/ui/autocomplete'


<Autocomplete value={value} onChange={setValue} />