Combobox

Combined input and menu for selecting or entering values with autocomplete.

Installation

Add the component to your project using the following command:

Usage

Import

Import the component and its related parts.

Combobox Parts

import {
  Combobox,
  ComboboxPopup,
  ComboboxEmpty,
  ComboboxItem,
  ComboboxList,
  ComboboxSearch,
  ComboboxTrigger,
  ComboboxValue,
} from 'components/selia/combobox';

Structure

The expected structure and composition of the component.

Anatomy

<Combobox items={items} defaultValue={items[0]}>
  <ComboboxTrigger>
    <ComboboxValue />
  </ComboboxTrigger>
  <ComboboxPopup>
    <ComboboxSearch />
    <ComboboxEmpty>No results found</ComboboxEmpty>
    <ComboboxList>
      {(item) => (
        <ComboboxItem key={item.value} value={item}>
          {item.label}
        </ComboboxItem>
      )}
    </ComboboxList>
  </ComboboxPopup>
</Combobox>

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: 'software-engineering', label: 'Software Engineering' },
  { value: 'machine-learning', label: 'Machine Learning' },
  { value: 'data-science', label: 'Data Science' },
  { value: 'artificial-intelligence', label: 'Artificial Intelligence' },
];