Rate this docs

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.


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

Material select MDB Pro component



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

          

Color variations MDB Pro component



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

      

Select with label and search box MDB Pro component



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

      

Multiple select MDB Pro component



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

      

Select with icons MDB Pro component



        <template>
          <mdb-container>
            <mdb-select @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>

      

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 :options="disabledOptions" />
          </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' }
              ]
            };
          },
          methods: {
            getSelectValue(value, text) {
              console.log(value);
            }
          }
        };
        </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


          import { mdbSelect } from 'mdbvue';
      

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