Vue Bootstrap Select
Vue Select - 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 Bootstrap material select is a form control which after a click displays a collapsable list of multiple values which can be used in forms, menus or surveys.
MDB provides you a variety of options and variations.
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 select
Default Select
doesn't require an initialization. You only need to add
a .browser-default class to the
select element.
<template>
<select class="browser-default custom-select">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</template>
Material select MDB Pro component
<template>
<mdb-container>
<mdb-select
v-model="basicOptions"
placeholder="Select an option"
label=""
/>
</mdb-container>
</template>
<script>
import { mdbSelect, mdbContainer } from "mdbvue";
export default {
name: "SelectPage",
components: {
mdbSelect,
mdbContainer
},
data() {
return {
basicOptions: [
{ text: "Option nr 1", value: "Option 1" },
{ text: "Option nr 2", value: "Option 2" },
{ text: "Option nr 3", value: "Option 3" }
]
};
}
};
</script>
Default input customization
Before we move on to discuss the Material Design text input we all here cherish & love, it could be worth to step back for a second and briefly go over features of plain old Bootstrap input.
You may also choose from small and large custom selects to match our similarly sized text inputs.
<template>
<div>
<select class="browser-default custom-select custom-select-lg mb-3">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="custom-select custom-select-sm">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</template>
The multiple attribute is also supported:
<template>
<select class="custom-select" multiple>
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</template>
As is the size attribute:
<template>
<select class="custom-select" size="3">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</template>
Color variations MDB Pro component
<template>
<mdb-container>
<mdb-select
color="primary"
v-model="colorOptions"
label="Blue select"
/>
</mdb-container>
</template>
<script>
import { mdbSelect, mdbContainer } from "mdbvue";
export default {
name: "SelectPage",
components: {
mdbSelect,
mdbContainer
},
data() {
return {
colorOptions: [
{ text: "Option nr 1", value: "Option 1", selected: true },
{ text: "Option nr 2", value: "Option 2" },
{ text: "Option nr 3", value: "Option 3" },
{ text: "Option nr 4", value: "Option 4" },
{ text: "Option nr 5", value: "Option 5" }
]
};
}
};
</script>
In order to change a select color use one of the following
color props:
1.
primary
2.
danger
3.
default
4.
secondary
5.
success
6.
info
7.
warning
8.
lime
9.
pink
Select with search box MDB Pro component
<template>
<mdb-container>
<mdb-select search v-model="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: 'Option nr 1', value: 'Option 1' },
{ text: 'Option nr 2', value: 'Option 2' },
{ text: 'Option nr 3', value: 'Option 3' },
{ text: 'Option nr 4', value: 'Option 4' },
{ text: 'Option nr 5', value: 'Option 5' }
]
};
}
}
</script>
<script>
import { mdbSelect, mdbContainer } from "mdbvue";
export default {
name: "SelectPage",
components: {
mdbSelect,
mdbContainer
},
data() {
return {
searchOptions: [
{ text: "Option nr 1", value: "Option 1" },
{ text: "Option nr 2", value: "Option 2" },
{ text: "Option nr 3", value: "Option 3" },
{ text: "Option nr 4", value: "Option 4" },
{ text: "Option nr 5", value: "Option 5" }
]
};
}
};
</script>
Select with label and search box MDB Pro component
<template>
<mdb-container>
<mdb-select
search
v-model="labelOptions"
label="Example label"
placeholder="Choose your option"
/>
</mdb-container>
</template>
<script>
import { mdbSelect, mdbContainer } from "mdbvue";
export default {
name: "SelectPage",
components: {
mdbSelect,
mdbContainer
},
data() {
return {
labelOptions: [
{ text: "Option nr 1", value: "Option 1" },
{ text: "Option nr 2", value: "Option 2" },
{ text: "Option nr 3", value: "Option 3" },
{ text: "Option nr 4", value: "Option 4" },
{ text: "Option nr 5", value: "Option 5" }
]
};
}
};
</script>
Search with custom filtering MDB Pro component
<template>
<mdb-container>
<mdb-select
search
:options="customSearchOptions"
label="Custom search"
:filter="(text, search) => { return text.includes(search)}"
/>
</mdb-container>
</template>
<script>
import { mdbSelect, mdbContainer } from "mdbvue";
export default {
name: "SelectPage",
components: {
mdbSelect,
mdbContainer
},
data() {
return {
customSearchOptions: [
{ text: "option", value: "Option 1" },
{ text: "Option", value: "Option 2" },
{ text: "OPTION", value: "Option 3" },
],
};
}
};
</script>
Select with default value MDB Pro component
<template>
<mdb-container>
<mdb-select
v-model="options"
label="Example label"
/>
</mdb-container>
</template>
<script>
import { mdbSelect, mdbContainer } from "mdbvue";
export default {
name: "SelectPage",
components: {
mdbSelect,
mdbContainer
},
data() {
return {
options: [
{ text: "Option nr 1", value: "Option 1", selected: true },
{ text: "Option nr 2", value: "Option 2" },
{ text: "Option nr 3", value: "Option 3" },
{ text: "Option nr 4", value: "Option 4" },
{ text: "Option nr 5", value: "Option 5" }
]
};
}
};
</script>
Multiselect variations
More multiselect examples and variations you will find in the Multiselect documentation
Multiple select MDB Pro component
<template>
<mdb-container>
<mdb-select
multiple
selectAll
v-model="multiOptions"
label="Example label"
placeholder="choose your option"
/>
</mdb-container>
</template>
<script>
import { mdbSelect, mdbContainer } from "mdbvue";
export default {
name: "SelectPage",
components: {
mdbSelect,
mdbContainer
},
data() {
return {
multiOptions: [
{ text: "Option nr 1", value: "Option 1" },
{ text: "Option nr 2", value: "Option 2" },
{ text: "Option nr 3", value: "Option 3" },
{ text: "Option nr 4", value: "Option 4" },
{ text: "Option nr 5", value: "Option 5" }
]
};
}
};
</script>
Multiselect variations
More multiselect examples and variations you will find in the Multiselect documentation
Options groups MDB Pro component
<template>
<mdb-container>
<mdb-select v-model="groupOptions" label="Example label" />
</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" }
]
};
}
};
</script>
Select with icons MDB Pro component
<template>
<mdb-container>
<mdb-select
v-model="iconOptions"
label="Example label"
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"
}
]
};
}
};
</script>
Disabled select MDB Pro component
By adding a disabled attribute to the select (or particular
option), you can make it unselectable.
<template>
<mdb-container>
<mdb-select disabled v-model="disabledOptions" label="Example label" />
<mdb-select v-model="disabledOptions" label="Example label" />
</mdb-container>
</template>
<script>
import { mdbSelect, mdbContainer } from 'mdbvue';
export default {
name: 'SelectPage',
components: {
mdbSelect,
mdbContainer
},
data() {
return {
disabledOptions: [
{ text: 'Disabled option', value: 'Disabled', disabled: true },
{ text: 'Option nr 2', value: 'Option 2' },
{ text: 'Option nr 3', value: 'Option 3' }
]
};
}
}
</script>
<script>
import { mdbSelect, mdbContainer } from "mdbvue";
export default {
name: "SelectPage",
components: {
mdbSelect,
mdbContainer
},
data() {
return {
disabledOptions: [
{ text: "Option nr 1", value: "Option 1" },
{ text: "Option nr 2", value: "Option 2" },
{ text: "Option nr 3", value: "Option 3" },
{ text: "Option nr 4", value: "Option 4" },
{ text: "Option nr 5", value: "Option 5" }
]
};
}
};
</script>
Outline select MDB Pro component
<template>
<mdb-row>
<mdb-col sm="6">
<mdb-select
outline
v-model="outlineOptions"
label="Example label"
placeholder="choose your option"
/>
</mdb-col>
</mdb-row>
</template>
<script>
import { mdbSelect, mdbRow, mdbCol } from "mdbvue";
export default {
name: "SelectPage",
components: {
mdbSelect,
mdbRow,
mdbCol
},
data() {
return {
outlineOptions: [
{ text: "Option nr 1", value: "Option 1" },
{ text: "Option nr 2", value: "Option 2" },
{ text: "Option nr 3", value: "Option 3" },
{ text: "Option nr 4", value: "Option 4" },
{ text: "Option nr 5", value: "Option 5" }
]
};
}
};
</script>
Data from API MDB Pro component
You can easily add data from an API to Select by using
axios client.
<template>
<div>
<mdb-select v-model="axiosOptions" label="Choose country" />
Selected country code: {{ this.selectedData }}
</div>
</template>
<script>
import { mdbSelect } from "mdbvue";
import axios from "axios";
export default {
name: "SelectPage",
components: {
mdbSelect
},
computed: {
selectedData() {
let response = this.axiosOptions.find(option => {
return option.selected === true;
});
if (response) {
return response.value;
}
return "Country is not selected";
}
},
data() {
return {
axiosOptions: []
};
},
mounted() {
axios
.get("https://restcountries.eu/rest/v2/region/europe")
.then(response => {
for (let i = 1; i <= 10; i++) {
this.axiosOptions.push({
text: response.data[i].name,
value: response.data[i].alpha3Code
});
}
});
}
};
</script>
Data from API - @search
MDB Pro component
Sometimes it's useful to make an API call depending on a search input value
and load options dynamically. In this case, use the
@search event along with the
disableFilter property - you need to disable default filtering
functionality, because the effect of those combined can be unpredictable.
<template>
<mdb-select
v-model="outlineOptions"
label="Select your country"
outline
search
@search="handleSearch"
disableFilter
>
<small slot="footer" class="p-2 grey-text"
>{{ loading ? "loading..." : outlineOptions.length === 0 ?
searchValue === "" ? "Start typing to load options" : "No results
found" : "Select your country" }}</small
>
</mdb-select>
</template>
<script>
import { mdbSelect } from "mdbvue";
import axios from "axios";
export default {
name: "SelectPage",
components: {
mdbSelect
},
computed: {
selectedCountry() {
const selected = this.outlineOptions.find(
option => option.selected
);
if (selected === undefined) return "";
return selected;
}
},
data() {
return {
outlineOptions: [],
searchValue: "",
loading: false
};
},
methods: {
handleSearch(value) {
this.searchValue = value;
if (value === "") {
this.outlineOptions = [];
return;
}
this.loading = true;
axios
.get(`https://restcountries.eu/rest/v2/name/${value}`)
.then(response => {
if (this.searchValue === "") return;
const options = response.data.map(country => {
return {
text: country.name,
value: country.alpha2Code,
selected: false
};
});
this.outlineOptions = options;
this.loading = false;
})
.catch(() => {
this.outlineOptions = [];
this.loading = false;
});
}
}
};
</script>
Data from API - multiple selects MDB Pro component
In the example below, the options of the second select are fetched from API depending on the first one's value.
<template>
<div>
<mdb-select
v-model="axiosOptions"
label="Choose country"
resetBtn
@change="populateLanguageSelect"/>
<mdb-select
:disabled="disableLanguageSelect"
v-model="languageOptions"
label="Choose language"
/>
<p>Selected country code: <strong>{{ selectedData }}</strong></p>
<p>Selected language: <strong>{{ selectedLanguage }}</strong></p>
</div>
</template>
<script>
import { mdbSelect } from "mdbvue";
import axios from "axios";
export default {
name: "SelectPage",
components: {
mdbSelect
},
computed: {
selectedData() {
let response = this.axiosOptions.find(option => {
return option.selected === true;
});
if (response) {
return response.value;
}
return "Country is not selected";
},
selectedLanguage() {
const selectedOption = this.languageOptions.find(option => option.selected);
return selectedOption ? selectedOption.value : "Language not selected";
},
},
data() {
return {
axiosOptions: [],
languageOptions: [],
disableLanguageSelect: false,
};
},
methods: {
populateLanguageSelect(code) {
if (code) {
fetch(`https://restcountries.eu/rest/v2/alpha/${code}`).then(resp => resp.json()).then(resp => {
this.languageOptions = resp.languages.map((language, i) => ({ value: language.name, text: language.name, selected: i === 0 }))
});
this.disableLanguageSelect = false;
}
else {
this.languageOptions = [];
this.disableLanguageSelect = true;
}
},
},
mounted() {
axios
.get("https://restcountries.eu/rest/v2/region/europe")
.then(response => {
this.axiosOptions = response.data.map(entry => {
return {
text: entry.name,
value: entry.alpha3Code,
}
})
});
}
};
</script>
Reactivity in Depth MDB Pro component
Due to the limitations of modern JavaScript (and the abandonment of Object.observe), Vue cannot detect property addition or deletion.
Vue does not allow dynamically adding new root-level reactive properties to
an already created instance. However, it’s possible to add reactive
properties to a nested object using the
Vue.set(object, propertyName, value) method. This method can
also be applied for dynamic options selecting in our
mdbSelect component.
selectOption(key) { this.basicOptions.forEach(option => {
option.selected = false; }); this.$set(this.basicOptions[key],
"selected", true); this.basicOptions.sort(); }
Select - API
In this section you will find advanced information about the Select 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 ... />
|
bg |
Boolean | |
Sets design to animated border with background |
<mdb-select bg ... />
|
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 />
|
disableFilter
|
Boolean | false |
Disables the default filtering functionality - useful for async API
calls made inside a @search handler
|
<mdb-select @search="handleSeach" disableFilter />
|
top |
Boolean | false |
Opens the dropdown on the top by default |
<mdb-select top />
|
apoBodypendT |
Boolean | false |
Appends the select's dropdown to the end of the document |
<mdb-select append-to-body />
|
filter |
Function | (text, search) => { return text.toLowerCase().includes(search.toLowerCase()) |
Function used to filter search results |
<mdb-select :filter="(text, search) => { return text === search }" />
|
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" />
|
v-on:search |
Boolean | Emits a value of a search input |
<mdb-select search @search="..." />
|
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>
|