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.

One
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.

This value is valid
This value is invalid
✕
One
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);
});
})();