Component Combobox

badge-dismissible

boolean

true

This property will show/hide the close X button on badge elements.

data

string

This property is used as the API layer to populate the combobox popover items. The data structure should be a stringified array of objects. Each object should have keys for label, name, and value fields. An optional boolean checked key can be added to the object to set the default checked state.

error

string

null

This property can be used to set an error. If a non-empty string is given, it will be used as the error message.

format-checked

string

'checked'

This property can be used to map your data structure to the data API that populates the checked key/value pair. Pass in a string for the key that will represent the checked value.

format-disabled

string

'disabled'

This property can be used to map your data structure to the data API that populates the checked key/value pair. Pass in a string for the key that will represent the checked value.

format-label

string

'label'

This property can be used to map your data structure to the data API that populates the label key/value pair. Pass in a string for the key that will represent the label value.

format-name

string

'name'

This property can be used to map your data structure to the data API that populates the name key/value pair. Pass in a string for the key that will represent the name value. This value will also represent the name attribute used for each radio/checkbox element in the dropdown.

format-value

string

'value'

This property can be used to map your data structure to the data API that populates the value key/value pair. Pass in a string for the key that will represent value.

help

string

''

This property can be used to set help text.

hide-label

boolean

false

This property will visually hide the label. A label is still required for screenreader support.

input-id

string

generateId('som-combobox-')

This property can be used to specifically set an ID to the combobox field. If an ID is not provided, it will be dynamically generated.

is-clearable

boolean

true

This property will show/hide the X icon that clears all selected items.

label

string

''

This property can be used to set a label.

no-results-message

string

'No results found'

This property sets the message that will display if no results are found. Defaults to "No results found".

placeholder

string

''

This property can be used to set a placeholder text.

required

boolean

false

This boolean can be used to set the combobox as required.

required-ind

"none" | "optional" | "required"

This property is used to override the required indicator. By default, forms elements will show an optional indicator but some forms are better served showing the required indicator instead.

search-field

string

This property is used to set the key to search against. Default behavior will search against value, but can be changed to search against any other key, such as label.

type

"checkbox" | "radio"

'checkbox'

addItem

This method will add a specific item to the selected list of items when passing the label value as a string.

clearSelectedItems

This method will clear all selected items and close the popover if open.

closePopover

This method will close the list of results.

deleteItem

This method will delete a specific item from the selected list of items when passing the label value as a string.

openPopover

This method will open the list of results.

comboboxClosed

any

This event is triggered after combobox is closed.

comboboxInput

any

This event is emitted when a keyboard input occurs.

comboboxOpened

any

This event is triggered after combobox is opened.

itemAdded

any

This event is emitted when an item is added.

itemRemoved

any

This event is emitted when an item is removed.

itemsRemoved

any

This event is emitted when all items are removed.