Multiselect

Bootstrap Multiselect - free examples, templates & tutorial

Responsive Multiselect built with Bootstrap 5. Examples of multiselect dropdown with checkbox, listbox, search, buttons, groups, icons, validation, disabled

Unlike a standard Select, multiselect allows the user to select multiple options at once.

Note: To learn more about Select component and see all available options, methods, events and advanced usage - read Select Docs & API section

Basic example

Add multiple attribute to the select element to activate multiple mode.

Note: This component requires MDBootstrap Pro package.

Edit in sandbox 
        
            
          <select data-mdb-select-init multiple>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
            <option value="4">Four</option>
            <option value="5">Five</option>
            <option value="6">Six</option>
            <option value="7">Seven</option>
            <option value="8">Eight</option>
          </select>

Multiselect with label

It is possible to add select label by creating element with .form-label> and .select-label> classes.

Edit in sandbox 
        
            
          <select data-mdb-select-init multiple>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
            <option value="4">Four</option>
            <option value="5">Five</option>
          </select>
          <label class="form-label select-label">Example label</label>

Multiselect with placeholder

Use placeholder option to set placeholder for select input. The placeholder will be displayed when input is focused and no option is selected.

Edit in sandbox 
        
            
          <select data-mdb-select-init multiple data-mdb-placeholder="Example placeholder" multiple>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
            <option value="4">Four</option>
            <option value="5">Five</option>
          </select>

Disabled multiselect

Add disabled attribute to the select element to disable select input.

Edit in sandbox 
        
            
          <select data-mdb-select-init multiple disabled>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
            <option value="4">Four</option>
            <option value="5">Five</option>
          </select>

Disabled options

Use disabled attribute on option element to disable specific option.

Edit in sandbox 
        
            
          <select data-mdb-select-init multiple>
            <option value="1">One</option>
            <option value="2" disabled>Two</option>
            <option value="3" disabled>Three</option>
            <option value="4">Four</option>
            <option value="5">Five</option>
          </select>

Clear button

Set clearButton option to true to display the button that will allow to clear current selections.

Edit in sandbox 
        
            
          <select data-mdb-select-init multiple data-mdb-clear-button="true">
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
            <option value="4">Four</option>
            <option value="5">Five</option>
          </select>

Custom content

A custom content container with a class .select-custom-content will be displayed at the end of the select dropdown. In this example we've added a button.

Edit in sandbox 
        
            
          <select data-mdb-select-init multiple>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
            <option value="4">Four</option>
            <option value="5">Five</option>
          </select>
          <div class="select-custom-content">
            <button data-mdb-button-init data-mdb-ripple-init class="btn-save btn btn-primary btn-sm">Save</button>
          </div>

Visible options

Use visibleOptions option to change the number of options that will be displayed in the select dropdown without scrolling.

Edit in sandbox 
        
            
          <select data-mdb-select-init multiple data-mdb-visible-options="3">
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
            <option value="4">Four</option>
            <option value="5">Five</option>
          </select>

Secondary text

Add secondary-text data attribute to the specific options to display secondary text.

Edit in sandbox 
        
            
          <select data-mdb-select-init multiple data-mdb-option-height="44">
            <option value="1" data-mdb-secondary-text="Secondary text">One</option>
            <option value="2" data-mdb-secondary-text="Secondary text">Two</option>
            <option value="3" data-mdb-secondary-text="Secondary text">Three</option>
            <option value="4" data-mdb-secondary-text="Secondary text">Four</option>
            <option value="5" data-mdb-secondary-text="Secondary text">Five</option>
          </select>

Select with search inside a modal

Due to a focus trap in modals, it is not possible to focus the outer elements (like select dropdown). You can use select data-mdb-container option to resolve this problem.

The data-mdb-container accepts selector of the element inside of wich select dropdown will be rendered. In this case, the selector should point to the modal container (the element with class .modal). It is important to use a unique selector to assign select to a specific modal.

Edit in sandbox 
        
            
          <!-- Button trigger modal -->
          <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary" data-mdb-modal-init data-mdb-target="#exampleModal">
            Launch demo modal
          </button>

          <!-- Modal -->
          <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
            aria-hidden="true">
            <div class="modal-dialog">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                  <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
                </div>
                <form action="" method="post">
                  <div class="modal-body">
                    <select data-mdb-select-init multiple data-mdb-container="#exampleModal" data-mdb-filter="true">
                      <option value="1">One</option>
                      <option value="2">Two</option>
                      <option value="3">Three</option>
                      <option value="4">Four</option>
                      <option value="5">Five</option>
                      <option value="6">Six</option>
                      <option value="7">Seven</option>
                      <option value="8">Eight</option>
                      <option value="9">Nine</option>
                      <option value="10">Ten</option>
                    </select>
                  </div>
                  <div class="modal-footer">
                    <button  type="button" data-mdb-button-init data-mdb-ripple-init class="btn btn-secondary" data-mdb-dismiss="modal">
                      Close
                    </button>
                    <button type="submit" data-mdb-button-init data-mdb-ripple-init class="btn btn-primary">Save changes</button>
                  </div>
                </form>
              </div>
            </div>
          </div>

Option groups

It is possible to group options by using optgroup element.

Edit in sandbox 
        
            
          <select data-mdb-select-init multiple>
            <optgroup label="Label 1">
              <option value="1">One</option>
              <option value="2">Two</option>
              <option value="3">Three</option>
            </optgroup>
            <optgroup label="Label 2">
              <option value="4">Four</option>
              <option value="5">Five</option>
              <option value="6">Six</option>
            </optgroup>
          </select>

Multiselect with icons

Add icon data attribute to the specific options to display the option icon.

Edit in sandbox 
        
            
          <select data-mdb-select-init multiple>
            <option value="1" data-mdb-icon="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-1.webp">One</option>
            <option value="2" data-mdb-icon="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-2.webp">Two</option>
            <option value="3" data-mdb-icon="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-3.webp">Three</option>
            <option value="4" data-mdb-icon="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-4.webp">Four</option>
            <option value="5" data-mdb-icon="https://mdbcdn.b-cdn.net/img/Photos/Avatars/avatar-5.webp">Five</option>
          </select>

Validation

Set validation option to true to enable component validation. The validFeedback and invalidFeedback options allow to modify the validation messages.

Edit in sandbox 
        
            
          <form class="needs-validation" novalidate>
            <select data-mdb-select-init multiple id="basic-select" data-mdb-validation="true"
              data-mdb-valid-feedback="This value is valid" data-mdb-invalid-feedback="This value is invalid"
              data-mdb-clear-button="true">
              <option value="1">One</option>
              <option value="2">Two</option>
              <option value="3">Three</option>
              <option value="4">Four</option>
              <option value="5">Five</option>
              <option value="6">Six</option>
              <option value="7">Seven</option>
              <option value="8">Eight</option>
            </select>
            <button type="submit" data-mdb-button-init id="submit" data-mdb-ripple-init class="btn btn-primary btn-sm mt-3">
              Submit
            </button>
          </form>
          
        
    
        
            
          (() => {
          'use strict';

          // Fetch all the forms we want to apply custom Bootstrap validation styles to
          const forms = document.querySelectorAll('.needs-validation');

          // Loop over them and prevent submission
          Array.prototype.slice.call(forms).forEach((form) => {
          form.addEventListener('submit', (event) => {
          event.preventDefault();
          event.stopPropagation();

          form.classList.add('was-validated');
          },false);
          });
          })();