Bootstrap 5 Multiselect
MultiselectThe multiselect component for Bootstrap 5 is an extension on top of the native <select>
component, and includes multiple variations including a listbox, dropdown, disabled options, option groups and more.
Default
Add the multiple
attribute to the .form-select
component to trigger custom styles & enable the multiselect dropdown. Custom styles are limited to the <select>
’s initial appearance and browser restrictions do not allow you to change <option>
s.
<select class="form-select" multiple>
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
Advanced Multiselect
Choices.js is a vanilla, lightweight, configurable multiselect/listbox input plugin, fully compatible with Bootstrap 5.
<select class="form-control choices-multiple" multiple>
<option></option>
<option value="AZ">Arizona</option>
<option value="CO">Colorado</option>
<option value="ID">Idaho</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NM">New Mexico</option>
<option value="ND">North Dakota</option>
<option value="UT">Utah</option>
<option value="WY">Wyoming</option>
</select>
<script>
new Choices(document.querySelector(".choices-multiple"));
</script>
Sizing
You may also choose from small and large multiselect components to match our similarly sized text inputs.
<select class="form-select form-select-sm mb-3" multiple>
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="form-select mb-3" multiple>
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="form-select form-select-lg" multiple>
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
Disabled
Add the disabled
boolean attribute on a multiselect component to give it a gray appearance and remove pointer events.
<select class="form-select" multiple disabled>
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>