Select compact
Compact 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-compact v-model="select" :options="options" label="Select compact" />Multiple selection
By adding the multiselect prop to select, users are able to select multiple options.
js
<Mdx-select-compact v-model="select" multiselect="true" :options="options" label="Multiselect" />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 compact" />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-compact. |
|---|---|
| Type | String |
| Required | true |
options
| Description | Array of options for the select-compact. 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 |
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-compact. |
|---|---|
| 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-compact. |
|---|---|
| Type | "small" | "default" |
| Default | default |