Autocomplete
Autocomplete, also known as type-ahead, uses predictive text to help select options as a user types.
import { ... } from '@ag.ds-next/react/autocomplete';Usage
Autocomplete components can be imported via the autocomplete entrypoint in the @ag.ds-next/react package.
For example:
import { ... } from '@ag.ds-next/react/autocomplete';Props
| Prop | Type | Description |
|---|---|---|
| label | string | Describes the purpose of the field. |
| loadOptions | (inputValue: string) => Promise<Option[]> | Function to be used when options need to be loaded over the network. |
| block? | boolean | If true, the field will stretch to the fill the width of its container. |
| disabled? | boolean | If true, the field will not be interactive. |
| emptyResultsMessage? | stringDefault: "No results found" | Message to display when no options match the users search term. |
| hideOptionalLabel? | boolean | If true, "(optional)" will never be appended to the label. |
| hint? | string | Provides extra information about the field. |
| id? | string | Defines an identifier (ID) which must be unique. |
| inputRef? | RefObject<HTMLInputElement> | Ref to the input element. |
| invalid? | boolean | If true, the invalid state will be rendered. |
| maxWidth? | "md" | "lg" | "xl" | The maximum width of the field. |
| message? | string | Message to show when the field is invalid. |
| name? | string | A string specifying a name for the input control. |
| onBlur? | FocusEventHandler<HTMLInputElement> | Function to be fired following a blur event. |
| onChange? | ((value: Option | null) => void) | Function to be fired following a change event. |
| onFocus? | FocusEventHandler<HTMLInputElement> | Function to be fired following a focus event. |
| openDropdownOnFocus? | boolean | @deprecated This prop is no longer being used. When true, the dropdown will open when the user focuses on the element |
| renderItem? | ((item: Option, inputValue: string) => ReactNode) | Used to override the default item rendering. |
| required? | boolean | If false, "(optional)" will be appended to the label. |
| value? | DefaultComboboxOption | null | The value of the field. |
AutocompleteRenderItem Props
AutocompleteRenderItem does not have any props.
Source
You can view the full source code for this package on Github.