AdminKit

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.

html
<select class="form-select" multiple>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
</select>

Advanced Multiselect ​

WARNING

This feature is only available in AdminKit PRO. Learn more.

Choices.js is a vanilla, lightweight, configurable multiselect/listbox input plugin, fully compatible with Bootstrap 5.

html
<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>
js
new window.Choices(document.querySelector(".choices-multiple"));

Sizing ​

You may also choose from small and large multiselect components to match our similarly sized text inputs.

html
<select class="form-select form-select-sm mb-3" multiple>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
</select>
<select class="form-select mb-3" multiple>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
</select>
<select class="form-select form-select-lg" multiple>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
</select>

Disabled ​

Add the disabled boolean attribute on a multiselect component to give it a gray appearance and remove pointer events.

html
<select class="form-select" multiple disabled>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
</select>