Combobox

View on GitHub

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'
  }}
/>
code Hide code

Open on focus

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

Full width

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

Custom width

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

Change height

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

Custom items and default selected item

<Combobox
  defaultSelectedItem={{ label: 'Banana' }}
  items={[{ label: 'Banana' }, { label: 'Pear' }, { label: 'Kiwi' }]}
  itemToString={item => item.label}
  onChange={selected => console.log(selected)}
/>
code 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 = false
When true, open the autocomplete on focus.
defaultSelectedItemany
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.
width = 240