Link copied!

Multiselect API

API Reference e-multiselect

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 * []
value Gets or sets the selected values of multiselect. Setting is based on the value property. See example below. array *
content Gets the array of human-readable value (content) of the selected items array
disabled Set disable state of multiselect. boolean false
readonly Set readonly state of multiselect. The component still can be opened boolean false
loading Set loading state of multiselect. The component still can be opened boolean false
invalid Set disable state of invalid. boolean false
placeholder Defines placeholder. string
always-show-search Show search input even if there's not more then 8 options boolean false
label-merge-limit Display multiple selected options as a single label integer Infinity
selection-max Limit the number of selectable options. The value must be greater than 0. number

*: An example of an items or value property: 

[
  { content: 'option 1', value: 'option1' },
  { content: 'option 2', value: 'option2', disabled: true },
  { content: 'option 3', value: 'option3', selected: true },
  { content: 'option 4', value: 'option3', status: 'warning-faint' },

]
Name Description Type Required Default value
content Sets a readable text for the option string true
value Sets a value for the option that should be unique any
selected Selects the option. boolean false
disabled Disables the option. boolean false
status Set the color of the label of selected item. For valid values for status, see the label component: Link string

Items can also contain groups:

[
  { content: 'option 1', value: 'option1' },
  { type: 'group', label: 'Group 1', items: [
    { content: 'option 2', value: 'option2', disabled: true },
    { content: 'option 3', value: 'option3', selected: true }
  ] }
]
Name Description Type Required Default value
type Sets the type of an item to group "group" true
label Sets the readable title of a group string
items Sets the options inside a group. array * []
status Set the color of the items of the group. For valid values for status, see the label component: Link string

JavaScript API

Name Type Description Arguments
clear() Clear all selected options

Events

Event Description Returns
change Fires on option selection change. 
{
  detail: {
    selectedOptions: [options]
  }
}
search Fires on input in search field. Make sure selected items are included in filtered items 
{
  detail: {
    value: [value]
  }
}
open Fires on popup open
close Fires on popup close

API Reference e-select-option

HTML Attributes API

Name Description Type Required Default value
value Defines option value string
selected Set option to default selected boolean false
disabled Set option to disabled. boolean false

API Reference e-select-group

HTML Attributes API

Name Description Type Required Default value
label Defines name of the group string