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.

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>

Multiple

Add multiple attribute to the select element to activate multiple mode.

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>

Placeholder

Use placeholder option to set placeholder for select input. The placeholder will be displayed when input is focused and no option is selected.

Edit in sandbox 
<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.

One
Edit in sandbox 
<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.

One
Edit in sandbox 
<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>