Select Element

An element used to render a native select 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 string 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 str|num 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.
textValue string - Retrieves the selected option's label.
selectedOption object - Retrieves the selected option.
isNative string - Determines if the native select is used.

#Methods

# .disable()

Disabled the field.


# .enable()

Enables the field.


#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.


# singleLabel

Props
  • el$ object : The element component.

Renders the selected value in the input field.


# noOptions

Props
  • el$ object : The element component.

Renders the select options list is empty.


#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.