Autocomplete

Autocomplete provides a text input with live suggestion dropdown, supporting large and medium sizes across multiple interaction states.

Loading demo: autocomplete-real-world

Installation

npx sdaia-ui@latest add autocomplete

import { Autocomplete } from "@/components/ui/autocomplete"

<Autocomplete size="large" placeholder="Search..." />

Autocomplete input in the default placeholder state.

Loading demo: autocomplete-default

Autocomplete available in Large and Medium sizes.

Loading demo: autocomplete-sizes

Autocomplete in the disabled state, preventing user interaction.

Loading demo: autocomplete-disabled

Props for the Autocomplete component.

Prop	Type	Default	Required
size	'large' \| 'medium'	'large'	optional
value	string	''	optional
onChange	(value: string) => void	-	optional
onSelect	(item: AutocompleteItem) => void	-	optional
suggestions	AutocompleteItem[]	[]	optional
suggestionsLabel	string	'Suggestions'	optional
recents	AutocompleteItem[]	[]	optional
recentsLabel	string	'Recents'	optional
placeholder	string	'Search'	optional
label	string	-	optional
required	boolean	false	optional
helperText	string	-	optional
helperIcon	boolean	true	optional
disabled	boolean	false	optional
leadingIcon	boolean	true	optional
id	string	-	optional
onClear	() => void	—	optional