Select Dropdown

Bootstrap Select Dropdown - free examples & tutorial

Responsive Select Dropdown built with Bootstrap 5. Examples include multiselect dropdown, select dropdown with search box, checkbox form select dropdown & more.

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

Basic dropdown with Select

Make sure to read the main Select docs to learn how to use this component in production.

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

Basic dropdown with MultiSelect

Add multiple attribute to the <select> element to allow selecting more than one value.

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>

Select Dropdown with label

Add a form label with an additional element with .form-label & .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>

Select Dropdown with placeholder

Fill in the placeholder option to add a placeholder value instead of a label.

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

Make the select dropdown unclickable by adding the disabled attribute.

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

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

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