Vue Bootstrap Select
Vue Select - Bootstrap 4 & Material Design
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.
Default 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" />
</mdb-container>
</template>
<script>
import { mdbSelect, mdbContainer } from 'mdbvue';
export default {
name: 'SelectPage',
components: {
mdbSelect,
mdbContainer
},
data() {
return {
basicOptions: [
{ text: 'Choose your option', value: null, disabled: true, selected: true },
{ 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.
ins
9.
dark
Select with search box MDB Pro component
<template>
<mdb-container>
<mdb-select search v-model="searchOptions" />
</mdb-container>
</template>
<script>
import { mdbSelect, mdbContainer } from 'mdbvue';
export default {
name: 'SelectPage',
components: {
mdbSelect,
mdbContainer
},
data() {
return {
searchOptions: [
{ text: 'Choose your option', value: null, disabled: true, selected: true },
{ 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" />
</mdb-container>
</template>
<script>
import { mdbSelect, mdbContainer } from 'mdbvue';
export default {
name: 'SelectPage',
components: {
mdbSelect,
mdbContainer
},
data() {
return {
labelOptions: [
{ text: 'Choose your option', value: null, disabled: true, selected: true },
{ 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>
Multiple select MDB Pro component
<template>
<mdb-container>
<mdb-select multiple selectAll v-model="multiOptions" label="Example label" />
</mdb-container>
</template>
<script>
import { mdbSelect, mdbContainer } from 'mdbvue';
export default {
name: 'SelectPage',
components: {
mdbSelect,
mdbContainer
},
data() {
return {
multiOptions: [
{ text: 'Choose your options', value: null, disabled: true, selected: true },
{ 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" />
</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' }
]
};
}
}
</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-container>
</template>
<script>
import { mdbSelect, mdbContainer } from 'mdbvue';
export default {
name: 'SelectPage',
components: {
mdbSelect,
mdbContainer
},
data() {
return {
disabledOptions: [
{ text: 'Choose your option', value: null, disabled: true, selected: true },
{ 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" />
</mdb-col>
</mdb-row>
</template>
<script>
import { mdbSelect, mdbRow, mdbCol } from 'mdbvue';
export default {
name: 'SelectPage',
components: {
mdbSelect,
mdbRow,
mdbCol
},
data() {
return {
outlineOptions: [
{ text: 'Choose your option', value: null, disabled: true, selected: true },
{ 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>
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 |
---|---|---|---|---|
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="..." ... />
|
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 ... />
|
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" />
|
reset |
Resets select to default values. |
<mdb-select v-model="options" ref="select"
/> <mdb-btn size="sm" color="danger"
@click.native="$refs.select.reset()">Reset</mdb-btn>
|
|
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" />
|