Bootstrap Select

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.


Basic example MDB Pro component

                
<template>
  <container class="mt-5"> 
    <row>
      <column sm="6">
        <mdb-select @getValue="getSelectValue">
          <option disabled selected>Choose your option</option>
          <option value="Option 1">Option nr 1</option>
          <option value="Option 2">Option nr 2</option>
          <option value="Option 3">Option nr 3</option>
          <option value="Option 4">Option nr 4</option>
          <option value="Option 5">Option nr 5</option>
        </mdb-select>
        <label>Example label</label>
      </column>
    </row>
  </container>
</template>

<script>
import { Container, Row, Column, mdbSelect } from 'mdbvue';

export default {
  name: 'SelectPage',
  components: {
    Container,
    Row,
    Column,
    mdbSelect
  },
  methods: {
    getSelectValue(value) {
      console.log(value);
    }
  }
};
</script>

<style scoped>
</style>
                
            

Color variations MDB Pro component

                
<template>
  <container class="mt-5"> 
    <row>
      <column sm="6">
        <mdb-select color="primary" @getValue="getSelectValue">
          <option disabled selected>Choose your option</option>
          <option value="Option 1">Option nr 1</option>
          <option value="Option 2">Option nr 2</option>
          <option value="Option 3">Option nr 3</option>
          <option value="Option 4">Option nr 4</option>
          <option value="Option 5">Option nr 5</option>
        </mdb-select>
        <label>Example label</label>
      </column>
    </row>
  </container>
</template>

<script>
import { Container, Row, Column, mdbSelect } from 'mdbvue';

export default {
  name: 'SelectPage',
  components: {
    Container,
    Row,
    Column,
    mdbSelect
  },
  methods: {
    getSelectValue(value) {
      console.log(value);
    }
  }
};
</script>

<style scoped>
</style>
                
            

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


Multiple select MDB Pro component

                
<template>
  <container class="mt-5"> 
    <row>
      <column sm="6">
        <mdb-select multiple @getValue="getSelectValue">
          <option disabled selected>Choose your option</option>
          <option value="Option 1">Option nr 1</option>
          <option value="Option 2">Option nr 2</option>
          <option value="Option 3">Option nr 3</option>
          <option value="Option 4">Option nr 4</option>
          <option value="Option 5">Option nr 5</option>
        </mdb-select>
        <label>Example label</label>
      </column>
    </row>
  </container>
</template>

<script>
import { Container, Row, Column, mdbSelect } from 'mdbvue';

export default {
  name: 'SelectPage',
  components: {
    Container,
    Row,
    Column,
    mdbSelect
  },
  methods: {
    getSelectValue(value) {
      console.log(value);
    }
  }
};
</script>

<style scoped>
</style>
                
            

Options groups MDB Pro component

                
<template>
  <container class="mt-5"> 
    <row>
      <column sm="6">
        <mdb-select @getValue="getSelectValue">
          <option disabled>team 1</option>
          <option value="Option 1">Option nr 1</option>
          <option value="Option 2">Option nr 2</option>
          <option disabled>team 2</option>
          <option value="Option 3">Option nr 3</option>
          <option value="Option 4">Option nr 4</option>
        </mdb-select>
        <label>Example label</label>
      </column>
    </row>
  </container>
</template>

<script>
import { Container, Row, Column, mdbSelect } from 'mdbvue';

export default {
  name: 'SelectPage',
  components: {
    Container,
    Row,
    Column,
    mdbSelect
  },
  methods: {
    getSelectValue(value) {
      console.log(value);
    }
  }
};
</script>

<style scoped>
</style>
                
            

Select with icons MDB Pro component

                
<template>
  <container class="mt-5"> 
    <row>
      <column sm="6">
        <mdb-select @getValue="getSelectValue">
          <option icon disabled>Choose your option</option>
          <option icon="https://mdbootstrap.com/img/Photos/Avatars/avatar-1.jpg" value="Option 1">Option nr 1</option>
          <option icon="https://mdbootstrap.com/img/Photos/Avatars/avatar-2.jpg" value="Option 2">Option nr 2</option>
          <option icon="https://mdbootstrap.com/img/Photos/Avatars/avatar-3.jpg" value="Option 3">Option nr 3</option>
        </mdb-select>
        <label>Example label</label>
      </column>
    </row>
  </container>
</template>

<script>
import { Container, Row, Column, mdbSelect } from 'mdbvue';

export default {
  name: 'SelectPage',
  components: {
    Container,
    Row,
    Column,
    mdbSelect
  },
  methods: {
    getSelectValue(value) {
      console.log(value);
    }
  }
};
</script>

<style scoped>
</style>
                
            

Disabled select MDB Pro component

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

                
<template>
  <container class="mt-5"> 
    <row>
      <column sm="6">
        <mdb-select disabled>
          <option value="Option 1">Option nr 1</option>
          <option value="Option 2">Option nr 2</option>
          <option value="Option 3">Option nr 3</option>
          <option value="Option 4">Option nr 4</option>
        </mdb-select>
        <label>Example label</label>
      </column>
    </row>
  </container>
</template>

<script>
import { Container, Row, Column, mdbSelect } from 'mdbvue';

export default {
  name: 'SelectPage',
  components: {
    Container,
    Row,
    Column,
    mdbSelect
  },
  methods: {
    getSelectValue(value) {
      console.log(value);
    }
  }
};
</script>

<style scoped>
</style>
                
            

Default select

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

                
<label>Default Select</label>
<select class="browser-default">
    <option value="" disabled selected>Choose your option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>