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

Hide code

Open on focus

Hide code

Full width

Hide code

Custom width

Hide code

Change height

Hide code

Custom items and default selected item

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.