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

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