Combobox
An input combined with a list of predefined items to select.
An input combined with a list of predefined items to select.
value prop in ComboboxItem must match the type of items in you array. For objects, you can pass the entire object as the value.<ComboboxList> children is a render function that receives each item and lets you customize how it's displayed.You can use array of simple data primitive values as items. Notice in example below that we are using array of strings as items passed to Combobox component.
You can use array of objects as items. As mentioned in key points, the value prop in ComboboxItem must match the type of items in your array. For objects, you can pass the entire object as the value.
Notice in above example that we are using label property in each item object of items. By default, the label property is used to display selected item in the input.
In example below we are not using label property in each item object of items. In this case, whole object is displayed in the input which we don't want to show in the input :(
To use custom label or other properties of the object to show in the input, you can use itemToStringLabel function as prop to Combobox component.
You can use value and onValueChange props to control the selected item in the combobox.
Selected User:
null
You can use ComboboxLabel component to add a label to the combobox.
You can use autoHighlight prop to enable auto highlighting of the items in the combobox. Now try searching for something like "app" and you will see that the first matching item is highlighted.
You can allow multiple selection by passing multiple prop to the Combobox component. And selected items will be displayed in the input as ComboboxChip that can be removed.
Selected Items:
[]
Important: You need to pass showTrigger={false} to the ComboboxInput component when you are using it inside the ComboboxPopup component. This will prevent us to have only one trigger against which popup will be shown. otherwise, we'll end up having two triggers in Combobox and that will cause issues.
You can show clear button by passing isClearable prop to the ComboboxInput component.