Combobox

Introduction

The Combobox component is used for selecting an option from a predefined list of options. It 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 Combobox Example

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

Open on focus

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

Full width

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

Custom width

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

Change height

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

Custom items and default selected item

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