Components
Autocomplete
A text field with a list of suggestions.
Autocomplete suggests options as the user types. Render the field yourself with renderInput.
import Autocomplete from '@hone-ui/react/Autocomplete';Examples
<Autocomplete
options={['Apple', 'Banana', 'Cherry', 'Mango']}
renderInput={(params) => <TextField {...params} label="Fruit" />}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
options | T[] | required | The choices. |
renderInput | (params) => node | required | Spread params onto a TextField. |
value, defaultValue | T, string, null | null | The value. |
onChange | (event, value, reason) => void | selectOption, createOption or clear. | |
inputValue, onInputChange | The text in the input. | ||
open, onOpen, onClose | The popup. | ||
getOptionLabel, isOptionEqualToValue | functions | How options read and compare. | |
getOptionDisabled, filterOptions, renderOption | functions | Per-option control. | |
multiple, disableCloseOnSelect | boolean | false | Pick several options, shown as chips. |
freeSolo | boolean | false | Any text is a value. No popup when nothing matches. |
disabled, disableClearable, openOnFocus, loading | boolean | false | Standard. |
clearOnEscape | boolean | false | Escape with the list closed clears the field. |
noOptionsText, loadingText | ReactNode | 'No options', 'Loading…' | Popup messages. |
size, fullWidth | 'medium', false | The field's size and width. | |
sx, className, style, ref | Standard, on the root. |
Notes
idgoes to the input, as in the reference API.renderTags,limitTags,groupBy,autoHighlightand the replaceable components are not supported.
clearOnEscape changes only the closed list. With the list open, Escape closes it and keeps the
text, so a second press clears. The change reports reason 'clear'.
Accessibility
The input is a combobox linked to its list: arrow keys, Enter and Escape work, and screen readers announce the options.