Select
Vue Bootstrap 5 Select
Vue Select fields components are used for collecting user provided information from a list of options.
Note: Read the API tab to find all available options and advanced customization
Basic example
Select options are added using v-model with the
options argument. You can get selected values in two ways. The first is to filter
the data given in v-model:options by a selected key. The second
method is to use v-model:selected which is read-only and stores the currently
selected options as a string (single select) or as an array (multiple select).
Basic select behaves like a native one and by default marks the first available option as
selected. To change this setting, easily set the
preselect property to false.
<template>
<MDBSelect v-model:options="options1" v-model:selected="selected1" />
</template>
<script>
import { MDBSelect } from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBSelect
},
setup() {
const options1 = ref([
{ text: "One", value: 1 },
{ text: "Two", value: 2 },
{ text: "Three", value: 3 },
{ text: "Four", value: 4 },
{ text: "Five", value: 5 },
{ text: "Six", value: 6 },
{ text: "Seven", value: 7 },
{ text: "Eight", value: 8 }
]);
const selected1 = ref("");
return {
options1,
selected1
};
}
};
</script>
Multiselect
Add multiple property to the select component to activate multiple mode.
<template>
<MDBSelect
v-model:options="options2"
v-model:selected="selected2"
multiple
label="Example label"
/>
</template>
<script>
import { MDBSelect } from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBSelect
},
setup() {
const options2 = ref([
{ text: "One", value: 1 },
{ text: "Two", value: 2 },
{ text: "Three", value: 3 },
{ text: "Four", value: 4 },
{ text: "Five", value: 5 },
{ text: "Six", value: 6 },
{ text: "Seven", value: 7 },
{ text: "Eight", value: 8 }
]);
const selected2 = ref([]);
return {
options2,
selected2
};
}
};
</script>
Select with label
It is possible to add select label by setting the
label property.
<template>
<MDBSelect v-model:options="options3" label="Example label" />
</template>
<script>
import { MDBSelect } from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBSelect
},
setup() {
const options3 = ref([
{ text: "One", value: 1 },
{ text: "Two", value: 2 },
{ text: "Three", value: 3 },
{ text: "Four", value: 4 },
{ text: "Five", value: 5 }
]);
return {
options3
};
}
};
</script>
Select with placeholder
Use placeholder property to set placeholder for select input. The placeholder
will be displayed when input is focused and no option is selected.
<template>
<MDBSelect
v-model:options="options4"
multiple
placeholder="Example placeholder"
/>
</template>
<script>
import { MDBSelect } from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBSelect
},
setup() {
const options4 = ref([
{ text: "One", value: 1 },
{ text: "Two", value: 2 },
{ text: "Three", value: 3 },
{ text: "Four", value: 4 },
{ text: "Five", value: 5 }
]);
return {
options4
};
}
};
</script>
Disabled select
Add disabled attribute to the select component to disable select input.
<template>
<MDBSelect
v-model:options="options5"
disabled
/>
</template>
<script>
import { MDBSelect } from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBSelect
},
setup() {
const options5 = ref([
{ text: "One", value: 1 },
{ text: "Two", value: 2 },
{ text: "Three", value: 3 },
{ text: "Four", value: 4 },
{ text: "Five", value: 5 }
]);
return {
options5
};
}
};
</script>
Disabled options
Use disabled key on option element to disable specific option.
<template>
<MDBSelect v-model:options="options6" />
</template>
<script>
import { MDBSelect } from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBSelect
},
setup() {
const options6 = ref([
{ text: "One", value: 1 },
{ text: "Two", value: 2, disabled: true },
{ text: "Three", value: 3, disabled: true },
{ text: "Four", value: 4 },
{ text: "Five", value: 5 }
]);
return {
options6
};
}
};
</script>
Custom content
Custom content will be displayed at the end of the select dropdown.
<template>
<MDBSelect v-model:options="options9">
<MDBBtn color="primary" size="sm">Save</MDBBtn>
</MDBSelect>
</template>
<script>
import { MDBSelect, MDBBtn } from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBSelect,
MDBBtn
},
setup() {
const options9 = ref([
{ text: "One", value: 1 },
{ text: "Two", value: 2 },
{ text: "Three", value: 3 },
{ text: "Four", value: 4 },
{ text: "Five", value: 5 }
]);
return {
options9
};
}
};
</script>
Visible options
Use visibleOptions property to change the number of options that will be
displayed in the select dropdown without scrolling.
<template>
<MDBSelect v-model:options="options10" :visibleOptions="3" />
</template>
<script>
import { MDBSelect } from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBSelect
},
setup() {
const options10 = ref([
{ text: "One", value: 1 },
{ text: "Two", value: 2 },
{ text: "Three", value: 3 },
{ text: "Four", value: 4 },
{ text: "Five", value: 5 }
]);
return {
options10
};
}
};
</script>
Secondary text
Add secondary-text key to the specific options to display secondary text.
<template>
<MDBSelect v-model:options="options11" :optionHeight="44" />
</template>
<script>
import { MDBSelect } from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBSelect
},
setup() {
const options11 = ref([
{ text: "One", secondaryText: "Secondary text", value: 1 },
{ text: "Two", secondaryText: "Secondary text", value: 2 },
{ text: "Three", secondaryText: "Secondary text", value: 3 },
{ text: "Four", secondaryText: "Secondary text", value: 4 },
{ text: "Five", secondaryText: "Secondary text", value: 5 }
]);
return {
options11
};
}
};
</script>
Search
Set filter property to enable options filtering.
<template>
<MDBSelect v-model:options="options12" filter />
</template>
<script>
import { MDBSelect } from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBSelect
},
setup() {
const options12 = ref([
{ text: "One", value: 1 },
{ text: "Two", value: 2 },
{ text: "Three", value: 3 },
{ text: "Four", value: 4 },
{ text: "Five", value: 5 },
{ text: "Six", value: 6 },
{ text: "Seven", value: 7 },
{ text: "Eight", value: 8 },
{ text: "Nine", value: 9 },
{ text: "Ten", value: 10 },
]);
return {
options12
};
}
};
</script>
Select with search inside a modal
<template>
<MDBBtn color="primary" aria-controls="exampleModal" @click="modal1 = true">Launch demo modal</MDBBtn>
<MDBModal id="modal" tabindex="-1" labelledby="modalLabel" v-model="modal1">
<MDBModalHeader>
<MDBModalTitle id="modalLabel"> Modal title </MDBModalTitle>
</MDBModalHeader>
<MDBModalBody>
<MDBSelect v-model:options="options13" filter />
</MDBModalBody>
<MDBModalFooter>
<MDBBtn color="secondary" @click="modal1 = false">Close</MDBBtn>
<MDBBtn color="primary">Save changes</MDBBtn>
</MDBModalFooter>
</MDBModal>
</template>
<script>
import {
MDBSelect,
MDBBtn,
MDBModal,
MDBModalHeader,
MDBModalTitle,
MDBModalBody,
MDBModalFooter
} from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBSelect,
MDBBtn,
MDBModal,
MDBModalHeader,
MDBModalTitle,
MDBModalBody,
MDBModalFooter
},
setup() {
const options13 = ref([
{ text: "One", value: 1 },
{ text: "Two", value: 2 },
{ text: "Three", value: 3 },
{ text: "Four", value: 4 },
{ text: "Five", value: 5 },
{ text: "Six", value: 6 },
{ text: "Seven", value: 7 },
{ text: "Eight", value: 8 },
{ text: "Nine", value: 9 },
{ text: "Ten", value: 10 }
]);
const modal1 = ref(false);
return {
options13,
modal1
};
}
};
</script>
Option groups
It is possible to group options by using optgroup key.
<template>
<MDBSelect v-model:options="options14" />
</template>
<script>
import { MDBSelect } from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBSelect
},
setup() {
const options14 = ref([
{ text: "Label 1", optgroup: true, disabled: true },
{ text: "One", value: 1 },
{ text: "Two", value: 2 },
{ text: "Three", value: 3 },
{ text: "Label 2", optgroup: true, disabled: true },
{ text: "Four", value: 4 },
{ text: "Five", value: 5 },
{ text: "Six", value: 6 }
]);
return {
options14
};
}
};
</script>
Select with icons
Add icon property to the specific options to display the option icon.
<template>
<MDBSelect v-model:options="options15" />
</template>
<script>
import { MDBSelect } from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBSelect
},
setup() {
const options15 = ref([
{
text: "One",
value: 1,
icon: "https://mdbootstrap.com/img/Photos/Avatars/avatar-1.webp"
},
{
text: "Two",
value: 2,
icon: "https://mdbootstrap.com/img/Photos/Avatars/avatar-2.webp"
},
{
text: "Three",
value: 3,
icon: "https://mdbootstrap.com/img/Photos/Avatars/avatar-3.webp"
},
{
text: "Four",
value: 4,
icon: "https://mdbootstrap.com/img/Photos/Avatars/avatar-4.webp"
},
{
text: "Five",
value: 5,
icon: "https://mdbootstrap.com/img/Photos/Avatars/avatar-5.webp"
}
]);
return {
options15
};
}
};
</script>
Validation
Set isValidated and isValid properties to enable component
validation. The validFeedback and invalidFeedback options allow to
modify the validation messages. Validate method can be set on select's
change
event.
<template>
<MDBSelect
v-model:options="options8"
v-model:selected="selected8"
clearButton
:isValidated="isValidated"
:isValid="isValid"
required
validFeedback="This value is valid"
invalidFeedback="This value is invalid"
@change="validate"
/>
<MDBBtn
@click="
validate();
isValidated = true;
"
color="primary"
size="sm"
class="mt-3"
>
Submit
</MDBBtn>
</template>
<script>
import { MDBSelect, MDBBtn } from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBSelect,
MDBBtn
},
setup() {
const options8 = ref([
{ text: "One", value: 1 },
{ text: "Two", value: 2 },
{ text: "Three", value: 3 },
{ text: "Four", value: 4 },
{ text: "Five", value: 5 }
]);
const selected8 = ref([]);
const isValidated = ref(false);
const isValid = ref(false);
const validate = () => {
if (selected8.value === "" || !selected8.value) {
isValid.value = false;
} else {
isValid.value = true;
}
};
return {
options8,
selected8,
isValid,
isValidated,
validate
};
}
};
</script>
Set value
The setValue method allows to programatically set the component selections.
Single selection
Add single value string to the arguments list to correctly select option with corresponding value in single selection mode.
<template>
<MDBSelect
v-model:options="options16"
v-model:selected="selected16"
ref="select16"
/>
<MDBBtn
class="mt-2"
color="primary"
size="sm"
@click="$refs.select16.setValue(4)"
>Select four
</MDBBtn>
</template>
<script>
import { MDBSelect, MDBBtn } from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBSelect,
MDBBtn
},
setup() {
const options16 = ref([
{ text: "One", value: 1 },
{ text: "Two", value: 2 },
{ text: "Three", value: 3 },
{ text: "Four", value: 4 },
{ text: "Five", value: 5 },
{ text: "Six", value: 6 },
{ text: "Seven", value: 7 },
{ text: "Eight", value: 8 }
]);
const selected16 = ref("");
return {
options16,
selected16
};
}
};
</script>
Multi selection
Add array of string values to the arguments list to correctly select options with corresponding values in multi selection mode.
<template>
<MDBSelect v-model:options="options17" v-model:selected="selected17" multiple ref="select17" />
<MDBBtn class="mt-2" color="primary" size="sm" @click="$refs.select17.setValue([3, 4, 5])">Select three, four, five
</MDBBtn>
</template>
<script>
import { MDBSelect, MDBBtn } from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBSelect,
MDBBtn
},
setup() {
const options17 = ref([
{ text: "One", value: 1 },
{ text: "Two", value: 2 },
{ text: "Three", value: 3 },
{ text: "Four", value: 4 },
{ text: "Five", value: 5 },
{ text: "Six", value: 6 },
{ text: "Seven", value: 7 },
{ text: "Eight", value: 8 }
]);
const selected17 = ref("");
return {
options17,
selected17
};
}
};
</script>
Auto select
Set autoSelect option to true to enable selecting on Tab press.
<template>
<MDBSelect v-model:options="options18" v-model:selected="selected18" autoSelect />
</template>
<script>
import { MDBSelect } from "mdb-vue-ui-kit";
import { ref } from "vue";
export default {
components: {
MDBSelect
},
setup() {
const options18 = ref([
{ text: "One", value: 1 },
{ text: "Two", value: 2 },
{ text: "Three", value: 3 },
{ text: "Four", value: 4 },
{ text: "Five", value: 5 },
{ text: "Six", value: 6 },
{ text: "Seven", value: 7 },
{ text: "Eight", value: 8 }
]);
const selected18 = ref("");
return {
options18,
selected18
};
}
};
</script>
Select - API
Import
<script>
import { MDBSelect } from "mdb-vue-ui-kit";
</script>
Properties
| Property | Type | Default | Description |
|---|---|---|---|
autoSelect |
Boolean | false |
Enables auto selecting on Tab press |
clearButton |
Boolean | false |
Adds clear button to the select input. |
disabled |
Boolean | false |
Changes select input state to disabled. |
displayedLabels |
Number | 5 |
The maximum number of comma-separated list of options displayed on the Multiselect. If a user selects more options than that value, the X options selected text will be displayed instead. If set to -1, the limit is off. |
filter |
Boolean | false |
Displays filter input that allow to search for specific option. |
filterDebounce |
Number | 300 |
Adds delay to the options list updates when using filter input. Improves performance of the select with filter. |
invalidFeedback |
String | |
The text which is displayed below the select when the
isValidated property is true and isValid prop is false.
|
isValidated |
Boolean | false |
Marks select as validated. |
isValid |
Boolean | false |
Marks select as valid. |
label |
String | |
Defines select input label. |
multiple |
Boolean | false |
Enables multiple mode. |
noResultsText |
String | "No results" |
The text that will be displayed when no option is found after using select filter. |
optionHeight |
Number | 38 |
Height of the select option. Used to determine dropdown height and number of visible options. |
optionsSelectedLabel |
String | "options selected" |
The text which is displayed on the Multiselect when there are more than 5 (default) options selected, e.g. 7 options selected |
placeholder |
String | |
Defines select input placeholder. |
preselect |
Boolean | true |
Basic select behaves like a native one and by default marks the first available option
as selected. To change this setting, easily set this property to false.
|
required |
Boolean | false |
Changes select input state to required. |
searchPlaceholder |
String | "Search..." |
Changes placeholder of the select search input. |
selectAll |
Boolean | true |
Displays select all option in multiselect dropdown. |
selectAllLabel |
String | "Select all" |
Changes label of select all option. |
size |
String | |
Changes input size. Available options: sm, lg,
default.
|
tag |
String | "div" |
Defines select wrapper tag. |
validFeedback |
String | |
The text which is displayed below the select when the
isValidated and isValid properties are true.
|
visibleOptions |
Number | 5 |
The maximum number of options which are visible in the select dropdown without scrolling. |
v-model:options |
Array | Data array required to fill select component. | |
v-model:selected |
[String, Array, Number] | Readonly and reactive property for getting selected values. |
Methods
| Name | Description | Example |
|---|---|---|
clear |
Manually clears a selection | $refs.select1.clear(); |
close |
Manually closes a select | $refs.select1.close(); |
open |
Manually opens a select | $refs.select1.open(); |
setValue |
Programatically set component selections. Add single value for default select and array of values for multiselect. | $refs.select1.setValue(3); |
setOption |
Programatically set component selections by an option key. Use
-1 key to select all in multiple mode.
|
$refs.select1.setOption(2); |
toggle |
Manually toggles a select | $refs.select1.toggle(); |
toggleSelectAll |
Toggle select all. | $refs.select1.toggleSelectAll(); |
<template>
<MDBSelect v-model:options="options1" ref="select1" />
<MDBBtn @click.stop="$refs.select1.setValue(3)" color="primary">
Select three
</MDBBtn >
</template>
Events
| Name | Description |
|---|---|
change |
This event fires immediately on every select data change. |
clear |
This event fires immediately when the select is cleared. |
close |
This event fires immediately when the select is closed. |
open |
This event fires immediately when the select is opened. |
<template>
<MDBSelect v-model:options="options1" @clear="handleClear" />
</template>