Usage

The Combobox component is similar to a Select or SelectMenu component. Clicking the button will show all items. Typing in the text input will filter the list.

Basic

jsx

<Combobox
  items={['Banana', 'Orange', 'Apple', 'Mango']}
  onChange={selected => console.log(selected)}
  placeholder="Fruit"
  autocompleteProps={{
    // Used for the title in the autocomplete.
    title: 'Fruit'
  }}
/>

Open on focus

jsx

<Combobox
  openOnFocus
  items={['Banana', 'Orange', 'Apple', 'Mango']}
  onChange={selected => console.log(selected)}
  placeholder="Fruit"
/>

Custom width and height

jsx

<Combobox
  openOnFocus
  width="100%"
  height={40}
  items={['Banana', 'Orange', 'Apple', 'Mango']}
  onChange={selected => console.log(selected)}
  placeholder="Fruit"
/>

Custom items and default selected item

jsx

<Combobox
  initialSelectedItem={{ label: 'Banana' }}
  items={[{ label: 'Banana' }, { label: 'Pear' }, { label: 'Kiwi' }]}
  itemToString={item => (item ? item.label : '')}
  onChange={selected => console.log(selected)}
/>