Autocomplete

Navigation

An accessible autocomplete input with async search, debouncing, keyboard navigation, loading states, and animated dropdown with highlighted matches.

Loading preview...

Customize

Placeholder

Label

Debounce (ms)

300

Disabled

Props

Prop	Type	Default	Description
`onSelect`	`(option: AutocompleteOption) => void`	`undefined`	Callback when an option is selected.
`onSearch`	`(query: string) => Promise<AutocompleteOption[]>`	`required`	Async function to fetch search results.
`placeholder`	`string`	`'Search...'`	Input placeholder text.
`label`	`string`	`undefined`	Floating label text.
`loading`	`boolean`	`false`	External loading state.
`debounceMs`	`number`	`300`	Debounce delay in milliseconds.
`disabled`	`boolean`	`false`	Disables the autocomplete.
`className`	`string`	`''`	Additional CSS classes.