Select
Selects are form controls to select an option, or options, from a set of options. When a user taps the select, a dialog appears with all of the options in a large, easy to select list.
Examples
Basic Usage
js
<Mdx-select v-model="select" :options="options" label="Select" />Multiple selection
By adding the multiselect prop to select, users are able to select multiple options.
js
<Mdx-select v-model="select" multiselect="true" :options="options" label="Multiselect" />Searchable
You can enable search by passing prop searchable. If you want to add highlight to matched part of the option pass prop highlighted as well
js
<Mdx-select v-model="select" searchable="true" :options="options" label="Searchable" />
<br />
<Mdx-select v-model="select" searchable="true" highlighted="true" :options="options" label="Searchable with highlights" />Validations
You can add validations by using Vuelidate value for v-model. Validations will be automatically parsed from v$
js
<Mdx-select v-model="v$.select" :options="options" label="Select" />Properties
v-model
| Description | You can pass simple variable to v-model as well as Vueliade v$.variable to enabling validations |
|---|---|
| Type | "Object" | "String" | "null" |
| Required | true |
label
| Description | The visible label associated with the select. |
|---|---|
| Type | String |
| Required | true |
options
| Description | Array of options for the select. If null is passed, loading animation will be shown |
|---|---|
| Type | "Array" | "null" |
| Default | null |
multiselect
| Description | Enables checkboxes for multiselect functionality |
|---|---|
| Type | Boolean |
| Default | false |
searchable
| Description | Enables text input for search functionality |
|---|---|
| Type | Boolean |
| Default | false |
highlighted
| Description | Highlights matched part of the option. searchable must be set to true |
|---|---|
| Type | Boolean |
| Default | false |
optionKey
| Description | Defines which property from options will be used as key |
|---|---|
| Type | String |
| Default | key |
optionDisabledKey
| Description | Defines which property from options will be disabled |
|---|---|
| Type | String |
| Default | disabled |
optionTagKey
| Description | Defines which property from options will be tagged |
|---|---|
| Type | String |
| Default | tag |
optionValue
| Description | Defines which property from options will be used as value |
|---|---|
| Type | String |
| Default | value |
optionsMaxHeight
| Description | Defines the maximum height of options dropdown |
|---|---|
| Type | String |
| Default | 440px |
optionsWidth
| Description | Defines the width of options dropdown |
|---|---|
| Type | String |
| Default | 100% |
optionsCompact
| Description | Lowers the line-height of the options |
|---|---|
| Type | Boolean |
| Default | false |
disabled
| Description | If true, the user cannot interact with the select. |
|---|---|
| Type | Boolean |
| Default | false |
debounce
| Description | Set the amount of time, in milliseconds, to wait to load options after each keystroke. |
|---|---|
| Type | "Number" |
| Default | 300 |
size
| Description | The height of the select. |
|---|---|
| Type | "small" | "default" |
| Default | default |