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); }); })();
24H 00M 00S

Get one of the limited daily offers for AI Bundles with 98% OFF for our Black Days Sale!