Vue Bootstrap Select

Vue Select - Bootstrap 4 & Material Design

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

Vue Bootstrap material select is a form control which after a click displays a collapsable list of multiple values which can be used in forms, menus or surveys.

MDB provides you a variety of options and variations.

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 select

Default Select doesn't require an initialization. You only need to add a .browser-default class to the select element.


            <template>
              <select class="browser-default custom-select">
                <option selected>Open this select menu</option>
                <option value="1">One</option>
                <option value="2">Two</option>
                <option value="3">Three</option>
              </select>
            </template>
          

Material select MDB Pro component


            <template>
              <mdb-container>
                <mdb-select
                  v-model="basicOptions"
                  placeholder="Select an option"
                  label=""
                />
              </mdb-container>
            </template>
          

            <script>
              import { mdbSelect, mdbContainer } from "mdbvue";
              export default {
                name: "SelectPage",
                components: {
                  mdbSelect,
                  mdbContainer
                },
                data() {
                  return {
                    basicOptions: [
                      { text: "Option nr 1", value: "Option 1" },
                      { text: "Option nr 2", value: "Option 2" },
                      { text: "Option nr 3", value: "Option 3" }
                    ]
                  };
                }
              };
            </script>
          

Default input customization

Before we move on to discuss the Material Design text input we all here cherish & love, it could be worth to step back for a second and briefly go over features of plain old Bootstrap input.

You may also choose from small and large custom selects to match our similarly sized text inputs.


        <template>
          <div>
            <select class="browser-default custom-select custom-select-lg mb-3">
              <option selected>Open this select menu</option>
              <option value="1">One</option>
              <option value="2">Two</option>
              <option value="3">Three</option>
            </select>

            <select class="custom-select custom-select-sm">
              <option selected>Open this select menu</option>
              <option value="1">One</option>
              <option value="2">Two</option>
              <option value="3">Three</option>
            </select>
          </div>
        </template>
      

The multiple attribute is also supported:


        <template>
          <select class="custom-select" multiple>
            <option selected>Open this select menu</option>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
          </select>
        </template>
      

As is the size attribute:


        <template>
          <select class="custom-select" size="3">
            <option selected>Open this select menu</option>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
          </select>
        </template>
      

Color variations MDB Pro component


        <template>
          <mdb-container>
            <mdb-select
              color="primary"
              v-model="colorOptions"
              label="Blue select"
            />
          </mdb-container>
        </template>
      

        <script>
          import { mdbSelect, mdbContainer } from "mdbvue";
          export default {
            name: "SelectPage",
            components: {
              mdbSelect,
              mdbContainer
            },
            data() {
              return {
                colorOptions: [
                  { text: "Option nr 1", value: "Option 1", selected: true },
                  { text: "Option nr 2", value: "Option 2" },
                  { text: "Option nr 3", value: "Option 3" },
                  { text: "Option nr 4", value: "Option 4" },
                  { text: "Option nr 5", value: "Option 5" }
                ]
              };
            }
          };
        </script>
      

In order to change a select color use one of the following color props:

1. primary

2. danger

3. default

4. secondary

5. success

6. info

7. warning

8. lime

9. pink


Select with search box MDB Pro component


          <template>
            <mdb-container>
              <mdb-select search v-model="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: 'Option nr 1', value: 'Option 1' },
                    { text: 'Option nr 2', value: 'Option 2' },
                    { text: 'Option nr 3', value: 'Option 3' },
                    { text: 'Option nr 4', value: 'Option 4' },
                    { text: 'Option nr 5', value: 'Option 5' }
                  ]
                };
              }
            }
          </script>
        

        <script>
          import { mdbSelect, mdbContainer } from "mdbvue";
          export default {
            name: "SelectPage",
            components: {
              mdbSelect,
              mdbContainer
            },
            data() {
              return {
                searchOptions: [
                  { text: "Option nr 1", value: "Option 1" },
                  { text: "Option nr 2", value: "Option 2" },
                  { text: "Option nr 3", value: "Option 3" },
                  { text: "Option nr 4", value: "Option 4" },
                  { text: "Option nr 5", value: "Option 5" }
                ]
              };
            }
          };
        </script>
      

Select with label and search box MDB Pro component


        <template>
          <mdb-container>
            <mdb-select
              search
              v-model="labelOptions"
              label="Example label"
              placeholder="Choose your option"
            />
          </mdb-container>
        </template>
      

        <script>
          import { mdbSelect, mdbContainer } from "mdbvue";

          export default {
            name: "SelectPage",
            components: {
              mdbSelect,
              mdbContainer
            },
            data() {
              return {
                labelOptions: [
                  { text: "Option nr 1", value: "Option 1" },
                  { text: "Option nr 2", value: "Option 2" },
                  { text: "Option nr 3", value: "Option 3" },
                  { text: "Option nr 4", value: "Option 4" },
                  { text: "Option nr 5", value: "Option 5" }
                ]
              };
            }
          };
        </script>
      

Search with custom filtering MDB Pro component


        <template>
          <mdb-container>
            <mdb-select
              search
              :options="customSearchOptions"
              label="Custom search"
              :filter="(text, search) => { return text.includes(search)}"
            />
          </mdb-container>
        </template>
      

        <script>
          import { mdbSelect, mdbContainer } from "mdbvue";

          export default {
            name: "SelectPage",
            components: {
              mdbSelect,
              mdbContainer
            },
            data() {
              return {
                customSearchOptions: [
                  { text: "option", value: "Option 1" },
                  { text: "Option", value: "Option 2" },
                  { text: "OPTION", value: "Option 3" },
                ],
              };
            }
          };
        </script>
      

Select with default value MDB Pro component


        <template>
          <mdb-container>
            <mdb-select
              v-model="options"
              label="Example label"
            />
          </mdb-container>
        </template>
      

        <script>
          import { mdbSelect, mdbContainer } from "mdbvue";
          export default {
            name: "SelectPage",
            components: {
              mdbSelect,
              mdbContainer
            },
            data() {
              return {
                options: [
                  { text: "Option nr 1", value: "Option 1", selected: true },
                  { text: "Option nr 2", value: "Option 2" },
                  { text: "Option nr 3", value: "Option 3" },
                  { text: "Option nr 4", value: "Option 4" },
                  { text: "Option nr 5", value: "Option 5" }
                ]
              };
            }
          };
        </script>
      

Multiselect variations

More multiselect examples and variations you will find in the Multiselect documentation


Multiple select MDB Pro component


        <template>
          <mdb-container>
            <mdb-select
              multiple
              selectAll
              v-model="multiOptions"
              label="Example label"
              placeholder="choose your option"
            />
          </mdb-container>
        </template>
      

        <script>
          import { mdbSelect, mdbContainer } from "mdbvue";
          export default {
            name: "SelectPage",
            components: {
              mdbSelect,
              mdbContainer
            },
            data() {
              return {
                multiOptions: [
                  { text: "Option nr 1", value: "Option 1" },
                  { text: "Option nr 2", value: "Option 2" },
                  { text: "Option nr 3", value: "Option 3" },
                  { text: "Option nr 4", value: "Option 4" },
                  { text: "Option nr 5", value: "Option 5" }
                ]
              };
            }
          };
        </script>
      

Multiselect variations

More multiselect examples and variations you will find in the Multiselect documentation


Options groups MDB Pro component


        <template>
          <mdb-container>
            <mdb-select v-model="groupOptions" label="Example label" />
          </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" }
                ]
              };
            }
          };
        </script>
      

Select with icons MDB Pro component


        <template>
          <mdb-container>
            <mdb-select
              v-model="iconOptions"
              label="Example label"
              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.webp"
                  },
                  {
                    text: "Option nr 2",
                    value: "Option 2",
                    icon:
                      "https://mdbootstrap.com/img/Photos/Avatars/avatar-2.webp"
                  },
                  {
                    text: "Option nr 3",
                    value: "Option 3",
                    icon:
                      "https://mdbootstrap.com/img/Photos/Avatars/avatar-3.webp"
                  }
                ]
              };
            }
          };
        </script>
      

Disabled select MDB Pro component

By adding a disabled attribute to the select (or particular option), you can make it unselectable.


          <template>
            <mdb-container>
              <mdb-select disabled v-model="disabledOptions" label="Example label" />
              <mdb-select v-model="disabledOptions" label="Example label" />
            </mdb-container>
          </template>
        

          <script>
            import { mdbSelect, mdbContainer } from 'mdbvue';
            export default {
              name: 'SelectPage',
              components: {
                mdbSelect,
                mdbContainer
              },
              data() {
                return {
                  disabledOptions: [
                    { text: 'Disabled option', value: 'Disabled', disabled: true },
                    { text: 'Option nr 2', value: 'Option 2' },
                    { text: 'Option nr 3', value: 'Option 3' }
                  ]
                };
              }
            }
          </script>
        

        <script>
          import { mdbSelect, mdbContainer } from "mdbvue";
          export default {
            name: "SelectPage",
            components: {
              mdbSelect,
              mdbContainer
            },
            data() {
              return {
                disabledOptions: [
                  { text: "Option nr 1", value: "Option 1" },
                  { text: "Option nr 2", value: "Option 2" },
                  { text: "Option nr 3", value: "Option 3" },
                  { text: "Option nr 4", value: "Option 4" },
                  { text: "Option nr 5", value: "Option 5" }
                ]
              };
            }
          };
        </script>
      

Outline select MDB Pro component


        <template>
          <mdb-row>
            <mdb-col sm="6">
              <mdb-select
                outline
                v-model="outlineOptions"
                label="Example label"
                placeholder="choose your option"
              />
            </mdb-col>
          </mdb-row>
        </template>
      

        <script>
          import { mdbSelect, mdbRow, mdbCol } from "mdbvue";
          export default {
            name: "SelectPage",
            components: {
              mdbSelect,
              mdbRow,
              mdbCol
            },
            data() {
              return {
                outlineOptions: [
                  { text: "Option nr 1", value: "Option 1" },
                  { text: "Option nr 2", value: "Option 2" },
                  { text: "Option nr 3", value: "Option 3" },
                  { text: "Option nr 4", value: "Option 4" },
                  { text: "Option nr 5", value: "Option 5" }
                ]
              };
            }
          };
        </script>
      

Data from API MDB Pro component

You can easily add data from an API to Select by using axios client.


        <template>
          <div>
            <mdb-select v-model="axiosOptions" label="Choose country" />
            Selected country code: {{ this.selectedData }}
          </div>
        </template>
      

        <script>
          import { mdbSelect } from "mdbvue";
          import axios from "axios";

          export default {
            name: "SelectPage",
            components: {
              mdbSelect
            },
            computed: {
              selectedData() {
                let response = this.axiosOptions.find(option => {
                  return option.selected === true;
                });
                if (response) {
                  return response.value;
                }
                return "Country is not selected";
              }
            },
            data() {
              return {
                axiosOptions: []
              };
            },
            mounted() {
              axios
                .get("https://restcountries.eu/rest/v2/region/europe")
                .then(response => {
                  for (let i = 1; i <= 10; i++) {
                    this.axiosOptions.push({
                      text: response.data[i].name,
                      value: response.data[i].alpha3Code
                    });
                  }
                });
            }
          };
        </script>
      


Data from API - multiple selects MDB Pro component

In the example below, the options of the second select are fetched from API depending on the first one's value.


        <template>
          <div>
            <mdb-select
              v-model="axiosOptions"
              label="Choose country"
              resetBtn
              @change="populateLanguageSelect"/>
            <mdb-select
              :disabled="disableLanguageSelect"
              v-model="languageOptions"
              label="Choose language"
            />
            <p>Selected country code: <strong>{{ selectedData }}</strong></p>
            <p>Selected language: <strong>{{ selectedLanguage }}</strong></p>
          </div>
        </template>
      

        <script>
          import { mdbSelect } from "mdbvue";
          import axios from "axios";

          export default {
            name: "SelectPage",
            components: {
              mdbSelect
            },
            computed: {
              selectedData() {
                let response = this.axiosOptions.find(option => {
                  return option.selected === true;
                });
                if (response) {
                  return response.value;
                }
                return "Country is not selected";
              },
              selectedLanguage() {
                const selectedOption = this.languageOptions.find(option => option.selected);

                return selectedOption ? selectedOption.value : "Language not selected";
              },
            },
            data() {
              return {
                axiosOptions: [],
                languageOptions: [],
                disableLanguageSelect: false,
              };
            },
            methods: {
              populateLanguageSelect(code) {
                if (code) {
                  fetch(`https://restcountries.eu/rest/v2/alpha/${code}`).then(resp => resp.json()).then(resp => {
                    this.languageOptions = resp.languages.map((language, i) => ({ value: language.name, text: language.name, selected: i === 0 }))
                  });

                  this.disableLanguageSelect = false;
                }
                else {
                  this.languageOptions = [];

                  this.disableLanguageSelect = true;
                }
              },
            },
            mounted() {
              axios
              .get("https://restcountries.eu/rest/v2/region/europe")
              .then(response => {
                this.axiosOptions = response.data.map(entry => {
                  return {
                    text: entry.name,
                    value: entry.alpha3Code,
                  }
                })
              });
            }
          };
        </script>
      

Reactivity in Depth MDB Pro component

Due to the limitations of modern JavaScript (and the abandonment of Object.observe), Vue cannot detect property addition or deletion.

Vue does not allow dynamically adding new root-level reactive properties to an already created instance. However, it’s possible to add reactive properties to a nested object using the Vue.set(object, propertyName, value) method. This method can also be applied for dynamic options selecting in our mdbSelect component.


        selectOption(key) { this.basicOptions.forEach(option => {
        option.selected = false; }); this.$set(this.basicOptions[key],
        "selected", true); this.basicOptions.sort(); }
      

Select - API

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


        <script>
          import { mdbSelect } from "mdbvue";
        </script>
      

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 ... />
bg Boolean Sets design to animated border with background <mdb-select bg ... />
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 />
disableFilter Boolean false Disables the default filtering functionality - useful for async API calls made inside a @search handler <mdb-select @search="handleSeach" disableFilter />
top Boolean false Opens the dropdown on the top by default <mdb-select top />
apoBodypendT Boolean false Appends the select's dropdown to the end of the document <mdb-select append-to-body />
filter Function (text, search) => { return text.toLowerCase().includes(search.toLowerCase()) Function used to filter search results <mdb-select :filter="(text, search) => { return text === search }" />

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" />
v-on:search Boolean Emits a value of a search input <mdb-select search @search="..." />

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>