Autocomplete
FormsA 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";Usage
Product Search
Autocomplete with product options and descriptions
Country Selection
Simple autocomplete without descriptions
With Error
Autocomplete showing error state
Please select a product
Disabled
Autocomplete in disabled state
API Reference
options*—AutocompleteOption[]Array of options with value, label, and optional description
value—stringControlled selected value
defaultValue—stringDefault selected value (uncontrolled)
onValueChange—(value: string) => voidHandler called when selection changes
onInputChange—(input: string) => voidHandler called when input text changes
label—stringLabel text displayed above the input
placeholder"Search..."stringPlaceholder text
loadingfalsebooleanShow loading indicator
allowCustomValuefalsebooleanAllow values not in the options list
emptyMessage"No results found"stringMessage shown when no options match
error—stringError message to display
disabledfalsebooleanWhether the autocomplete is 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 |