AutoComplete

Reference

It accepts unlimited number of suggstions, but it filters and only display the six most matched options.

It inherit all the Input props.

Usage

Default

import { AutoComplete } from '@gympass/yoga';

render(() => {
  const [value, setValue] = useState('');

  return (
    <AutoComplete
      value={value}
      onChange={value => setValue(value)}
      onSelect={selected => console.log(selected)}
      onClean={cleaned => console.log('cleaned', cleaned)}
      options={[
        'Madrid',
        'Milan',
        'São Paulo',
        'New York',
        'Paris',
        'Buenos Aires',
        'Amsterdam',
        'Los Angeles',
        'Hollywood',
      ]}
    />
  );
});render(() => {
  const [value, setValue] = useState('');

  return (
    <AutoComplete
      value={value}
      onChange={value => setValue(value)}
      onSelect={selected => console.log(selected)}
      onClean={cleaned => console.log('cleaned', cleaned)}
      options={[
        'Madrid',
        'Milan',
        'São Paulo',
        'New York',
        'Paris',
        'Buenos Aires',
        'Amsterdam',
        'Los Angeles',
        'Hollywood',
      ]}
    />
  );
});

With first option highlighted

import { AutoComplete } from '@gympass/yoga';

render(() => {
  const [value, setValue] = useState('');

  return (
    <AutoComplete
      value={value}
      highlightFirst
      onChange={value => setValue(value)}
      onSelect={selected => console.log(selected)}
      onClean={cleaned => console.log('cleaned', cleaned)}
      options={[
        'Madrid',
        'Milan',
        'São Paulo',
        'New York',
        'Paris',
        'Buenos Aires',
        'Amsterdam',
        'Los Angeles',
        'Hollywood',
      ]}
    />
  );
});render(() => {
  const [value, setValue] = useState('');

  return (
    <AutoComplete
      value={value}
      highlightFirst
      onChange={value => setValue(value)}
      onSelect={selected => console.log(selected)}
      onClean={cleaned => console.log('cleaned', cleaned)}
      options={[
        'Madrid',
        'Milan',
        'São Paulo',
        'New York',
        'Paris',
        'Buenos Aires',
        'Amsterdam',
        'Los Angeles',
        'Hollywood',
      ]}
    />
  );
});

Props

Prop	Description	Type	Default	Required