Autocomplete

import { Autocomplete } from '@elemental-ui-alpha/autocomplete';

The autocomplete solution extends react-select. View the full API documentation on their website https://react-select.com. It allows users to quickly search through and select from large collections of options.

Single

Select a single item from a list of options.

<Autocomplete
  label="Select person"
  options={[
    { label: 'Teresa Foster', value: 1 },
    { label: 'Jennifer Thompson', value: 2 },
    { label: 'Katherine Wilson', value: 3 },
    { label: 'Scott Morris', value: 4 },
    { label: 'Russell Lopez', value: 5 },
    { label: 'Gregory Long', value: 6 },
    { label: 'Tina Flores', value: 7 },
    { label: 'Ashley Johnson', value: 8 },
    { label: 'Jose Coleman', value: 9 },
    { label: 'Jessica Taylor', value: 10 },
  ]}
/>

Multi

Select multiple items from a list of options.

const options = [
  { label: 'Teresa Foster', value: 1 },
  { label: 'Jennifer Thompson', value: 2 },
  { label: 'Katherine Wilson', value: 3 },
  { label: 'Scott Morris', value: 4 },
  { label: 'Russell Lopez', value: 5 },
  { label: 'Gregory Long', value: 6 },
  { label: 'Tina Flores', value: 7 },
  { label: 'Ashley Johnson', value: 8 },
  { label: 'Jose Coleman', value: 9 },
  { label: 'Jessica Taylor', value: 10 },
];
return (
  <Autocomplete
    isMulti
    label="Select person"
    defaultValue={options.slice(0, 3)}
    options={options}
  />
);