Multiselect
Vue Bootstrap Multiselect - free examples, templates & tutorial
Responsive Vue Multiselect built with Bootstrap 5. Examples of multiselect dropdown with checkbox, listbox, search, buttons, groups, icons, validation, disabled
Unlike a standardSelect, multiselect allows the user to select multiple options at once.
Note: To learn more about Select component and see all available options, methods, events and advanced usage - readSelect Docs & API section
Basic example
Addmultiple attribute to the select element to activate multiple mode.
Note: This component requiresMDBootstrap Pro package.
<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>Multiselect with icons
Addicon data attribute 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
Setvalidation option totrue to enable component validation. ThevalidFeedback andinvalidFeedback options allow to modify the validation messages.
<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 === "") { isValid.value = false; } else { isValid.value = true; } }; return { options8, selected8, isValid, isValidated, validate }; } }; </script>Related resources
If you want to support our friends from TW Elements you can also check out theTailwind multiselect documentation.