# Bootstrap 5 Multiselect

The multiselect component for Bootstrap 5 extends the native `<select>` element, featuring variations like dropdown, options, option groups, and more.

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

> This feature is only available in **AdminKit PRO**. [Learn more](/pricing/).

AdminKit PRO includes [Choices.js](https://github.com/Choices-js/Choices) 11, a configurable select and multiselect plugin without dependencies, styled to match Bootstrap 5. It is available as `window.Choices`; create an instance for each element:

```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>

<script>
new Choices(document.querySelector(".choices-multiple"));
</script>
```

```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>
```

---

Canonical HTML page: https://adminkit.io/bootstrap/docs/forms/multiselect/

Site overview for agents: https://adminkit.io/llms.txt (expanded: https://adminkit.io/llms-full.txt) · Documentation: https://adminkit.io/bootstrap/docs/ · Questions: support@adminkit.io