Multiselect Element

An element used to render a native multiselect or Vue-Multiselect input.

#Examples

#Options

Name Type Description
items obj|arr List of select options.
native boolean Determines whether the native select should be used by default.
search boolean Determines whether the select options should be searchable.
trackBy string When item values are objects this object element will be used to track search.
limit number Maximum number of search options.
default array Value of element when the form is initially loaded or reseted.
placeholder string The placeholder of the element.
floating string The floating label of the element.
disabled boolean Whether the field is disabled.
options object Additional options for the select.

#Properties

Name Type Default Description
disabled boolean false Whether the field is disabled.
items obj|arr null List of select options.
native boolean true Determines whether the native select should be used by default.
trackBy string 'label' When item values are objects this object element will be used to track search.
search boolean false Determines whether the select options are searchable.
limit number 1000 Maximum number of search options.
defaultValue array null Value of element when the form is initially loaded or reseted.
placeholder string null The placeholder of the element.
floating string null The floating label of the element.
options object {} Additional options for the select.
select$ object null The select element / component.
loading boolean false Determines whether the element is going through async process to load options.
selectOptions array - List of select options converted to an array of objects.
selectedOption object - Retrieves the selected option.
isNative string - Determines if the native select is used.

#Methods

# .disable()

Disabled the field.


# .enable()

Enables the field.


# .select(option)

Parameters
  • option str|num : the key of option to select.

Selects an option.


# .unselect(option)

Parameters
  • option str|num : the key of option to unselect.

Unselects an option.


#Slots

# option

Props
  • el$ object : The element component.
  • option object : Select option.
  • search string : Current value of search.

Contains the select option template.


# beforeList

Props
  • el$ object : The element component.

Component to be rendered before the option list.


# afterList

Props
  • el$ object : The element component.

Component to be rendered after the option list.


# noResult

Props
  • el$ object : The element component.

Component to be rendered when there are no search results.


# noOptions

Props
  • el$ object : The element component.

Renders the select options list is empty.


# selection

Props
  • el$ object : The element component.
  • values object : Selected options.
  • search object : The current value of search.

Renders a label for selected values in the input field.


#Events

# select(selectedOption)

Parameters
  • selectedOption object : the selected option.

Triggered when the user selects an option when using not native element.


# remove(removedOption)

Parameters
  • removedOption object : the removed option.

Triggered when the user removes a selected option.


# searchChange(searchQuery)

Parameters
  • searchQuery string : the current search query.

Triggered when the user changes the search criteria.


# open

Triggered when the option list is opened.


# close(value)

Parameters
  • value string : value of the select.

Triggered when the option list is closed.