web
mobile
Edit these docs Rate these docs

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.

This documentation may contain syntax introduced in the MDB Vue 6.0.0 and can be not compatible with previous versions. See legacy docs.

Vue live preview

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" label="Choose your country"/>
              </mdb-container>
            </template>
          

            <script>
              import { mdbSelect, mdbContainer } from 'mdbvue';
              export default {
                name: 'SelectPage',
                components: {
                  mdbSelect,
                  mdbContainer
                },
                data() {
                  return {
                    countries: [
                      { 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" placeholder="Choose your country"/>
          </mdb-container>
        </template>
      

        <script>
          import { mdbSelect, mdbContainer } from 'mdbvue';
          export default {
            name: 'SelectPage',
            components: {
              mdbSelect,
              mdbContainer
            },
            data() {
              return {
                countries: [
                  { 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" placeholder="Choose your option" />
          </mdb-container>
        </template>
      

        <script>
          import { mdbSelect, mdbContainer } from 'mdbvue';
          export default {
            name: 'SelectPage',
            components: {
              mdbSelect,
              mdbContainer
            },
            data() {
              return {
                iconOptions: [
                  { 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" placeholder="Choose your country'/>
          </mdb-container>
        </template>
      

        <script>
          import { mdbSelect, mdbContainer } from 'mdbvue';
          export default {
            name: 'SelectPage',
            components: {
              mdbSelect,
              mdbContainer
            },
            data() {
              return {
                searchOptions: [
                  { 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" placeholder="Choose your country" />
          </mdb-container>
        </template>
      

        <script>
          import { mdbSelect, mdbContainer } from 'mdbvue';
          export default {
            name: 'SelectPage',
            components: {
              mdbSelect,
              mdbContainer
            },
            data() {
              return {
                searchOptions: [
                  { 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" placeholder="Choose your country" />
          </mdb-container>
        </template>
      

        <script>
          import { mdbSelect, mdbContainer } from 'mdbvue';
          export default {
            name: 'SelectPage',
            components: {
              mdbSelect,
              mdbContainer
            },
            data() {
              return {
                colorfulAndSearchOptions: [
                  { 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: '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>
      
Edit these docs Rate these docs

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
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="..." ... />
validation Boolean false Enables default validation <mdb-select validation ... />
customValidation Boolean false Enables custom validation <mdb-select customValidation ... />
isValid Boolean false Custom validation check <mdb-select :isValid="true" ... />
validFeedback [String, Boolean] false Valid feedback label <mdb-select validFeedback="Correct" ... />
invalidFeedback [String, Boolean] false Invalid feedback label <mdb-select :invalidFeedback="Incorrect" ... />
outline Boolean Changes material select to outline style <mdb-select outline ... />
placeholder String Sets a placeholder in select's input field <mdb-select placeholder="placeholder" ... />
icon String Adds an icon <mdb-select icon="envelope" ... />
iconClass String Adds custom classes to an icon <mdb-select icon="envelope" iconClass="purple-text" ... />
far Boolean Changes icon's style to regular <mdb-select icon="..." far ... />
fal Boolean Changes icon's style to light <mdb-select icon="..." fal ... />
fab Boolean Changes icon's style to brands <mdb-select icon="..." fab ... />
scroll Boolean true Enables scrolling the dropdown's content <mdb-select scroll />
visibleOptions Number 4 Indicates maximum number of options visible in the dropwdown with scroll enabled <mdb-select :visibleOptions="6" />
flipOnScroll Boolean true If set to true, select will adjust its position while scroll/resize events <mdb-select flipOnScroll />
resultText String no results Information showed in search dropdown when nothing was found <mdb-select searcg resultText="Nothing to show!" />
show Boolean Prop which allow to toggle dropdown from outside <mdb-select :show="toggleDropdown" />
resetBtn Boolean false Shows button which can be used to reset select to its initial state <mdb-select resetBtn />

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" />
validate Validate select. <mdb-select v-model="options" validation ref="select" /> <mdb-btn size="sm" color="primary" @click.native="$refs.select.validate()">Validate</mdb-btn>
v-on:focus e Emitted on input's native focus event, meaning when the field gains focus. <mdb-select @focus="onFocus" />
v-on:blur e Emitted on input's native blur event, meaning when the field looses focus. <mdb-select @blur="onBlur" />
v-on:toggleSelect Boolean Emitted when dropdown is toggled <mdb-select :show="showDropdown" @toggleSelect="showDropdown = $event" />

API Reference: Slots

Name Description Example
v-slot:footer Allows to insert a save btn in the multi select's footer <mdb-select multiple> <template #footer> ... </template></mdb-select>