Autocomplete

Forms

A text input with search suggestions. Use autocomplete when users need to search or filter through a large list of options.

Import

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

Autocomplete with product options and descriptions

Search Products

Simple autocomplete without descriptions

Country

Autocomplete showing error state

Required Field

Please select a product

Autocomplete in disabled state

Disabled

Prop	Type	Default	Description
`options*`	`AutocompleteOption[]`	—	Array of options with value, label, and optional description
`value`	`string`	—	Controlled selected value
`defaultValue`	`string`	—	Default selected value (uncontrolled)
`onValueChange`	`(value: string) => void`	—	Handler called when selection changes
`onInputChange`	`(input: string) => void`	—	Handler called when input text changes
`label`	`string`	—	Label text displayed above the input
`placeholder`	`string`	"Search..."	Placeholder text
`loading`	`boolean`	false	Show loading indicator
`allowCustomValue`	`boolean`	false	Allow values not in the options list
`emptyMessage`	`string`	"No results found"	Message shown when no options match
`error`	`string`	—	Error message to display
`disabled`	`boolean`	false	Whether the autocomplete is disabled