Vue Bootstrap Multiselect MDB Pro component
Vue Multiselect - Bootstrap 4 & Material Design
Note: This documentation is for an older version of Bootstrap (v.4). A
newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for
Bootstrap 5.
Go to docs v.5
Vue Multiselect - Bootstrap 4 & Material Design allows users to tick multiple options from a standard Vue Bootstrap select.
Its implementation is quite simple, and in exchange brings a lot of UX value.
Examples of Vue Bootstrap Multiselect use:
- Ingredient choice within a pizza delivery system
- Laptop hardware configuration an online shop
- Flight booking customization
Full documentation of our select
You can find detailed documentation and all available options in our Material Select documentation.
This documentation may contain syntax introduced in the MDB Vue 6.0.0 and can be not compatible with previous versions. See legacy docs.
Vue live previewDefault multiselect
Basic example of select component that allows you to choose from a number of options.
<template>
<mdb-container>
<select class="browser-default custom-select" multiple v-model="multiSelected">
<option value="1" selected>One</option>
<option value="2">Two</option>
<option value="3">Three</option>
<option value="4">Four</option>
</select>
</mdb-container>
</template>
<script>
import {
mdbContainer
} from 'mdbvue';
export default {
name: 'MultiSelectPageFree',
components: {
mdbContainer
},
data() {
return {
multiSelected: ['1']
};
}
};
</script>
Standard multiselect MDB Pro component
<template>
<mdb-container>
<mdb-select multiple selectAll @getValue="getSelectValue" :options="countries"
label="Choose your country" />
</mdb-container>
</template>
<script>
import {
mdbSelect,
mdbContainer
} from 'mdbvue';
export default {
name: 'SelectPage',
components: {
mdbSelect,
mdbContainer
},
data() {
return {
countries: [{
text: 'USA',
value: 1
},
{
text: 'Germany',
value: 2
},
{
text: 'France',
value: 3
},
{
text: 'Poland',
value: 4
},
{
text: 'Japan',
value: 5
}
]
};
},
methods: {
getSelectValue(value, text) {
console.log(value);
}
}
}
</script>
Multiselect with label MDB Pro component
<template>
<mdb-container>
<mdb-select multiple selectAll @getValue="getSelectValue" :options="countries" label="Example label"
placeholder="Choose your country" />
</mdb-container>
</template>
<script>
import {
mdbSelect,
mdbContainer
} from 'mdbvue';
export default {
name: 'SelectPage',
components: {
mdbSelect,
mdbContainer
},
data() {
return {
countries: [{
text: 'USA',
value: 1
},
{
text: 'Germany',
value: 2
},
{
text: 'France',
value: 3
},
{
text: 'Poland',
value: 4
},
{
text: 'Japan',
value: 5
}
]
};
},
methods: {
getSelectValue(value, text) {
console.log(value);
}
}
}
</script>
Colorful Multiselect with label MDB Pro component
<template>
<mdb-container>
<mdb-select multiple color="danger" selectAll @getValue="getSelectValue" :options="countries"
label="Label example" />
</mdb-container>
</template>
<script>
import {
mdbSelect,
mdbContainer
} from 'mdbvue';
export default {
name: 'SelectPage',
components: {
mdbSelect,
mdbContainer
},
data() {
return {
countries: [{
text: 'Choose your country',
value: null,
disabled: true,
selected: true
},
{
text: 'USA',
value: 1
},
{
text: 'Germany',
value: 2
},
{
text: 'France',
value: 3
},
{
text: 'Poland',
value: 4
},
{
text: 'Japan',
value: 5
}
]
};
},
methods: {
getSelectValue(value, text) {
console.log(value);
}
}
}
</script>
Multiselect with options groups MDB Pro component
In select you can also activate multiple mode so that you can select several items.
<template>
<mdb-container>
<mdb-select multiple selectAll @getValue="getSelectValue" :options="groupOptions" />
</mdb-container>
</template>
<script>
import {
mdbSelect,
mdbContainer
} from 'mdbvue';
export default {
name: 'SelectPage',
components: {
mdbSelect,
mdbContainer
},
data() {
return {
groupOptions: [{
text: 'team 1',
value: null,
disabled: true,
optgroup: true
},
{
text: 'Option nr 1',
value: 'Option 1',
selected: true
},
{
text: 'Option nr 2',
value: 'Option 2'
},
{
text: 'team 2',
value: null,
disabled: true,
optgroup: true
},
{
text: 'Option nr 3',
value: 'Option 3'
},
{
text: 'Option nr 4',
value: 'Option 4'
}
]
};
},
methods: {
getSelectValue(value, text) {
console.log(value);
}
}
}
</script>
Multiselect with icons MDB Pro component
<template>
<mdb-container>
<mdb-select multiple selectAll @getValue="getSelectValue" :options="iconOptions"
placeholder="Choose your option" />
</mdb-container>
</template>
<script>
import {
mdbSelect,
mdbContainer
} from 'mdbvue';
export default {
name: 'SelectPage',
components: {
mdbSelect,
mdbContainer
},
data() {
return {
iconOptions: [{
text: 'Option nr 1',
value: 'Option 1',
icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-1.webp'
},
{
text: 'Option nr 2',
value: 'Option 2',
icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-2.webp'
},
{
text: 'Option nr 3',
value: 'Option 3',
icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-3.webp'
}
]
};
},
methods: {
getSelectValue(value, text) {
console.log(value);
}
}
}
</script>
Multiselect with search box MDB Pro component
<template>
<mdb-container>
<mdb-select multiple selectAll search @getValue="getSelectValue" :options="searchOptions"
placeholder="Choose your country" />
</mdb-container>
</template>
<script>
import {
mdbSelect,
mdbContainer
} from 'mdbvue';
export default {
name: 'SelectPage',
components: {
mdbSelect,
mdbContainer
},
data() {
return {
searchOptions: [{
text: 'USA',
value: 1
},
{
text: 'Germany',
value: 2
},
{
text: 'France',
value: 3
},
{
text: 'Poland',
value: 4
},
{
text: 'Japan',
value: 5
}
]
};
},
methods: {
getSelectValue(value, text) {
console.log(value);
}
}
}
</script>
Multiselect with label and search box MDB Pro component
<template>
<mdb-container>
<mdb-select multiple selectAll search @getValue="getSelectValue" :options="searchOptions"
label="Label example" placeholder="Choose your country" />
</mdb-container>
</template>
<script>
import {
mdbSelect,
mdbContainer
} from 'mdbvue';
export default {
name: 'SelectPage',
components: {
mdbSelect,
mdbContainer
},
data() {
return {
searchOptions: [{
text: 'USA',
value: 1
},
{
text: 'Germany',
value: 2
},
{
text: 'France',
value: 3
},
{
text: 'Poland',
value: 4
},
{
text: 'Japan',
value: 5
}
]
};
},
methods: {
getSelectValue(value, text) {
console.log(value);
}
}
}
</script>
Colorful Multiselect with label and search box MDB Pro component
<template>
<mdb-container>
<mdb-select multiple color="info" search selectAll @getValue="getSelectValue"
:options="colorfulAndSearchOptions" label="Label example" placeholder="Choose your country" />
</mdb-container>
</template>
<script>
import {
mdbSelect,
mdbContainer
} from 'mdbvue';
export default {
name: 'SelectPage',
components: {
mdbSelect,
mdbContainer
},
data() {
return {
colorfulAndSearchOptions: [{
text: 'USA',
value: 1
},
{
text: 'Germany',
value: 2
},
{
text: 'France',
value: 3
},
{
text: 'Poland',
value: 4
},
{
text: 'Japan',
value: 5
}
]
};
},
methods: {
getSelectValue(value, text) {
console.log(value);
}
}
}
</script>
Multiselect with options groups and search box MDB Pro component
<template>
<mdb-container>
<mdb-select multiple search selectAll @getValue="getSelectValue" :options="groupsAndSearchOptions" />
</mdb-container>
</template>
<script>
import {
mdbSelect,
mdbContainer
} from 'mdbvue';
export default {
name: 'SelectPage',
components: {
mdbSelect,
mdbContainer
},
data() {
return {
groupsAndSearchOptions: [{
text: 'team 1',
value: null,
disabled: true,
optgroup: true
},
{
text: 'Option nr 1',
value: 'Option 1',
selected: true
},
{
text: 'Option nr 2',
value: 'Option 2'
},
{
text: 'team 2',
value: null,
disabled: true,
optgroup: true
},
{
text: 'Option nr 3',
value: 'Option 3'
},
{
text: 'Option nr 4',
value: 'Option 4'
}
]
};
},
methods: {
getSelectValue(value, text) {
console.log(value);
}
}
}
</script>
Multiselect with icons and search box MDB Pro component
<template>
<mdb-container>
<mdb-select multiple search selectAll @getValue="getSelectValue" :options="iconsAndSearchOptions" />
</mdb-container>
</template>
<script>
import {
mdbSelect,
mdbContainer
} from 'mdbvue';
export default {
name: 'SelectPage',
components: {
mdbSelect,
mdbContainer
},
data() {
return {
iconsAndSearchOptions: [{
text: 'Option nr 1',
value: 'Option 1',
icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-1.webp'
},
{
text: 'Option nr 2',
value: 'Option 2',
icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-2.webp'
},
{
text: 'Option nr 3',
value: 'Option 3',
icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-3.webp'
}
]
};
},
methods: {
getSelectValue(value, text) {
console.log(value);
}
}
}
</script>
Multiselect - API
In this section you will find advanced information about the Multiselect component. You will learn which modules are required in this component, what are the possibilities of configuring the component, and what events and methods you can use in working with it.
Import statement
<script>
import {
mdbSelect
} from 'mdbvue';
</script>
API Reference: Properties
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
caretClass |
String | |
Allows defining caret classes |
<mdb-select caretClass="..." ... />
|
caretStyle |
String | |
Allows defining caret styles |
<mdb-select caretStyle="..." ... />
|
color |
String | default |
Defines select hover color |
<mdb-select color="secondary" ... />
|
disabled |
Boolean | false |
Disables select or each option |
<mdb-select disabled ... />
|
label |
String | |
Changes input's label |
<mdb-select label="Example label" ... />
|
limitPlaceholder
|
String | 'options selected' |
Changes default placeholder for more than 5 options |
<mdb-select limitPlaceholder="selected" ... />
|
multiple |
Boolean | false |
Allows multiple sellection |
<mdb-select multiple ... />
|
search |
Boolean | false |
Adding search input inside dropdown menu |
<mdb-select search ... />
|
searchPlaceholder
|
String | 'Search here...' |
Defines search placeholder |
<mdb-select searchPlaceholder="Search" ... />
|
selectAll |
Boolean | false |
Adding select all option |
<mdb-select selectAll ... />
|
selectAllPlaceholder
|
String | 'Select all' |
Changes select all option default value |
<mdb-select selectAllPlaceholder="..." ... />
|
wrapperClass
|
String | |
Allows defining wrapper classes |
<mdb-select wrapperClass="..." ... />
|
wrapperStyle
|
String | |
Allows defining wrapper styles |
<mdb-select wrapperStyle="..." ... />
|
validation |
Boolean | false |
Enables default validation |
<mdb-select validation ... />
|
customValidation
|
Boolean | false |
Enables custom validation |
<mdb-select customValidation ... />
|
isValid |
Boolean | false |
Custom validation check |
<mdb-select :isValid="true" ... />
|
validFeedback
|
[String, Boolean] | false |
Valid feedback label |
<mdb-select validFeedback="Correct" ... />
|
invalidFeedback
|
[String, Boolean] | false |
Invalid feedback label |
<mdb-select :invalidFeedback="Incorrect" ... />
|
outline |
Boolean | |
Changes material select to outline style |
<mdb-select outline ... />
|
placeholder
|
String | |
Sets a placeholder in select's input field |
<mdb-select placeholder="placeholder" ... />
|
icon |
String | |
Adds an icon |
<mdb-select icon="envelope" ... />
|
iconClass |
String | |
Adds custom classes to an icon |
<mdb-select icon="envelope" iconClass="purple-text" ...
/>
|
far |
Boolean | |
Changes icon's style to regular |
<mdb-select icon="..." far ... />
|
fal |
Boolean | |
Changes icon's style to light |
<mdb-select icon="..." fal ... />
|
fab |
Boolean | |
Changes icon's style to brands |
<mdb-select icon="..." fab ... />
|
scroll |
Boolean | true |
Enables scrolling the dropdown's content |
<mdb-select scroll />
|
visibleOptions |
Number | 4 |
Indicates maximum number of options visible in the dropwdown with scroll enabled |
<mdb-select :visibleOptions="6" />
|
flipOnScroll |
Boolean | true |
If set to true, select will adjust its position while scroll/resize events |
<mdb-select flipOnScroll />
|
resultText |
String | no results |
Information showed in search dropdown when nothing was found |
<mdb-select searcg resultText="Nothing to show!" />
|
show |
Boolean | |
Prop which allow to toggle dropdown from outside |
<mdb-select :show="toggleDropdown" />
|
resetBtn |
Boolean | false |
Shows button which can be used to reset select to its initial state |
<mdb-select resetBtn />
|
API Reference: Methods
| Name | Parameters | Description | Example |
|---|---|---|---|
v-on:getValue |
value, text | Returns select value and text. Use this method to handle select state changes. |
<mdb-select @getValue="getSelectValue" />
|
validate |
Validate select. |
<mdb-select v-model="options" validation
ref="select" /> <mdb-btn size="sm"
color="primary"
@click.native="$refs.select.validate()">Validate</mdb-btn>
|
|
v-on:focus |
e |
Emitted on input's native focus event, meaning when the
field gains focus.
|
<mdb-select @focus="onFocus" />
|
v-on:blur |
e |
Emitted on input's native blur event, meaning when the
field looses focus.
|
<mdb-select @blur="onBlur" />
|
v-on:toggleSelect |
Boolean | Emitted when dropdown is toggled |
<mdb-select :show="showDropdown" @toggleSelect="showDropdown = $event" />
|
API Reference: Slots
| Name | Description | Example |
|---|---|---|
v-slot:footer |
Allows to insert a save btn in the multi select's footer |
<mdb-select multiple> <template #footer> ... </template></mdb-select>
|