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