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>