Select list
Bootstrap 5 Select list component
Responsive Select list built with Bootstrap 5. Examples include multiselect dropdown, select dropdown with search, placeholders, disabled select and options.
Note: To learn more about Select component and see all available options, methods, events and advanced usage - read Select Docs & API section
Basic example
Basic example of select component that allows you to choose from a number of options.
<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>
Multiple
Add multiple attribute to the select element to activate multiple mode.
<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>
Search
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>
Placeholder
Use placeholder option to set placeholder for select input. The placeholder will be displayed when input is focused and no option is selected.
<select data-mdb-select-init 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.
<select data-mdb-select-init 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.
<select data-mdb-select-init>
<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>