Material Design select

Our Material Select is a beautiful alternative for standard select.

MDB provides you a variety of options and variations.

Overwriting a standard select

MDB overwrites a standard select to replace it with our Material Select. That's why before you can use it, you have to initialize Material Select by placing following code in your project.

In addition, you will need a separate call for any dynamically generated select elements your page generates.

Initialization:


 // Material Select Initialization
 $(document).ready(function() {
    $('.mdb-select').material_select();
  });

Basic example Premium component

Example label


<select class="mdb-select">
    <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>
<label>Example label</label>

Color variations Premium component

Blue select

Red select

Teal select

Purple select

Green select

Light blue select

Orange select

Blue grey select

Dark select


<!--Blue select-->
<select class="mdb-select colorful-select dropdown-primary">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    <option value="4">Option 4</option>
    <option value="5">Option 5</option>
</select>
<label>Blue select</label>
<!--/Blue select-->

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

1. .dropdown-primary

2. .dropdown-danger

3. .dropdown-default

4. .dropdown-secondary

5. .dropdown-success

6. .dropdown-info

7. .dropdown-warning

8. .dropdown-ins

9. .dropdown-dark

Multiple select Premium component

Example label


<select class="mdb-select" multiple>
    <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>
<label>Example label</label>

Options groups Premium component

Example label


<select class="mdb-select">
    <optgroup label="team 1">
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
    </optgroup>
    <optgroup label="team 2">
        <option value="3">Option 3</option>
        <option value="4">Option 4</option>
    </optgroup>
</select>
<label>Example label</label>

Select with icons Premium component

Example label


<select class="mdb-select">
    <option value="" disabled selected>Choose your option</option>
    <option value="" data-icon="https://mdbootstrap.com/img/Photos/Avatars/avatar-1.jpg" class="rounded-circle">example 1</option>
    <option value="" data-icon="https://mdbootstrap.com/img/Photos/Avatars/avatar-2.jpg" class="rounded-circle">example 2</option>
    <option value="" data-icon="https://mdbootstrap.com/img/Photos/Avatars/avatar-3.jpg" class="rounded-circle">example 1</option>
</select>
<label>Example label</label>

Disabled select Premium component

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

Example label


<!-- Disabled select-->
<select class="mdb-select" disabled>
    <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>
<label>Example label</label>

<!--Disabled option-->
<select class="mdb-select">
    <option value="" disabled selected>Choose your option</option>
    <option value="1" disabled>Disabled option</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
</select>
<label>Example label</label>

Updating/destroying material select

To update the items inside the existing Material Select you can destroy it with the function below and then initialize it again.


 // Material Select Destroy
 $('.mdb-select').material_select('destroy');

Default select

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

Default Select


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