Forms

Autocomplete

Search with suggestions: static or loaded as people type, grouped, with matches highlighted and recent searches when empty.

Ant Design: AutoComplete

import { Autocomplete, Highlight } from '@alea/ui';

Examples

Matches are highlighted; recent searches show when the field is empty.

Search the docs

Debounced, with a spinner, and stale requests are cancelled through the AbortSignal.

Invite someone

Search with suggestions: static or loaded as you type, grouped, matches highlighted, recent searches when empty (MUI Autocomplete, Ant AutoComplete).

Prop	Type	Default	Description
`className`	`string`	-	Extra class names for the root element.
`debounce`	`number`	`250`	Wait this long after typing before loading, in ms. Default 250.
`description`	`ReactNode`	-	Help text shown under the field.
`items`	`AutocompleteItem[]`	-	Static items, filtered as people type.
`label`	`ReactNode`	-	The visible label.
`loadItems`	`((query: string, signal: AbortSignal) => Promise<AutocompleteItem[]>)`	-	Or load matches as people type (debounced); return the items.
`minChars`	`number`	`1`	Least characters before suggesting. Default 1.
`onSelect`	`((item: AutocompleteItem) => void)`	-	Called with the picked item.
`onSubmit`	`((text: string) => void)`	-	Called on Enter with free text (a search).
`placeholder`	`string`	`'Search'`	Shown while there is no value.
`recent`	`AutocompleteItem[]`	-	Shown when the field is empty and focused: recent searches or suggestions.

Prop	Type	Default	Description
`query`required	`string`	-	The words to mark (case-insensitive).
`text`required	`string`	-	The full text.

A combobox: the list is announced with its count, and the highlighted option is read as people arrow through it.
While loading, a spinner with a label shows; results replace it without moving focus.
Enter with nothing highlighted submits the free text.

Key	Does
`Arrow Down` / `Up`	Move through suggestions
`Enter`	Picks the suggestion, or submits the text
`Escape`	Closes, then clears

Debounce remote searches (the default is 250 ms) and cancel stale ones: the component passes an AbortSignal.

Don't

Autocomplete with Empty, Typing, Results, Loading and No results states.