Sign in


Sign up


Bootstrap Multiselect

Bootstrap Multiselect is a jQuery based plugin that allows users to tick multiple options from a standard Bootstrap select.

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:

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

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

Full documentation of our select

You can find detailed documentation and all available options in our Material Select documentation.


Standard multiselect MDB Pro component


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

Multiselect with label MDB Pro component


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

Colorful Multiselect with label MDB Pro component


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

Multiselect with options groups MDB Pro component


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

Multiselect with icons MDB Pro component


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

Multiselect with search box MDB Pro component


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

Multiselect with label and search box MDB Pro component


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

Colorful Multiselect with label and search box MDB Pro component


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

Multiselect with options groups and search box MDB Pro component


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

Multiselect with icons and search box MDB Pro component


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