Vue Bootstrap Select

Vue Select - Bootstrap 4 & Material Design

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.


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" />
              </mdb-container>
            </template>
          

            <script>
              import { mdbSelect, mdbContainer } from 'mdbvue';
              export default {
                name: 'SelectPage',
                components: {
                  mdbSelect,
                  mdbContainer
                },
                data() {
                  return {
                    basicOptions: [
                      { text: 'Choose your option', value: null, disabled: true, selected: true },
                      { 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. ins

9. dark


Select with search box MDB Pro component


          <template>
            <mdb-container>
              <mdb-select search v-model="searchOptions" />
            </mdb-container>
          </template>
        

          <script>
            import { mdbSelect, mdbContainer } from 'mdbvue';
            export default {
              name: 'SelectPage',
              components: {
                mdbSelect,
                mdbContainer
              },
              data() {
                return {
                  searchOptions: [
                    { text: 'Choose your option', value: null, disabled: true, selected: true },
                    { 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" />
            </mdb-container>
          </template>
        

          <script>
            import { mdbSelect, mdbContainer } from 'mdbvue';
    
            export default {
              name: 'SelectPage',
              components: {
                mdbSelect,
                mdbContainer
              },
              data() {
                return {
                  labelOptions: [
                    { text: 'Choose your option', value: null, disabled: true, selected: true },
                    { 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>
        

Multiple select MDB Pro component


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

              <script>
                import { mdbSelect, mdbContainer } from 'mdbvue';
                export default {
                  name: 'SelectPage',
                  components: {
                    mdbSelect,
                    mdbContainer
                  },
                  data() {
                    return {
                      multiOptions: [
                        { text: 'Choose your options', value: null, disabled: true, selected: true },
                        { 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" />
            </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' }
                  ]
                };
              }
            }
          </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-container>
          </template>
        

          <script>
            import { mdbSelect, mdbContainer } from 'mdbvue';
            export default {
              name: 'SelectPage',
              components: {
                mdbSelect,
                mdbContainer
              },
              data() {
                return {
                  disabledOptions: [
                    { text: 'Choose your option', value: null, disabled: true, selected: true },
                    { 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" />
            </mdb-col>
          </mdb-row>
        </template>
      

        <script>
          import { mdbSelect, mdbRow, mdbCol } from 'mdbvue';
          export default {
            name: 'SelectPage',
            components: {
              mdbSelect,
              mdbRow,
              mdbCol
            },
            data() {
              return {
                outlineOptions: [
                  { text: 'Choose your option', value: null, disabled: true, selected: true },
                  { 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>
      

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

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" />
reset Resets select to default values. <mdb-select v-model="options" ref="select" /> <mdb-btn size="sm" color="danger" @click.native="$refs.select.reset()">Reset</mdb-btn>
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" />