Form Inputs
Autocomplete
Free-text input with filtered suggestions.
Free-text input with filtered suggestions.
Suggestions#
4 suggestions available
Inline completion#
4 suggestions available
Disabled#
2 suggestions available
Component props#
items accepts unique strings. Users can enter a value that is absent from the suggestions.
| Prop | Type | Purpose |
|---|---|---|
items | readonly string[] | Suggestions to filter and display |
label | ReactNode | Accessible input label |
value / defaultValue | string | Controlled or initial text |
onChange | (value: string) => void | Called after onValueChange, and only for changes that were not canceled |
onValueChange | Base UI callback | Receives the value and cancellable event details; runs first |
isDisabled | boolean | Disables the input (disabled is also accepted) |
showClear | boolean | Shows a clear button while the input has a value |
mode | 'list' | 'both' | 'inline' | 'none' | Filtering and inline completion behavior |
inputProps | Base UI Input props | Input attributes, including aria-label when no label is shown |
positionerProps | Base UI Positioner props | Popup placement |
renderItem | (item: string) => ReactNode | Custom suggestion content |
emptyMessage | ReactNode | Content shown when no suggestions match |
The parts expose data-slot attributes (autocomplete, autocomplete-input, autocomplete-clear,
autocomplete-status, autocomplete-positioner, autocomplete-content, autocomplete-list,
autocomplete-item, autocomplete-empty), and a visually hidden Autocomplete.Status announces
the number of available suggestions.
The forwarded ref targets the input. Other Base UI Autocomplete root props are supported, including open, onOpenChange, filter, and readOnly.