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 standard Select, 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 - read Select Docs & API section

Basic example

Add multiple attribute to the select element to activate multiple mode.

Note: This component requires MDBootstrap Pro package.

Edit in sandbox 
        
            
          <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

Add icon data attribute to the specific options to display the option icon.

Edit in sandbox 
        
            
          <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 validation option to true to enable component validation. The validFeedback and invalidFeedback options allow to modify the validation messages.

Edit in sandbox 
        
            
          <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>