⭐️ If you like this product, please support us by starring our GitHub repository! Star ⭐️
GitHub Download Get AdminKit Pro

Bootstrap 5 Multiselect

Multiselect

The 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

This feature is only available in AdminKit PRO. Upgrade now.

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>