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.

This value is valid
This value is invalid
✕
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>