Vue Bootstrap Multiselect MDB Pro component

Vue Multiselect - Bootstrap 4 & Material Design

Vue Multiselect - Bootstrap 4 & Material Design allows users to tick multiple options from a standard Vue Bootstrap select.

Its implementation is quite simple, and in exchange brings a lot of UX value.

Examples of Vue Bootstrap Multiselect use:

  • Ingredient choice within a pizza delivery system
  • Laptop hardware configuration an online shop
  • Flight booking customization

Full documentation of our select

You can find detailed documentation and all available options in our Material Select documentation.


Default multiselect



            <template>
              <mdb-container>
                <select class="browser-default custom-select" multiple v-model="multiSelected">
                  <option value="1" selected>One</option>
                  <option value="2">Two</option>
                  <option value="3">Three</option>
                  <option value="4">Four</option>
                </select>
              </mdb-container>
            </template>

          


            <script>
              import { mdbContainer } from 'mdbvue';
              
              export default {
                name: 'MultiSelectPageFree',
                components: {
                  mdbContainer
                },
                data() {
                  return {
                    multiSelected: ['1']
                  };
                }
              };
            </script>

          

Standard multiselect MDB Pro component


            <template>
              <mdb-container>
                <mdb-select multiple selectAll @getValue="getSelectValue" :options="countries" />
              </mdb-container>
            </template>
          

            <script>
              import { mdbSelect, mdbContainer } from 'mdbvue';
              export default {
                name: 'SelectPage',
                components: {
                  mdbSelect,
                  mdbContainer
                },
                data() {
                  return {
                    countries: [
                      { text: 'Choose your country', value: null, disabled: true, selected: true },
                      { text: 'USA', value: 1 }, 
                      { text: 'Germany', value: 2 }, 
                      { text: 'France', value: 3 }, 
                      { text: 'Poland', value: 4 }, 
                      { text: 'Japan', value: 5 }
                    ]
                  };
                },
                methods: {
                  getSelectValue(value, text) {
                    console.log(value);
                  }
                }
              }
            </script>
          

Multiselect with label MDB Pro component


        <template>
          <mdb-container>
            <mdb-select multiple selectAll @getValue="getSelectValue" :options="countries" label="Example label" />
          </mdb-container>
        </template>
      

        <script>
          import { mdbSelect, mdbContainer } from 'mdbvue';
          export default {
            name: 'SelectPage',
            components: {
              mdbSelect,
              mdbContainer
            },
            data() {
              return {
                countries: [
                  { text: 'Choose your country', value: null, disabled: true, selected: true },
                  { text: 'USA', value: 1 }, 
                  { text: 'Germany', value: 2 }, 
                  { text: 'France', value: 3 }, 
                  { text: 'Poland', value: 4 }, 
                  { text: 'Japan', value: 5 }
                ]
              };
            },
            methods: {
              getSelectValue(value, text) {
                console.log(value);
              }
            }
          }
        </script>
      

Colorful Multiselect with label MDB Pro component


        <template>
          <mdb-container>
            <mdb-select multiple color="danger" selectAll @getValue="getSelectValue" :options="countries" label="Label example" />
          </mdb-container>
        </template>
      

        <script>
          import { mdbSelect, mdbContainer } from 'mdbvue';
          export default {
            name: 'SelectPage',
            components: {
              mdbSelect,
              mdbContainer
            },
            data() {
              return {
                countries: [
                  { text: 'Choose your country', value: null, disabled: true, selected: true },
                  { text: 'USA', value: 1 }, 
                  { text: 'Germany', value: 2 }, 
                  { text: 'France', value: 3 }, 
                  { text: 'Poland', value: 4 }, 
                  { text: 'Japan', value: 5 }
                ]
              };
            },
            methods: {
              getSelectValue(value, text) {
                console.log(value);
              }
            }
          }
        </script>
      

Multiselect with options groups MDB Pro component


        <template>
          <mdb-container>
            <mdb-select multiple selectAll @getValue="getSelectValue" :options="groupOptions" />
          </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' }
                ]
              };
            },
            methods: {
              getSelectValue(value, text) {
                console.log(value);
              }
            }
          }
        </script>
      

Multiselect with icons MDB Pro component


        <template>
          <mdb-container>
            <mdb-select multiple selectAll @getValue="getSelectValue" :options="iconOptions" />
          </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' }
                ]
              };
            },
            methods: {
              getSelectValue(value, text) {
                console.log(value);
              }
            }
          }
        </script>
      

Multiselect with search box MDB Pro component


        <template>
          <mdb-container>
            <mdb-select multiple selectAll search @getValue="getSelectValue" :options="searchOptions" />
          </mdb-container>
        </template>
      

        <script>
          import { mdbSelect, mdbContainer } from 'mdbvue';
          export default {
            name: 'SelectPage',
            components: {
              mdbSelect,
              mdbContainer
            },
            data() {
              return {
                searchOptions: [
                  { text: 'Choose your country', value: null, disabled: true, selected: true },
                  { text: 'USA', value: 1 }, 
                  { text: 'Germany', value: 2 }, 
                  { text: 'France', value: 3 }, 
                  { text: 'Poland', value: 4 }, 
                  { text: 'Japan', value: 5 }
                ]
              };
            },
            methods: {
              getSelectValue(value, text) {
                console.log(value);
              }
            }
          }
        </script>
      

Multiselect with label and search box MDB Pro component


        <template>
          <mdb-container>
            <mdb-select multiple selectAll search @getValue="getSelectValue" :options="searchOptions" label="Label example" />
          </mdb-container>
        </template>
      

        <script>
          import { mdbSelect, mdbContainer } from 'mdbvue';
          export default {
            name: 'SelectPage',
            components: {
              mdbSelect,
              mdbContainer
            },
            data() {
              return {
                searchOptions: [
                  { text: 'Choose your country', value: null, disabled: true, selected: true },
                  { text: 'USA', value: 1 }, 
                  { text: 'Germany', value: 2 }, 
                  { text: 'France', value: 3 }, 
                  { text: 'Poland', value: 4 }, 
                  { text: 'Japan', value: 5 }
                ]
              };
            },
            methods: {
              getSelectValue(value, text) {
                console.log(value);
              }
            }
          }
        </script>
      

Colorful Multiselect with label and search box MDB Pro component


        <template>
          <mdb-container>
            <mdb-select multiple color="info" search selectAll @getValue="getSelectValue" :options="colorfulAndSearchOptions" label="Label example" />
          </mdb-container>
        </template>
      

        <script>
          import { mdbSelect, mdbContainer } from 'mdbvue';
          export default {
            name: 'SelectPage',
            components: {
              mdbSelect,
              mdbContainer
            },
            data() {
              return {
                colorfulAndSearchOptions: [
                  { text: 'Choose your country', value: null, disabled: true, selected: true },
                  { text: 'USA', value: 1 }, 
                  { text: 'Germany', value: 2 }, 
                  { text: 'France', value: 3 }, 
                  { text: 'Poland', value: 4 }, 
                  { text: 'Japan', value: 5 }
                ]
              };
            },
            methods: {
              getSelectValue(value, text) {
                console.log(value);
              }
            }
          }
        </script>
      

Multiselect with options groups and search box MDB Pro component


        <template>
          <mdb-container>
            <mdb-select multiple search selectAll @getValue="getSelectValue" :options="groupsAndSearchOptions" />
          </mdb-container>
        </template>
      

        <script>
        import { mdbSelect, mdbContainer } from 'mdbvue';
        export default {
          name: 'SelectPage',
          components: {
            mdbSelect,
            mdbContainer
          },
          data() {
            return {
              groupsAndSearchOptions: [
                { 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' }
              ]
            };
          },
          methods: {
            getSelectValue(value, text) {
              console.log(value);
            }
          }
        }
        </script>
      

Multiselect with icons and search box MDB Pro component


        <template>
          <mdb-container>
            <mdb-select multiple search selectAll @getValue="getSelectValue" :options="iconsAndSearchOptions" />
          </mdb-container>
        </template>
      

        <script>
          import { mdbSelect, mdbContainer } from 'mdbvue';
          export default {
            name: 'SelectPage',
            components: {
              mdbSelect,
              mdbContainer
            },
            data() {
              return {
                iconsAndSearchOptions: [
                  { 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' }
                ]
              };
            },
            methods: {
              getSelectValue(value, text) {
                console.log(value);
              }
            }
          }
        </script>
      

Multiselect - API

In this section you will find advanced information about the Multiselect 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


          import { mdbSelect } from 'mdbvue';
      

API Reference: Properties

Name Type Default Description Example
btnSave Boolean true Enables/disables save button in multiselect <mdb-select :btnSave="false" ... />
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="..." ... />

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" />