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

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

Search API

Name Type Description Default
search Boolean Enable search variant. false
@search-result Event Event triggered when a search with results has completed. The query value can be found in the $event object. -
@search-no-result Event Same as @search-result but without results. -