Autocomplete
Live example
Autocomplete
Installation
npx shadcn@latest add https://hextech-ui.vercel.app/r/autocomplete.jsonAPI reference
These are the main Autocomplete options. See the exported TypeScript types for inherited native or primitive props.
| Prop | Type | Default |
|---|---|---|
label | string (required) | — |
options | readonly T[] | required |
value / defaultValue | string | — |
onValueChange | (text, details) => void | — |
getOptionKey / itemToStringValue | suggestion identity and text getters | id/value + label |
mode | list | both | inline | none | list |
renderOption / isOptionDisabled | renderer / predicate | — |
clearOnEscape | boolean; closed Escape clears only when enabled | false |
Text and options
Autocomplete owns free text; it is not a selected-record Combobox. Use value and onValueChange for controlled editing. Give object options stable keys and string values. Use Combobox when choosing a record rather than completing text.