Multiselect

Bootstrap Multiselect - examples & tutorial

Responsive Multiselect built with the latest Bootstrap 5. Unlike a normal select, multiselect allows the user to select multiple options at once.

Numerous examples of different variations - multiselect listbox, with checkboxes, search, buttons, icons, groups, text, disabled option, validation, and more.

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. 


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


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


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


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


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


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


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


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


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


      <!-- Button trigger modal -->
      <button
        type="button"
        class="btn btn-primary"
        data-mdb-toggle="modal"
        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" class="close" data-mdb-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <form action="" method="post">
              <div class="modal-body">
                <select
                  class="select" 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" class="btn btn-secondary" data-mdb-dismiss="modal">
                  Close
                </button>
                <button type="submit" class="btn btn-primary">Save changes</button>
              </div>
            </form>
          </div>
        </div>
      </div>

Option groups

It is possible to group options by using optgroup element. 


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


          <select class="select" multiple>
            <option value="1" data-mdb-icon="https://mdbootstrap.com/img/Photos/Avatars/avatar-1.webp"
              >One</option
            >
            <option value="2" data-mdb-icon="https://mdbootstrap.com/img/Photos/Avatars/avatar-2.webp"
              >Two</option
            >
            <option value="3" data-mdb-icon="https://mdbootstrap.com/img/Photos/Avatars/avatar-3.webp"
              >Three</option
            >
            <option value="4" data-mdb-icon="https://mdbootstrap.com/img/Photos/Avatars/avatar-4.webp"
              >Four</option
            >
            <option value="5" data-mdb-icon="https://mdbootstrap.com/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. 


          <form class="needs-validation" novalidate>
            <select
              class="select" 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" id="submit" 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);
            });
          })();

If you want to support our friends from Tailwind Elements you can also check out the Tailwind multiselect documentation.