Autocomplete

An input that suggests options as you type.

Installation

Add the component to your project using the following command:

Usage

Import

Import the component and its related parts.

Autocomplete Parts

import {
  Autocomplete,
  AutocompletePopup,
  AutocompleteEmpty,
  AutocompleteInput,
  AutocompleteItem,
  AutocompleteList,
} from 'components/selia/autocomplete';

Structure

The expected structure and composition of the component.

Anatomy

<Autocomplete items={items}>
  <AutocompleteInput placeholder="Search for items..." />
  <AutocompletePopup>
    <AutocompleteEmpty>No results found</AutocompleteEmpty>
    <AutocompleteList>
      {(item) => (
        <AutocompleteItem key={item.value} value={item}>
          {item.label}
        </AutocompleteItem>
      )}
    </AutocompleteList>
  </AutocompletePopup>
</Autocomplete>

The items prop is an array of objects that define the options to be displayed in the autocomplete popup. Each object should have a value and a label property.

items.ts

const items = [
  { value: 'radiohead', label: 'Radiohead' },
  { value: 'deftones', label: 'Deftones' },
  { value: 'tool', label: 'Tool' },
  { value: 'pink-floyd', label: 'Pink Floyd' },
  { value: 'led-zeppelin', label: 'Led Zeppelin' },
];