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