Create an accessible autocomplete component that allows a user to get real-time suggestions as they type within an input. This component can also be hooked up to a backend API that handles additional filtering or sorting.
npm install @react-md/autocompleteCreate an accessible autocomplete component that allows a user to get real-time
suggestions as they type within an input. This component can also be hooked up
to a backend API that handles additional filtering or sorting.
``sh`
npm install --save @react-md/autocomplete
You should check out the
full documentation for live
examples and more customization information, but an example usage is shown
below.
The AutoComplete component just requires:
- an id to identify the field (required for a11y)data
- a list of that can be a list of string, number, or object
However, it is recommended to also provide a label and placeholder text to
help the user understand this component.
`tsx
import { AutoComplete } from "@react-md/autocomplete";
const fruits = [
"Apple",
"Apricot",
"Banana",
"Blueberry",
"Cranberry",
"Kiwi",
"Peach",
"Plum",
"Strawberry",
];
function Example() {
return (
name="fruits"
label="Fruits"
placeholder="Kiwi..."
data={fruits}
/>
);
}
``