Bootstrap 5 Multi Select
Multi Select
Customize the native <select>
s with a powerful Bootstrap Multi-Select component that changes the element’s initial appearance and brings some new functionalities.
Other frameworks
CoreUI components are available as native Angular, React, and Vue components. To learn more please visit the following pages.
Basic example
A straightforward demonstration of how to implement a basic Bootstrap Multi Select dropdown, highlighting essential attributes and configurations.
<select class="form-multi-select" id="ms1" multiple data-coreui-search="true">
<option value="0">Angular</option>
<option value="1">Bootstrap</option>
<option value="2">React.js</option>
<option value="3">Vue.js</option>
<optgroup label="backend">
<option value="4">Django</option>
<option value="5">Laravel</option>
<option value="6">Node.js</option>
</optgroup>
</select>
<select class="form-multi-select" multiple data-coreui-search="true">
<option value="0">Angular</option>
<option value="1" disabled>Bootstrap</option>
<option value="2">React.js</option>
<option value="3">Vue.js</option>
<optgroup label="backend">
<option value="4" disabled>Django</option>
<option value="5">Laravel</option>
<option value="6">Node.js</option>
</optgroup>
</select>
Data source
Learn how to populate the multi-select component with data from various sources, including arrays and objects, for dynamic content integration.
Option elements
If you want to create a multi-select dropdown with predefined options, use the <option>
elements inside the <select>
tag.
<select class="form-multi-select" multiple data-coreui-search="true">
<option value="0" selected>Angular</option>
<option value="1">Bootstrap</option>
<option value="2">React.js</option>
<option value="3">Vue.js</option>
<optgroup label="backend">
<option value="4">Django</option>
<option value="5" selected>Laravel</option>
<option value="6">Node.js</option>
</optgroup>
</select>
Array data
To dynamically populate a multi-select dropdown with options from an array, start with an empty <select>
element. Use JavaScript to add options programmatically. This allows for more flexible and dynamic content management.
<select id="multiSelect" name="multiSelect"></select>
We use the following JavaScript to set up our multi-select:
const myMultiSelect = document.getElementById('multiSelect')
if (myMultiSelect) {
new coreui.MultiSelect(myMultiSelect, {
name: 'multiSelect',
options: [
{
value: 0,
text: 'Angular'
},
{
value: 1,
text: 'Bootstrap',
selected: true
},
{
value: 2,
text: 'React.js',
selected: true
},
{
value: 3,
text: 'Vue.js'
},
{
label: 'backend',
options: [
{
value: 4,
text: 'Django'
},
{
value: 5,
text: 'Laravel'
},
{
value: 6,
text: 'Node.js',
selected: true
}
]
}
],
search: true
})
}
Selection types
Explore different selection modes, including single and multiple selections, allowing customization based on user requirements.
Text
If you want to enable users to select multiple options as text entries, add the data-coreui-selection-type="text"
. This configuration includes search functionality, making it easier to filter options by typing.
<select class="form-multi-select" id="multiple-select-text" multiple data-coreui-selection-type="text" data-coreui-search="true">
<option value="0">Angular</option>
<option value="1">Bootstrap</option>
<option value="2">React.js</option>
<option value="3">Vue.js</option>
<optgroup label="backend">
<option value="4">Django</option>
<option value="5">Laravel</option>
<option value="6">Node.js</option>
</optgroup>
</select>
Tag
If you want to display selected options as tags, add the data-coreui-selection-type="tags"
. This mode is useful for visually grouping selected items. The search functionality is also enabled for better user experience.
<select class="form-multi-select" id="multiple-select-tag" multiple data-coreui-selection-type="tags" data-coreui-search="true">
<option value="0">Angular</option>
<option value="1">Bootstrap</option>
<option value="2">React.js</option>
<option value="3">Vue.js</option>
<optgroup label="backend">
<option value="4">Django</option>
<option value="5">Laravel</option>
<option value="6">Node.js</option>
</optgroup>
</select>
Counter
If you prefer to show a counter indicating the number of selected options, add the data-coreui-selection-type="tags"
. This helps users keep track of their selections and includes search functionality for filtering options.
<select class="form-multi-select" id="multiple-select-counter" multiple data-coreui-selection-type="counter" data-coreui-search="true">
<option value="0">Angular</option>
<option value="1">Bootstrap</option>
<option value="2">React.js</option>
<option value="3">Vue.js</option>
<optgroup label="backend">
<option value="4">Django</option>
<option value="5">Laravel</option>
<option value="6">Node.js</option>
</optgroup>
</select>
Single Select
Add the data-coreui-multiple="false"
boolean attribute to implement single-selection mode, enabling users to select only one option from the dropdown at a time.
<select class="form-multi-select" id="single-select" data-coreui-multiple="false">
<option value="0">Angular</option>
<option value="1">Bootstrap</option>
<option value="2">React.js</option>
<option value="3">Vue.js</option>
<optgroup label="backend">
<option value="4">Django</option>
<option value="5">Laravel</option>
<option value="6">Node.js</option>
</optgroup>
</select>
Disabled
Add the data-coreui-disabled="true"
boolean attribute to give it a grayed out appearance, remove pointer events, and prevent focusing.
<select class="form-multi-select" id="ms1" multiple data-coreui-search="true" data-coreui-disabled="true">
<option value="0">Angular</option>
<option value="1">Bootstrap</option>
<option value="2">React.js</option>
<option value="3">Vue.js</option>
<optgroup label="backend">
<option value="4">Django</option>
<option value="5">Laravel</option>
<option value="6">Node.js</option>
</optgroup>
</select>
Sizing
You may also choose from small and large multi selects to match our similarly sized text inputs.
<div class="row">
<div class="col-md-6">
<select class="form-multi-select form-multi-select-lg mb-3" id="multiple-select-counter" data-coreui-selection-type="counter" data-coreui-search="true">
<option value="0">Angular</option>
<option value="1">Bootstrap</option>
<option value="2">React.js</option>
<option value="3">Vue.js</option>
<optgroup label="backend">
<option value="4">Django</option>
<option value="5">Laravel</option>
<option value="6">Node.js</option>
</optgroup>
</select>
<select class="form-multi-select form-multi-select-sm" id="multiple-select-counter" data-coreui-selection-type="counter" data-coreui-search="true">
<option value="0">Angular</option>
<option value="1">Bootstrap</option>
<option value="2">React.js</option>
<option value="3">Vue.js</option>
<optgroup label="backend">
<option value="4">Django</option>
<option value="5">Laravel</option>
<option value="6">Node.js</option>
</optgroup>
</select>
</div>
<div class="col-md-6">
<select class="form-multi-select form-multi-select-lg mb-3" id="multiple-select-counter" data-coreui-selection-type="tags" data-coreui-search="true">
<option value="0">Angular</option>
<option value="1">Bootstrap</option>
<option value="2">React.js</option>
<option value="3">Vue.js</option>
<optgroup label="backend">
<option value="4">Django</option>
<option value="5">Laravel</option>
<option value="6">Node.js</option>
</optgroup>
</select>
<select class="form-multi-select form-multi-select-sm" id="multiple-select-counter" data-coreui-selection-type="tags" data-coreui-search="true">
<option value="0">Angular</option>
<option value="1">Bootstrap</option>
<option value="2">React.js</option>
<option value="3">Vue.js</option>
<optgroup label="backend">
<option value="4">Django</option>
<option value="5">Laravel</option>
<option value="6">Node.js</option>
</optgroup>
</select>
</div>
</div>
Usage
Heads up! In our documentation, all examples show standard CoreUI implementation. If you are using a Bootstrap-compatible version of CoreUI, remember to use the following changes:
- In the constructor, please use bootstrap instead of coreui. For example,
new bootstrap.Alert(...)
instead ofnew coreui.Alert(...)
- In events, please use bs instead of coreui, for example
close.bs.alert
instead ofclose.coreui.alert
- In data attributes, please use bs instead of coreui. For example,
data-bs-toggle="..."
instead ofdata-coreui-toggle="..."
Via data attributes
Add form-multi-select
class to a select
element.
<select class="form-multi-select" id="ms1" multiple data-coreui-search="true">
<option value="0">Angular</option>
<option value="1">Bootstrap</option>
<option value="2">React.js</option>
<option value="3">Vue.js</option>
<optgroup label="backend">
<option value="4">Django</option>
<option value="5">Laravel</option>
<option value="6">Node.js</option>
</optgroup>
</select>
Via JavaScript
Call the time picker via JavaScript:
<select class="form-multi-select"></select>
const mulitSelectElementList = Array.prototype.slice.call(document.querySelectorAll('.form-multi-select'))
const mulitSelectList = mulitSelectElementList.map(mulitSelectEl => {
return new coreui.MultiSelect(mulitSelectEl, {
// options
})
})
Options
As options can be passed via data attributes or JavaScript, you can append an option name to data-coreui-
, as in data-coreui-animation="{value}"
. Make sure to change the case type of the option name from “camelCase” to “kebab-case” when passing the options via data attributes. For example, use data-coreui-custom-class="beautifier"
instead of data-coreui-customClass="beautifier"
.
As of CoreUI 4.2.0, all components support an experimental reserved data attribute data-coreui-config
that can house simple component configuration as a JSON string. When an element has data-coreui-config='{"delay":0, "title":123}'
and data-coreui-title="456"
attributes, the final title
value will be 456
and the separate data attributes will override values given on data-coreui-config
. In addition, existing data attributes are able to house JSON values like data-coreui-delay='{"show":0,"hide":150}'
.
Name | Type | Default | Description |
---|---|---|---|
cleaner |
boolean | true |
Enables selection cleaner element. |
disabled |
boolean | false |
Toggle the disabled state for the component. |
invalid |
boolean | false |
Toggle the invalid state for the component. |
multiple |
boolean | true |
It specifies that multiple options can be selected at once. |
name |
string, null | null |
Set the name attribute for the native select element. |
options |
boolean, array | false |
List of option elements. |
optionsMaxHeight |
number, string | 'auto' |
Sets max-height of options list. |
optionsStyle |
string | 'checkbox' |
Sets option style. |
placeholder |
string | 'Select...' |
Specifies a short hint that is visible in the input. |
search |
boolean | false |
Enables search input element. |
searchNoResultsLabel |
string | 'No results found' |
Sets the label for no results when filtering. |
selectAll |
boolean | true |
Enables select all button. |
selectAllLabel |
string | 'Select all options' |
Sets the select all button label. |
selectionType |
string | 'tag' |
Sets the selection style. |
selectionTypeCounterText |
string | 'item(s) selected' |
Sets the counter selection label. |
valid |
boolean | false |
Toggle the valid state for the component. |
Methods
Method | Description |
---|---|
show |
Shows the multi select’s options. |
hide |
Hides the multi select’s options. |
update |
Updates the configuration of multi select. |
selectAll |
Select all options. |
deselectAll |
Deselect all options. |
dispose |
Destroys an element’s multi select. (Removes stored data on the DOM element) |
getInstance |
Static method which allows you to get the multi select instance associated with a DOM element. |
getValue |
Returns the array with selected elements. |
Events
Multi Select component exposes a few events for hooking into multi select functionality.
Method | Description |
---|---|
changed.coreui.multi-select |
Fires immediately when an option is selected or deselected. |
show.coreui.multi-select |
Fires immediately when the show instance method is called. |
shown.coreui.multi-select |
Fired when the multi select options have been made visible to the user and CSS transitions have completed. |
hide.coreui.multi-select |
Fires immediately when the hide instance method has been called. |
hidden.coreui.multi-select |
Fired when the multi select options have finished being hidden from the user and CSS transitions have completed. |
const myMutliSelect = document.getElementById('myMutliSelect')
myMutliSelect.addEventListener('changed.coreui.multi-select', event => {
// Get the list of selected options.
const selected = event.value
})
Customizing
CSS variables
MultiSelects use local CSS variables on .multi-select
for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
--#{$prefix}form-multi-select-zindex: #{$form-multi-select-zindex};
--#{$prefix}form-multi-select-font-family: #{$form-multi-select-font-family};
--#{$prefix}form-multi-select-font-size: #{$form-multi-select-font-size};
--#{$prefix}form-multi-select-font-weight: #{$form-multi-select-font-weight};
--#{$prefix}form-multi-select-line-height: #{$form-multi-select-line-height};
--#{$prefix}form-multi-select-color: #{$form-multi-select-color};
--#{$prefix}form-multi-select-bg: #{$form-multi-select-bg};
--#{$prefix}form-multi-select-box-shadow: #{$form-multi-select-box-shadow};
--#{$prefix}form-multi-select-border-width: #{$form-multi-select-border-width};
--#{$prefix}form-multi-select-border-color: #{$form-multi-select-border-color};
--#{$prefix}form-multi-select-border-radius: #{$form-multi-select-border-radius};
--#{$prefix}form-multi-select-disabled-color: #{$form-multi-select-disabled-color};
--#{$prefix}form-multi-select-disabled-bg: #{$form-multi-select-disabled-bg};
--#{$prefix}form-multi-select-disabled-border-color: #{$form-multi-select-disabled-border-color};
--#{$prefix}form-multi-select-focus-color: #{$form-multi-select-focus-color};
--#{$prefix}form-multi-select-focus-bg: #{$form-multi-select-focus-bg};
--#{$prefix}form-multi-select-focus-border-color: #{$form-multi-select-focus-border-color};
--#{$prefix}form-multi-select-focus-box-shadow: #{$form-multi-select-focus-box-shadow};
--#{$prefix}form-multi-select-placeholder-color: #{$form-multi-select-placeholder-color};
--#{$prefix}form-multi-select-selection-padding-y: #{$form-multi-select-selection-padding-y};
--#{$prefix}form-multi-select-selection-padding-x: #{$form-multi-select-selection-padding-x};
--#{$prefix}form-multi-select-cleaner-width: #{$form-multi-select-cleaner-width};
--#{$prefix}form-multi-select-cleaner-height: #{$form-multi-select-cleaner-height};
--#{$prefix}form-multi-select-cleaner-padding-y: #{$form-multi-select-cleaner-padding-y};
--#{$prefix}form-multi-select-cleaner-padding-x: #{$form-multi-select-cleaner-padding-x};
--#{$prefix}form-multi-select-cleaner-icon: #{escape-svg($form-multi-select-cleaner-icon)};
--#{$prefix}form-multi-select-cleaner-icon-color: #{$form-multi-select-cleaner-icon-color};
--#{$prefix}form-multi-select-cleaner-icon-hover-color: #{$form-multi-select-cleaner-icon-hover-color};
--#{$prefix}form-multi-select-cleaner-icon-size: #{$form-multi-select-cleaner-icon-size};
--#{$prefix}form-multi-select-indicator-width: #{$form-multi-select-indicator-width};
--#{$prefix}form-multi-select-indicator-height: #{$form-multi-select-indicator-height};
--#{$prefix}form-multi-select-indicator-padding-y: #{$form-multi-select-indicator-padding-y};
--#{$prefix}form-multi-select-indicator-padding-x: #{$form-multi-select-indicator-padding-x};
--#{$prefix}form-multi-select-indicator-icon: #{escape-svg($form-multi-select-indicator-icon)};
--#{$prefix}form-multi-select-indicator-icon-color: #{$form-multi-select-indicator-icon-color};
--#{$prefix}form-multi-select-indicator-icon-hover-color: #{$form-multi-select-indicator-icon-hover-color};
--#{$prefix}form-multi-select-indicator-icon-size: #{$form-multi-select-indicator-icon-size};
--#{$prefix}form-multi-select-select-all-padding-y: #{$form-multi-select-select-all-padding-y};
--#{$prefix}form-multi-select-select-all-padding-x: #{$form-multi-select-select-all-padding-x};
--#{$prefix}form-multi-select-select-all-color: #{$form-multi-select-select-all-color};
--#{$prefix}form-multi-select-select-all-bg: #{$form-multi-select-select-all-bg};
--#{$prefix}form-multi-select-select-all-border-width: #{$form-multi-select-select-all-border-width};
--#{$prefix}form-multi-select-select-all-border-color: #{$form-multi-select-select-all-border-color};
--#{$prefix}form-multi-select-select-all-hover-color: #{$form-multi-select-select-all-hover-color};
--#{$prefix}form-multi-select-select-all-hover-bg: #{$form-multi-select-select-all-hover-bg};
--#{$prefix}form-multi-select-dropdown-min-width: #{$form-multi-select-dropdown-min-width};
--#{$prefix}form-multi-select-dropdown-bg: #{$form-multi-select-dropdown-bg};
--#{$prefix}form-multi-select-dropdown-border-width: #{$form-multi-select-dropdown-border-width};
--#{$prefix}form-multi-select-dropdown-border-color: #{$form-multi-select-dropdown-border-color};
--#{$prefix}form-multi-select-dropdown-border-radius: #{$form-multi-select-dropdown-border-radius};
--#{$prefix}form-multi-select-dropdown-box-shadow: #{$form-multi-select-dropdown-box-shadow};
--#{$prefix}form-multi-select-options-padding-y: #{$form-multi-select-options-padding-y};
--#{$prefix}form-multi-select-options-padding-x: #{$form-multi-select-options-padding-x};
--#{$prefix}form-multi-select-options-font-size: #{$form-multi-select-options-font-size};
--#{$prefix}form-multi-select-options-font-weight: #{$form-multi-select-options-font-weight};
--#{$prefix}form-multi-select-options-color: #{$form-multi-select-options-color};
--#{$prefix}form-multi-select-optgroup-label-padding-y: #{$form-multi-select-optgroup-label-padding-y};
--#{$prefix}form-multi-select-optgroup-label-padding-x: #{$form-multi-select-optgroup-label-padding-x};
--#{$prefix}form-multi-select-optgroup-label-font-size: #{$form-multi-select-optgroup-label-font-size};
--#{$prefix}form-multi-select-optgroup-label-font-weight: #{$form-multi-select-optgroup-label-font-weight};
--#{$prefix}form-multi-select-optgroup-label-color: #{$form-multi-select-optgroup-label-color};
--#{$prefix}form-multi-select-optgroup-label-text-transform: #{$form-multi-select-optgroup-label-text-transform};
--#{$prefix}form-multi-select-option-padding-y: #{$form-multi-select-option-padding-y};
--#{$prefix}form-multi-select-option-padding-x: #{$form-multi-select-option-padding-x};
--#{$prefix}form-multi-select-option-margin-y: #{$form-multi-select-option-margin-y};
--#{$prefix}form-multi-select-option-margin-x: #{$form-multi-select-option-margin-x};
--#{$prefix}form-multi-select-option-border-width: #{$form-multi-select-option-border-width};
--#{$prefix}form-multi-select-option-border-color: #{$form-multi-select-option-border-color};
--#{$prefix}form-multi-select-option-border-radius: #{$form-multi-select-option-border-radius};
--#{$prefix}form-multi-select-option-box-shadow: #{$form-multi-select-option-box-shadow};
--#{$prefix}form-multi-select-option-hover-color: #{$form-multi-select-option-hover-color};
--#{$prefix}form-multi-select-option-hover-bg: #{$form-multi-select-option-hover-bg};
--#{$prefix}form-multi-select-option-focus-box-shadow: #{$form-multi-select-option-focus-box-shadow};
--#{$prefix}form-multi-select-option-disabled-color: #{$form-multi-select-option-disabled-color};
--#{$prefix}form-multi-select-option-indicator-width: #{$form-multi-select-option-indicator-width};
--#{$prefix}form-multi-select-option-indicator-bg: #{$form-multi-select-option-indicator-bg};
--#{$prefix}form-multi-select-option-indicator-border: #{$form-multi-select-option-indicator-border};
--#{$prefix}form-multi-select-option-indicator-border-radius: #{$form-multi-select-option-indicator-border-radius};
--#{$prefix}form-multi-select-option-selected-bg: #{$form-multi-select-option-selected-bg};
--#{$prefix}form-multi-select-option-selected-indicator-bg: #{$form-multi-select-option-selected-indicator-bg};
--#{$prefix}form-multi-select-option-selected-indicator-bg-image: #{escape-svg($form-multi-select-option-selected-indicator-bg-image)};
--#{$prefix}form-multi-select-option-selected-indicator-border-color: #{$form-multi-select-option-selected-indicator-border-color};
--#{$prefix}form-multi-select-tag-padding-y: #{$form-multi-select-tag-padding-y};
--#{$prefix}form-multi-select-tag-padding-x: #{$form-multi-select-tag-padding-x};
--#{$prefix}form-multi-select-tag-bg: #{$form-multi-select-tag-bg};
--#{$prefix}form-multi-select-tag-border-width: #{$form-multi-select-tag-border-width};
--#{$prefix}form-multi-select-tag-border-color: #{$form-multi-select-tag-border-color};
--#{$prefix}form-multi-select-tag-border-radius: #{$form-multi-select-tag-border-radius};
--#{$prefix}form-multi-select-tag-delete-width: #{$form-multi-select-tag-delete-width};
--#{$prefix}form-multi-select-tag-delete-height: #{$form-multi-select-tag-delete-height};
--#{$prefix}form-multi-select-tag-delete-icon: #{escape-svg($form-multi-select-tag-delete-icon)};
--#{$prefix}form-multi-select-tag-delete-icon-color: #{$form-multi-select-tag-delete-icon-color};
--#{$prefix}form-multi-select-tag-delete-icon-hover-color: #{$form-multi-select-tag-delete-icon-hover-color};
--#{$prefix}form-multi-select-tag-delete-icon-size: #{$form-multi-select-tag-delete-icon-size};
--#{$prefix}form-multi-select-selection-tags-gap: #{$form-multi-select-selection-tags-gap};
--#{$prefix}form-multi-select-selection-tags-padding-y: #{$form-multi-select-selection-tags-padding-y};
--#{$prefix}form-multi-select-selection-tags-padding-x: #{$form-multi-select-selection-tags-padding-x};
SASS variables
$form-multi-select-zindex: 1000;
$form-multi-select-font-family: $input-font-family;
$form-multi-select-font-size: $input-font-size;
$form-multi-select-font-weight: $input-font-weight;
$form-multi-select-line-height: $input-line-height;
$form-multi-select-color: $input-color;
$form-multi-select-bg: $input-bg;
$form-multi-select-box-shadow: $box-shadow-inset;
$form-multi-select-border-width: $input-border-width;
$form-multi-select-border-color: $input-border-color;
$form-multi-select-border-radius: $input-border-radius;
$form-multi-select-border-radius-sm: $input-border-radius-sm;
$form-multi-select-border-radius-lg: $input-border-radius-lg;
$form-multi-select-disabled-color: $input-disabled-color;
$form-multi-select-disabled-bg: $input-disabled-bg;
$form-multi-select-disabled-border-color: $input-disabled-border-color;
$form-multi-select-focus-color: $input-focus-color;
$form-multi-select-focus-bg: $input-focus-bg;
$form-multi-select-focus-border-color: $input-focus-border-color;
$form-multi-select-focus-box-shadow: $input-btn-focus-box-shadow;
$form-multi-select-invalid-border-color: var(--#{$prefix}form-invalid-border-color);
$form-multi-select-valid-border-color: var(--#{$prefix}form-valid-border-color);
$form-multi-select-placeholder-color: var(--#{$prefix}secondary-color);
$form-multi-select-selection-padding-y: $input-padding-y;
$form-multi-select-selection-padding-x: $input-padding-x;
$form-multi-select-selection-tags-gap: .25rem;
$form-multi-select-selection-tags-padding-y: .25rem;
$form-multi-select-selection-tags-padding-x: .25rem;
$form-multi-select-tag-bg: var(--#{$prefix}secondary-bg);
$form-multi-select-tag-border-width: var(--#{$prefix}border-width);
$form-multi-select-tag-border-color: var(--#{$prefix}border-color);
$form-multi-select-tag-border-radius: .25rem;
$form-multi-select-tag-border-radius-sm: .125rem;
$form-multi-select-tag-border-radius-lg: .375rem;
$form-multi-select-tag-padding-y: .0625rem;
$form-multi-select-tag-padding-x: .5rem;
$form-multi-select-tag-delete-width: .75rem;
$form-multi-select-tag-delete-height: .75rem;
$form-multi-select-tag-delete-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#000'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>");
$form-multi-select-tag-delete-icon-color: var(--#{$prefix}secondary-color);
$form-multi-select-tag-delete-icon-hover-color: var(--#{$prefix}body-color);
$form-multi-select-tag-delete-icon-size: .5rem;
$form-multi-select-cleaner-width: 1.5rem;
$form-multi-select-cleaner-height: 1.5rem;
$form-multi-select-cleaner-padding-x: 0;
$form-multi-select-cleaner-padding-y: 0;
$form-multi-select-cleaner-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#000'><path d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/></svg>");
$form-multi-select-cleaner-icon-color: var(--#{$prefix}tertiary-color);
$form-multi-select-cleaner-icon-hover-color: var(--#{$prefix}body-color);
$form-multi-select-cleaner-icon-size: .625rem;
$form-multi-select-indicator-width: 1.5rem;
$form-multi-select-indicator-height: 1.5rem;
$form-multi-select-indicator-padding-x: 0;
$form-multi-select-indicator-padding-y: 0;
$form-multi-select-indicator-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='#000'><path d='M256.045 416.136.717 160.807l29.579-29.579 225.749 225.748 225.749-225.748 29.579 29.579-255.328 255.329z'/></svg>");
$form-multi-select-indicator-icon-color: var(--#{$prefix}tertiary-color);
$form-multi-select-indicator-icon-hover-color: var(--#{$prefix}body-color);
$form-multi-select-indicator-icon-size: .75rem;
$form-multi-select-dropdown-min-width: 100%;
$form-multi-select-dropdown-bg: var(--#{$prefix}body-bg);
$form-multi-select-dropdown-border-color: var(--#{$prefix}border-color);
$form-multi-select-dropdown-border-width: var(--#{$prefix}border-width);
$form-multi-select-dropdown-border-radius: var(--#{$prefix}border-radius);
$form-multi-select-dropdown-box-shadow: var(--#{$prefix}box-shadow);
$form-multi-select-select-all-padding-y: .5rem;
$form-multi-select-select-all-padding-x: .75rem;
$form-multi-select-select-all-color: var(--#{$prefix}body-secondary-color);
$form-multi-select-select-all-bg: transparent;
$form-multi-select-select-all-hover-color: var(--#{$prefix}body-color);
$form-multi-select-select-all-hover-bg: transparent;
$form-multi-select-select-all-border-width: $input-border-width;
$form-multi-select-select-all-border-color: $input-border-color;
$form-multi-select-options-padding-y: .5rem;
$form-multi-select-options-padding-x: .75rem;
$form-multi-select-options-font-size: $font-size-base;
$form-multi-select-options-font-weight: $font-weight-normal;
$form-multi-select-options-color: var(--#{$prefix}body-color);
$form-multi-select-optgroup-label-padding-y: .5rem;
$form-multi-select-optgroup-label-padding-x: .625rem;
$form-multi-select-optgroup-label-font-size: 80%;
$form-multi-select-optgroup-label-font-weight: $font-weight-bold;
$form-multi-select-optgroup-label-color: var(--#{$prefix}tertiary-color);
$form-multi-select-optgroup-label-text-transform: uppercase;
$form-multi-select-option-padding-y: .5rem;
$form-multi-select-option-padding-x: 1.25rem;
$form-multi-select-option-margin-y: 1px;
$form-multi-select-option-margin-x: 0;
$form-multi-select-option-border-width: $input-border-width;
$form-multi-select-option-border-color: transparent;
$form-multi-select-option-border-radius: var(--#{$prefix}border-radius);
$form-multi-select-option-box-shadow: $box-shadow-inset;
$form-multi-select-option-hover-color: var(--#{$prefix}body-color);
$form-multi-select-option-hover-bg: var(--#{$prefix}tertiary-bg);
$form-multi-select-option-focus-box-shadow: $input-btn-focus-box-shadow;
$form-multi-select-option-indicator-width: 1em;
$form-multi-select-option-indicator-bg: $form-check-input-bg;
$form-multi-select-option-indicator-border: $form-check-input-border;
$form-multi-select-option-indicator-border-radius: .25em;
$form-multi-select-option-selected-bg: var(--#{$prefix}secondary-bg);
$form-multi-select-option-selected-indicator-bg: $form-check-input-checked-bg-color;
$form-multi-select-option-selected-indicator-bg-image: $form-check-input-checked-bg-image;
$form-multi-select-option-selected-indicator-border-color: $form-multi-select-option-selected-indicator-bg;
$form-multi-select-option-disabled-color: var(--#{$prefix}secondary-color);
$form-multi-select-font-size-lg: $input-font-size-lg;
$form-multi-select-selection-padding-y-lg: $input-padding-y-lg;
$form-multi-select-selection-padding-x-lg: $input-padding-x-lg;
$form-multi-select-selection-tags-gap-lg: .25rem;
$form-multi-select-selection-tags-padding-y-lg: .25rem;
$form-multi-select-selection-tags-padding-x-lg: .25rem;
$form-multi-select-tag-padding-y-lg: .175rem;
$form-multi-select-tag-padding-x-lg: .5rem;
$form-multi-select-font-size-sm: $input-font-size-sm;
$form-multi-select-selection-padding-y-sm: $input-padding-y-sm;
$form-multi-select-selection-padding-x-sm: $input-padding-x-sm;
$form-multi-select-selection-tags-gap-sm: .125rem;
$form-multi-select-selection-tags-padding-y-sm: .0625rem;
$form-multi-select-selection-tags-padding-x-sm: .125rem;
$form-multi-select-tag-padding-y-sm: .075rem;
$form-multi-select-tag-padding-x-sm: .5rem;