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

`Combobox` Props

This component composes ui-box

itemsarrayrequired

The options to show in the menu.

selectedItemany

The selected item when controlled.

onChangefunc

Function called when value changes.

openOnFocusbool

When true, open the autocomplete on focus.

initialSelectedItemany

Default selected item when uncontrolled.

placeholderstring

The placeholder text when there is no value present.

itemToStringfunc

In case the array of items is not an array of strings, this function is used on each item to return the string that will be shown on the filter

inputPropsobject

Properties forwarded to the input. Use with caution.

buttonPropsobject

Properties forwarded to the button. Use with caution.

autocompletePropsobject

Properties forwarded to the autocomplete component. Use with caution.

disabledbool

Makes the input element disabled.

isLoadingbool

When true, show a loading spinner. This also disables the button.