Select dropdown with search

Bootstrap 5 Select dropdown with search component

Responsive Select dropdown with search built with Bootstrap 5. Helps you find the options you are looking for by searching.

Basic example

In select set filter option to true to enable options filtering.

Edit in sandbox 
        
            
            <select data-mdb-select-init 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>

Multiselect

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

Edit in sandbox 
        
            
            <select data-mdb-select-init data-mdb-filter="true" 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>
                <option value="9">Nine</option>
                <option value="10">Ten</option>
            </select>

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

Disabled options

Use disabled attribute on option element to disable specific option.

Edit in sandbox 
        
            
            <select data-mdb-select-init data-mdb-filter="true">
              <option value="1">One</option>
              <option value="2">Two</option>
              <option value="3" disabled>Three</option>
              <option value="4" disabled>Four</option>
              <option value="5">Five</option>
              <option value="6">Six</option>
              <option value="7" disabled>Seven</option>
              <option value="8">Eight</option>
              <option value="9">Nine</option>
              <option value="10" disabled>Ten</option>
          </select>

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 data-mdb-filter="true" 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>
                <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>

With icons

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

Edit in sandbox 
        
            
      <select data-mdb-select-init data-mdb-filter="true" id="basic-select">
        <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>

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>
              <div class="modal-body">
                <select data-mdb-select-init 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>