Vue Bootstrap Multiselect MDB Pro component
Vue Multiselect - Bootstrap 4 & Material Design
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.
Default multiselect
<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" />
</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 label MDB Pro component
<template>
<mdb-container>
<mdb-select multiple selectAll @getValue="getSelectValue" :options="countries" label="Example label" />
</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>
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
<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" />
</mdb-container>
</template>
<script>
import { mdbSelect, mdbContainer } from 'mdbvue';
export default {
name: 'SelectPage',
components: {
mdbSelect,
mdbContainer
},
data() {
return {
iconOptions: [
{ text: 'Choose your option', value: null, disabled: true, selected: true },
{ text: 'Option nr 1', value: 'Option 1', icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-1.jpg' },
{ text: 'Option nr 2', value: 'Option 2', icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-2.jpg' },
{ text: 'Option nr 3', value: 'Option 3', icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-3.jpg' }
]
};
},
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" />
</mdb-container>
</template>
<script>
import { mdbSelect, mdbContainer } from 'mdbvue';
export default {
name: 'SelectPage',
components: {
mdbSelect,
mdbContainer
},
data() {
return {
searchOptions: [
{ 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 label and search box MDB Pro component
<template>
<mdb-container>
<mdb-select multiple selectAll search @getValue="getSelectValue" :options="searchOptions" label="Label example" />
</mdb-container>
</template>
<script>
import { mdbSelect, mdbContainer } from 'mdbvue';
export default {
name: 'SelectPage',
components: {
mdbSelect,
mdbContainer
},
data() {
return {
searchOptions: [
{ 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>
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" />
</mdb-container>
</template>
<script>
import { mdbSelect, mdbContainer } from 'mdbvue';
export default {
name: 'SelectPage',
components: {
mdbSelect,
mdbContainer
},
data() {
return {
colorfulAndSearchOptions: [
{ 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 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: 'Choose your option', value: null, disabled: true, selected: true },
{ text: 'Option nr 1', value: 'Option 1', icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-1.jpg' },
{ text: 'Option nr 2', value: 'Option 2', icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-2.jpg' },
{ text: 'Option nr 3', value: 'Option 3', icon: 'https://mdbootstrap.com/img/Photos/Avatars/avatar-3.jpg' }
]
};
},
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
import { mdbSelect } from 'mdbvue';
API Reference: Properties
Name | Type | Default | Description | Example |
---|---|---|---|---|
btnSave |
Boolean | true |
Enables/disables save button in multiselect | <mdb-select :btnSave="false" ... /> |
btnSavePlaceholder |
String | 'Save' |
Allows defining save button placeholder | <mdb-select btnSavePlaceholder="Exit" ... /> |
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="..." ... /> |
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" /> |