Bootstrap Multiselect

Bootstrap Multiselect is a jQuery based plugin that allows users to select multilple options from a standard select UI element.

Its implementation is quite simple, and in exchange brings a lot of UX value.

Examples of Bootstrap Multiselect use:

• Ingredience choice within pizza delivery system
• Laptop hardware configuration in online shop
• Flight booking customization

See the following mutliselect dropdown example:

▼                 Choose your country                 USA                 Germany                 France                 Poland                 Japan             

Label example

                
<select class="mdb-select colorful-select dropdown-primary" multiple searchable="Search here..">
    <option value="" disabled selected>Choose your country</option>
    <option value="1">USA</option>
    <option value="2">Germany</option>
    <option value="3">France</option>
    <option value="4">Poland</option>
    <option value="5">Japan</option>
</select>
<label>Label example</label>
                
            

Copy

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();
});
            

Copy

---

Standard multiselect 

▼                 Choose your country                 USA                 Germany                 France                 Poland                 Japan             

<select class="mdb-select" multiple>
    <option value="" disabled selected>Choose your country</option>
    <option value="1">USA</option>
    <option value="2">Germany</option>
    <option value="3">France</option>
    <option value="4">Poland</option>
    <option value="5">Japan</option>
</select>
            

Copy

---

Multiselect with label 

▼                 Choose your country                 USA                 Germany                 France                 Poland                 Japan             

Label example

<select class="mdb-select" multiple>
    <option value="" disabled selected>Choose your country</option>
    <option value="1">USA</option>
    <option value="2">Germany</option>
    <option value="3">France</option>
    <option value="3">Poland</option>
    <option value="3">Japan</option>
</select>
<label>Label example</label>
            

Copy

---

Colorful Multiselect with label 

▼                 Choose your country                 USA                 Germany                 France                 Poland                 Japan             

Label example

<select class="mdb-select colorful-select dropdown-primary" multiple>
    <option value="" disabled selected>Choose your country</option>
    <option value="1">USA</option>
    <option value="2">Germany</option>
    <option value="3">France</option>
    <option value="3">Poland</option>
    <option value="3">Japan</option>
</select>
<label>Label example</label>
            

Copy

---

Multiselect with options groups 

▼                                      Option 1                     Option 2                                                       Option 3                     Option 4                              

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

Copy

---

Multiselect with icons 

▼                 example 1                 example 2                 example 1             

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

Copy

---

Multiselect with search box 

▼                 Choose your country                 USA                 Germany                 France                 Poland                 Japan             

<select class="mdb-select" multiple searchable="Search here..">
    <option value="" disabled selected>Choose your country</option>
    <option value="1">USA</option>
    <option value="2">Germany</option>
    <option value="3">France</option>
    <option value="3">Poland</option>
    <option value="3">Japan</option>
</select>
            

Copy

---

Multiselect with label and search box 

▼                 Choose your country                 USA                 Germany                 France                 Poland                 Japan             

Label example

<select class="mdb-select" multiple searchable="Search here..">
    <option value="" disabled selected>Choose your country</option>
    <option value="1">USA</option>
    <option value="2">Germany</option>
    <option value="3">France</option>
    <option value="3">Poland</option>
    <option value="3">Japan</option>
</select>
<label>Label example</label>
            

Copy

---

Colorful Multiselect with label and search box 

▼                 Choose your country                 USA                 Germany                 France                 Poland                 Japan             

Label example

<select class="mdb-select colorful-select dropdown-primary" multiple searchable="Search here..">
    <option value="" disabled selected>Choose your country</option>
    <option value="1">USA</option>
    <option value="2">Germany</option>
    <option value="3">France</option>
    <option value="3">Poland</option>
    <option value="3">Japan</option>
</select>
<label>Label example</label>
            

Copy

---

Multiselect with options groups and search box 

▼                                      Option 1                     Option 2                                                       Option 3                     Option 4                              

<select class="mdb-select" multiple searchable="Search here..">
    <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>
            

Copy

---

Multiselect with icons and search box 

▼                 example 1                 example 2                 example 1             

<select class="mdb-select" multiple searchable="Search here..">
    <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>