This component features render debouncing.
You may have to wait for the next browser tick after rendering in your integration/E2E tests.
HTML Attributes API
| Name |
Description |
Type |
Required |
Default value |
items |
Set options for multiselect. See example below. |
array *
|
|
[] |
disabled |
Set disable state of multiselect. |
boolean |
|
false |
readonly |
Set readonly state of multiselect. The component still can be opened |
boolean |
|
false |
invalid |
Set disable state of invalid. |
boolean |
|
false |
placeholder |
Defines placeholder. |
string |
|
|
label-merge-limit |
Display multiple selected options as a single label |
integer |
|
Infinity |
*: An example of an items property:
[
{ content: 'option 1' },
{ content: 'option 2', status: 'warning' },
{ content: 'option 3', status: 'warning-faint', icon: 'warning'}
]
| Name |
Description |
Type |
Required |
Default value |
content |
Sets a readable text for the option |
string |
true |
|
status |
Set the color of the label of selected item. For valid values for status, see the label component: Link
|
string |
|
|
icon |
Defines the icon of the component. Allowed icons are in our icon library. |
string |
|
|
Events
| Event |
Description |
Returns |
itemremove |
Fires on item remove it |
{
detail: {
item: currentItem
}
}
|
clear |
Fires on clear button when clicked and remove all items |
change |
Fires when clear button clicked and when remove an item |
|
trigger |
Fires on input when the input has clicked (mouse or keyboard) |
|