Select

Bootstrap 5 Select component

Select fields components are used for collecting user provided information from a list of options.

Basic example

Basic example of select component that allows you to choose from a number of options.

Edit in sandbox 
        
            
          <select class="select">
            <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

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

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

Select with label

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

Edit in sandbox 
        
            
          <select class="select">
            <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 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 class="select" 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

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

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

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

Edit in sandbox 
        
            
          <select class="select" 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 class="select" 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" 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="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
            </div>
            <form>
              <div class="modal-body">
                <select class="select" 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.

Edit in sandbox 
        
            
          <select class="select">
            <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>

Select with icons

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

Edit in sandbox 
        
            
          <select class="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>

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
              class="select"
              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);
            });
          })();

Set value

The setValue method allows to programatically set the component selections.

Single selection

Add single value string to the arguments list to correctly select option with corresponding value in single selection mode.

Edit in sandbox 
        
            
            <select id="singleSelection" class="select">
              <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>
          
        
    
        
            
            const singleSelect = document.querySelector('#singleSelection');
            const singleSelectInstance = mdb.Select.getInstance(singleSelect);
            singleSelectInstance.setValue('4');

Multi selection

Add array of string values to the arguments list to correctly select option with corresponding value in multi selection mode.

Edit in sandbox 
        
            
            <select id="multiSelection" 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>
          
        
    
        
            
            const multiSelect = document.querySelector('#multiSelection');
            const multiSelectInstance = mdb.Select.getInstance(multiSelect);
            multiSelectInstance.setValue(['3', '4', '5']);

Select with toggle element

If you want to toggle Select via button, you have to add data-mdb-toggle attribute to this button with ID of the Select element.

Edit in sandbox 
        
            
          <select class="select" id="mySelect">
            <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>

          <button id="toggleMySelect" class="btn btn-primary" data-mdb-toggle="mySelect">
            Toggle Select
          </button>
        
        
    
        
            
          const selectEl = document.getElementById('mySelect')
          const select = mdb.Select.getInstance(selectEl)

          document.getElementById("toggleMySelect").onclick = function () {
            select.open()
          };

Auto select

Set autoSelect option to true to enable selecting on Tab press.

Edit in sandbox 
        
            
          <select
            class="select"
            data-mdb-auto-select="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>

Select - API

Usage

Via class

Edit in sandbox 
        
            
        <select class="select">
          <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>

Via JavaScript

Edit in sandbox 
        
            
        const mySelect = new mdb.Select(document.getElementById('mySelect'), options)

Options

Name Type Default Description
autoSelect Boolean false Enables auto selecting on Tab press
container String 'body' Container for the select dropdown. Accepts an element selector inside of which select dropdown will be rendered.
clearButton Boolean false Adds clear button to the select input
disabled Boolean false Changes select input state to disabled
displayedLabels Number 5 The maximum number of comma-separated list of options displayed on the Multiselect. If a user selects more options than that value, the X options selected text will be displayed instead. If set to -1, the limit is off.
filter Boolean false Displays filter input that allow to search for specific option
filterDebounce Number 300 Adds delay to the options list updates when using filter input. Improves performance of the select with filter.
formWhite Boolean false Adjust input colors for dark backgrounds.
invalidFeedback String Invalid The text which is displayed below the Material Select when the validate option is enabled and the select is invalid
noResultText String 'No results found' The text that will be displayed when no option is found after using select filter
placeholder String - The text that will be displayed as select input placeholder
size String 'default' Changes input size. Available options: 'sm', 'lg', 'default'.
optionsSelectedLabel String 'options selected' The text which is displayed on the Multiselect when there are more than 5 (default) options selected, e.g. 7 options selected
optionHeight Number 38 Height of the select option. Used to determine dropdown height and number of visible options.
selectAll Boolean true Displays select all option in multiselect dropdown
selectAllLabel String 'Select all' Changes label of select all option.
searchPlaceholder String 'Search...' Changes placeholder of the select search input.
validation Boolean false Adds required validation to the component.
validFeedback String 'Valid' The text which is displayed below the Material Select when the validate option is enabled and the select is valid.
visibleOptions Number 5 The maximum number of options which are visible in the select dropdown without scrolling.

Methods

Name Description Example
open Manually opens a select mySelect.open()
close Manually closes a select mySelect.close()
setValue Programatically set component selections. Add single value for default select and array of values for multiselect. mySelect.setValue('3')
dispose Disposes a select instance mySelect.dispose()
getInstance Static method which allows you to get the select instance associated to a DOM element. Select.getInstance(selectEl)
getOrCreateInstance Static method which returns the select instance associated to a DOM element or create a new one in case it wasn't initialized. Select.getOrCreateInstance(selectEl)
Edit in sandbox 
        
            
            const selectEl = document.getElementById('mySelect')
            const select = new mdb.Select(selectEl)
            select.open()

Events

Name Description
open.mdb.select This event fires immediately when the select is opened.
close.mdb.select This event fires immediately when the select is closed.
valueChange.mdb.select This event fires immediately when the select value changes.
optionSelect.mdb.select This event fires immediately when the select option is selected.
optionDeselect.mdb.select This event fires immediately when the select option is deselected.
Edit in sandbox 
        
            
            const mySelect = document.getElementById('mySelect')
            mySelect.addEventListener('open.mdb.select', (e) => {
              // do something...
            })

Import

MDB UI KIT also works with module bundlers. Use the following code to import this component:

Edit in sandbox 
        
            
        import { Select } from 'mdb-ui-kit';