Skip to main content
AutoComplete - Installation
Toggle Light/Dark ThemeView GitHubToggle right to left

# @react-md/autocomplete

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.

# Installation

$ npm install --save @react-md/alert

# Usage

The AutoComplete component just requires:

  • an id to identify the field (required for a11y)
  • a list of data 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.

1234567891011121314151617181920212223242526import React, { FC } from "react";
import { AutoComplete } from "@react-md/autocomplete";

const fruits = [
  "Apple",
  "Apricot",
  "Banana",
  "Blueberry",
  "Cranberry",
  "Kiwi",
  "Peach",
  "Plum",
  "Strawberry",
];

const Example: FC = () => (
  <AutoComplete
    id="search-fruits"
    name="fruits"
    label="Fruits"
    placeholder="Kiwi..."
    data={fruits}
  />
);

export default Example;