Extends native <input /> component

Copy
import {
  Combobox,
  ComboboxInput,
  ComboboxPopover,
  ComboboxList,
  ComboboxOption,
} from 'minerva-ui';

() => {
  const [search, setSearch] = useState('');
  return (
    <Combobox aria-label="choose a fruit">
      <ComboboxInput />
      <ComboboxPopover>
        <ComboboxList>
          <ComboboxOption value="Apple" />
          <ComboboxOption value="Banana" />
        </ComboboxList>
      </ComboboxPopover>
    </Combobox>
  );
};
() => {
  const [search, setSearch] = useState('');
  return (
    <Combobox aria-label="choose a fruit">
      <ComboboxInput />
      <ComboboxPopover>
        <ComboboxList>
          <ComboboxOption value="Apple" />
          <ComboboxOption value="Banana" />
        </ComboboxList>
      </ComboboxPopover>
    </Combobox>
  );
};

Examples

Client-Side Search#

Copy
() => {
  const [search, setSearch] = useState('');
  const items = ['apple', 'banana', 'kiwi', 'orange'];
  return (
    <Combobox
      aria-label="choose a fruit"
      openOnFocus
      onSelect={item => {
        setSearch(item);
      }}
    >
      <ComboboxInput value={search} onChange={e => setSearch(e.target.value)} />
      <ComboboxPopover>
        <ComboboxList>
          {items
            .filter(item => item.includes(search))
            .map(item => (
              <ComboboxOption value={item} />
            ))}
        </ComboboxList>
      </ComboboxPopover>
    </Combobox>
  );
};

Props#

Props related to the Combobox component.

Props related to the Combobox Input component.