Combobox
Overview
When to use
Use the Combobox component when you need a form element that allows users to select from a predefined list of options. It's particularly useful for situations where the list of options is extensive, and filtering or searching is beneficial.
When to consider an alternative
If your options are very limited (less than 5), consider using a simple <SelectInput> element instead.
Selected Items
A Combobox with name="myCombobox" will generate hidden input elements with the name "myCombobox" for each selected option's value.
Component
Default
Multiple Select
States
Programatically open
Partial search
No results
Properties
Default
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
| utilClassNames | String | false | - | |
| children | Node | false | - | |
| componentRef | Shape {
"current": "Any"
} | false | - | |
| options | Arrayof Array<{
"label": "String",
"value": "Any",
"variant": "'default' │ 'success' │ 'error' │ 'warning' │ 'info' │ 'muted'",
"disabled": "Boolean"
}> | true | - | |
| label | String | false | - | |
| placeholder | String | false | - | |
| name | String | true | - | |
| disabled | Bool | false | - | |
| error | Bool | false | - | |
| isLoading | Bool | false | - | |
| value | Arrayof Array<String> | true | - | |
| onChange | Func | true | - | |
| filterType | Enum "startsWith" │ "contains" | false | startsWith | Exported as Combobox.FilterType.contains etc. |
| noResultsMessage | String | false | - |