Searchable select

Component name: <v-searchable-select>

Examples

Basic

Basic API

Name	Type	Description	Default
options	Array	The options available for selection. Can be an array of strings or objects.	-
value	Object|String	The value of the selected option.	-
placeholder	String	Placeholder text shown when input field is empty.	-
@select	Event	Event triggered when a selection has been made. The selected value can be found in the $event object.	-
description	String	Helper text	-
error	String	Error message	-
invalid	Boolean	Wether or not the field is invalid. Shows error message if invalid.	false
small	Boolean	Wether or not the field is smaller.	false
gray	Boolean	Wether or not the field has a gray background.	false
slot:custom-no-results	Slot	Slot used to show a custom message, when no results are found.	-

Object options

Object options API

Name	Type	Description	Default
option-id	String	When options is an array of objects, option-id names the object property used to identify individual options. The property must thus be unique across all options.	-
label	String	When options is an array of objects, label names the object property used to display the option.	-

Mutliple select and Tags

The multiple select works the same way as the other examples - with the exception that :value and @input should be done as in the example below. We use these values to monitor the selected options, and reset the select if all selected tags are removed.

Multiple select and Tags API

Name	Type	Description	Default
multiple	Boolean	Required to make the select multiselect	false

Object options with meta label

Meta label API

Name	Type	Description	Default
meta-label	String	Names the object property used to display the meta label.	-

Grouped options

Grouped options API

Name	Type	Description	Default
group-values	String	When options contains groups of options, group-values names the object property holding the options of a group.	-
group-label	String	When options contains groups of options, group-label names the object property used to display the group label.	-

---

Async options based on search query

Async options API

Name	Type	Description	Default
url	String	Set this property to load options asynchronously based on the user's search query. The supplied url must contain a {query} placeholder.	-
min-chars	Number	The minimum number of search query characters required before searching takes place.	2