This component is part of CoreUI PRO – a powerful UI library with over 250 components and 25+ templates, designed to help you build modern, responsive apps faster. Fully compatible with Angular, Bootstrap, React.js, and Vue.js.
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.
🤖 Looking for the LLM-optimized version?View llm.md
Other frameworks
CoreUI components are available as native Angular, React, and Vue components. To learn more please visit the following pages.
On this page
Basic example
A straightforward demonstration of how to implement a basic Bootstrap Multi Select dropdown, highlighting essential attributes and configurations.
html
<selectclass="form-multi-select"id="ms1"multipledata-coreui-search="global"><optionvalue="0">Angular</option><optionvalue="1">Bootstrap</option><optionvalue="2">React.js</option><optionvalue="3">Vue.js</option><optgrouplabel="backend"><optionvalue="4">Django</option><optionvalue="5">Laravel</option><optionvalue="6">Node.js</option></optgroup></select>html
<selectclass="form-multi-select"multipledata-coreui-search="true"><optionvalue="0">Angular</option><optionvalue="1"disabled>Bootstrap</option><optionvalue="2">React.js</option><optionvalue="3">Vue.js</option><optgrouplabel="backend"><optionvalue="4"disabled>Django</option><optionvalue="5">Laravel</option><optionvalue="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.
html
<selectclass="form-multi-select"multipledata-coreui-search="true"><optionvalue="0"selected>Angular</option><optionvalue="1">Bootstrap</option><optionvalue="2">React.js</option><optionvalue="3">Vue.js</option><optgrouplabel="backend"><optionvalue="4">Django</option><optionvalue="5"selected>Laravel</option><optionvalue="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.
html
<selectid="multiSelect"name="multiSelect"></select>We use the following JavaScript to set up our multi-select:
docs/assets/js/partials/snippets.js
constmyMultiSelect=document.getElementById('multiSelect')if(myMultiSelect){newcoreui.MultiSelect(myMultiSelect,{name:'multiSelect',options:[{label:'frontend',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})}Search
You can configure the search functionality within the component. Thedata-coreui-search option determines how the search input element is enabled and behaves. It accepts multiple types to provide flexibility in configuring search behavior. By default is set tofalse.
html
<selectclass="form-multi-select"multiple><optionvalue="0">Angular</option><optionvalue="1">Bootstrap</option><optionvalue="2">React.js</option><optionvalue="3">Vue.js</option><optgrouplabel="backend"><optionvalue="4">Django</option><optionvalue="5">Laravel</option><optionvalue="6">Node.js</option></optgroup></select>Standard search
To enable the default search input element with standard behavior, please adddata-coreui-search="true" like in the example below:
html
<selectclass="form-multi-select"multipledata-coreui-search="true"><optionvalue="0">Angular</option><optionvalue="1">Bootstrap</option><optionvalue="2">React.js</option><optionvalue="3">Vue.js</option><optgrouplabel="backend"><optionvalue="4">Django</option><optionvalue="5">Laravel</option><optionvalue="6">Node.js</option></optgroup></select>Global search
Added in v5.6.0To enable the global search functionality within the Multi Select component, please adddata-coreui-search="global". Whendata-coreui-search is set to'global', the user can perform searches across the entire component, regardless of where their focus is within the component. This allows for a more flexible and intuitive search experience, ensuring the search input is recognized from any point within the component.
html
<selectclass="form-multi-select"multipledata-coreui-search="global"><optionvalue="0">Angular</option><optionvalue="1">Bootstrap</option><optionvalue="2">React.js</option><optionvalue="3">Vue.js</option><optgrouplabel="backend"><optionvalue="4">Django</option><optionvalue="5">Laravel</option><optionvalue="6">Node.js</option></optgroup></select>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 thedata-coreui-selection-type="text". This configuration includes search functionality, making it easier to filter options by typing.
html
<selectclass="form-multi-select"id="multiple-select-text"multipledata-coreui-selection-type="text"data-coreui-search="true"><optionvalue="0">Angular</option><optionvalue="1">Bootstrap</option><optionvalue="2">React.js</option><optionvalue="3">Vue.js</option><optgrouplabel="backend"><optionvalue="4">Django</option><optionvalue="5">Laravel</option><optionvalue="6">Node.js</option></optgroup></select>Tag
If you want to display selected options as tags, add thedata-coreui-selection-type="tags". This mode is useful for visually grouping selected items. The search functionality is also enabled for better user experience.
html
<selectclass="form-multi-select"id="multiple-select-tag"multipledata-coreui-selection-type="tags"data-coreui-search="true"><optionvalue="0">Angular</option><optionvalue="1">Bootstrap</option><optionvalue="2">React.js</option><optionvalue="3">Vue.js</option><optgrouplabel="backend"><optionvalue="4">Django</option><optionvalue="5">Laravel</option><optionvalue="6">Node.js</option></optgroup></select>Counter
If you prefer to show a counter indicating the number of selected options, add thedata-coreui-selection-type="tags". This helps users keep track of their selections and includes search functionality for filtering options.
html
<selectclass="form-multi-select"id="multiple-select-counter"multipledata-coreui-selection-type="counter"data-coreui-search="true"><optionvalue="0">Angular</option><optionvalue="1">Bootstrap</option><optionvalue="2">React.js</option><optionvalue="3">Vue.js</option><optgrouplabel="backend"><optionvalue="4">Django</option><optionvalue="5">Laravel</option><optionvalue="6">Node.js</option></optgroup></select>Single Select
Add thedata-coreui-multiple="false" boolean attribute to implement single-selection mode, enabling users to select only one option from the dropdown at a time.
html
<selectclass="form-multi-select"id="single-select"data-coreui-multiple="false"><optionvalue="0">Angular</option><optionvalue="1">Bootstrap</option><optionvalue="2">React.js</option><optionvalue="3">Vue.js</option><optgrouplabel="backend"><optionvalue="4">Django</option><optionvalue="5">Laravel</option><optionvalue="6">Node.js</option></optgroup></select>Disabled
Add thedata-coreui-disabled="true" boolean attribute to give it a grayed out appearance, remove pointer events, and prevent focusing.
html
<selectclass="form-multi-select"id="ms1"multipledata-coreui-search="true"data-coreui-disabled="true"><optionvalue="0">Angular</option><optionvalue="1">Bootstrap</option><optionvalue="2">React.js</option><optionvalue="3">Vue.js</option><optgrouplabel="backend"><optionvalue="4">Django</option><optionvalue="5">Laravel</option><optionvalue="6">Node.js</option></optgroup></select>Custom templates
The CoreUI Bootstrap Multi Select Component provides the flexibility to personalize options and group labels by utilizing custom templates. You can easily customize the options using theoptionsTemplate, and for groups, you can useoptionsGroupsTemplate, as demonstrated in the examples below:
html
<divclass="row"><divclass="col-md-6"><selectid="myMultiSelectCountries"class="form-multi-select"></select></div><divclass="col-md-6"><selectid="myMultiSelectCountriesAndCities"class="form-multi-select"></select></div></div>We use the following JavaScript to set up our multi-select:
docs/assets/js/partials/snippets.js
constmyMultiSelectCountries=document.getElementById('myMultiSelectCountries')constmyMultiSelectCountriesAndCities=document.getElementById('myMultiSelectCountriesAndCities')if(myMultiSelectCountries&&myMultiSelectCountriesAndCities){constcountries=[{value:'pl',text:'Poland',flag:'🇵🇱'},{value:'de',text:'Germany',flag:'🇩🇪'},{value:'us',text:'United States',flag:'🇺🇸'},{value:'es',text:'Spain',flag:'🇪🇸'},{value:'gb',text:'United Kingdom',flag:'🇬🇧'}]constcities=[{label:'United States',code:'us',flag:'🇺🇸',options:[{value:'au',text:'Austin'},{value:'ch',text:'Chicago'},{value:'la',text:'Los Angeles'},{value:'ny',text:'New York'},{value:'sa',text:'San Jose'}]},{label:'United Kingdom',code:'gb',flag:'🇬🇧',options:[{value:'li',text:'Liverpool'},{value:'lo',text:'London'},{value:'ma',text:'Manchester'}]}]newcoreui.MultiSelect(myMultiSelectCountries,{cleaner:true,multiple:true,options:countries,optionsTemplate(option){return`<div class="d-flex align-items-center gap-2"><span class="fs-5">${option.flag}</span><span>${option.text}</span></div>`},placeholder:'Select countries',search:true,selectionType:'tags'})newcoreui.MultiSelect(myMultiSelectCountriesAndCities,{cleaner:true,multiple:true,options:cities,optionsGroupsTemplate(optionGroup){return`<div class="d-flex align-items-center gap-2"><span class="text-body fs-5">${optionGroup.flag}</span><span>${optionGroup.label}</span></div>`},placeholder:'Select cities',search:true,selectionType:'tags'})}Sizing
You may also choose from small and large multi selects to match our similarly sized text inputs.
html
<divclass="row"><divclass="col-md-6"><selectclass="form-multi-select form-multi-select-lg mb-3"id="multiple-select-counter"data-coreui-selection-type="counter"data-coreui-search="true"><optionvalue="0">Angular</option><optionvalue="1">Bootstrap</option><optionvalue="2">React.js</option><optionvalue="3">Vue.js</option><optgrouplabel="backend"><optionvalue="4">Django</option><optionvalue="5">Laravel</option><optionvalue="6">Node.js</option></optgroup></select><selectclass="form-multi-select form-multi-select-sm"id="multiple-select-counter"data-coreui-selection-type="counter"data-coreui-search="true"><optionvalue="0">Angular</option><optionvalue="1">Bootstrap</option><optionvalue="2">React.js</option><optionvalue="3">Vue.js</option><optgrouplabel="backend"><optionvalue="4">Django</option><optionvalue="5">Laravel</option><optionvalue="6">Node.js</option></optgroup></select></div><divclass="col-md-6"><selectclass="form-multi-select form-multi-select-lg mb-3"id="multiple-select-counter"data-coreui-selection-type="tags"data-coreui-search="true"><optionvalue="0">Angular</option><optionvalue="1">Bootstrap</option><optionvalue="2">React.js</option><optionvalue="3">Vue.js</option><optgrouplabel="backend"><optionvalue="4">Django</option><optionvalue="5">Laravel</option><optionvalue="6">Node.js</option></optgroup></select><selectclass="form-multi-select form-multi-select-sm"id="multiple-select-counter"data-coreui-selection-type="tags"data-coreui-search="true"><optionvalue="0">Angular</option><optionvalue="1">Bootstrap</option><optionvalue="2">React.js</option><optionvalue="3">Vue.js</option><optgrouplabel="backend"><optionvalue="4">Django</option><optionvalue="5">Laravel</option><optionvalue="6">Node.js</option></optgroup></select></div></div>Usage
Heads up! In our documentation, all examples showstandard CoreUI implementation. If you are using aBootstrap-compatible version of CoreUI, remember to use the following changes:
- In the constructor, please usebootstrap instead ofcoreui. For example,
new bootstrap.Alert(...)instead ofnew coreui.Alert(...) - In events, please usebs instead ofcoreui, for example
close.bs.alertinstead ofclose.coreui.alert - In data attributes, please usebs instead ofcoreui. For example,
data-bs-toggle="..."instead ofdata-coreui-toggle="..."
Via data attributes
Addform-multi-select class to aselect element.
<selectclass="form-multi-select"id="ms1"multipledata-coreui-search="true"><optionvalue="0">Angular</option><optionvalue="1">Bootstrap</option><optionvalue="2">React.js</option><optionvalue="3">Vue.js</option><optgrouplabel="backend"><optionvalue="4">Django</option><optionvalue="5">Laravel</option><optionvalue="6">Node.js</option></optgroup></select>Via JavaScript
Call the time picker via #"0"><selectclass="form-multi-select"></select>
constmulitSelectElementList=Array.prototype.slice.call(document.querySelectorAll('.form-multi-select'))constmulitSelectList=mulitSelectElementList.map(mulitSelectEl=>{returnnewcoreui.MultiSelect(mulitSelectEl,{// options})})Options
Options can be passed using data attributes or JavaScript. To do this, append an option name todata-coreui-, such asdata-coreui-animation="{value}". Remember to convert the case of the option name from “camelCase” to “kebab-case” when using data attributes. For instance, you should writedata-coreui-custom-class="beautifier" rather thandata-coreui-customClass="beautifier".
Starting with CoreUI 4.2.0, all components support anexperimental reserved data attribute nameddata-coreui-config, which can contain simple component configurations as a JSON string. If an element has attributesdata-coreui-config='{"delay":50, "title":689}' anddata-coreui-title="Custom Title", then the final value fortitle will beCustom Title, as the standard data attributes will take precedence over values specified indata-coreui-config. Moreover, existing data attributes can also hold JSON values likedata-coreui-delay='{"show":50, "hide":250}'.
| Name | Type | Default | Description |
|---|---|---|---|
allowList | object | DefaultAllowlist | Object containing allowed tags and attributes for HTML sanitization when using custom templates. |
ariaCleanerLabel | string | Clear all selections | A string that provides an accessible label for the cleaner button. This label is read by screen readers to describe the action associated with the button. |
cleaner | boolean | true | Enables selection cleaner element. |
clearSearchOnSelect | boolean | false | Clear current search on selecting an item. |
container | string, element, false | false | Appends the dropdown to a specific element. Example:container: 'body'. |
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. |
optionsGroupsTemplate | function, null | null | Custom template function for rendering option group labels. Receives the group object as parameter. |
optionsMaxHeight | number, string | 'auto' | Setsmax-height of options list. |
optionsStyle | string | 'checkbox' | Sets option style. |
optionsTemplate | function, null | null | Custom template function for rendering individual options. Receives the option object as parameter. |
placeholder | string | 'Select...' | Specifies a short hint that is visible in the input. |
required | boolean | false | Makes the input field required for form validation. |
sanitize | boolean | true | Enables HTML sanitization for custom templates to prevent XSS attacks. |
sanitizeFn | function, null | null | Custom sanitization function. If provided, it will be used instead of the built-in sanitizer. |
search | boolean, string | false | Enables search input element. When set to'global', the user can perform searches across the entire component, regardless of where their focus is within the component. |
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. |
value | boolean | null | Sets the initially selected values for the multi-select 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. |
constmyMutliSelect=document.getElementById('myMutliSelect')myMutliSelect.addEventListener('changed.coreui.multi-select',event=>{// Get the list of selected options.constselected=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.
scss/forms/_form-multi-select.scss
--cui-form-multi-select-zindex:#{$form-multi-select-zindex};--cui-form-multi-select-font-family:#{$form-multi-select-font-family};--cui-form-multi-select-font-size:#{$form-multi-select-font-size};--cui-form-multi-select-font-weight:#{$form-multi-select-font-weight};--cui-form-multi-select-line-height:#{$form-multi-select-line-height};--cui-form-multi-select-color:#{$form-multi-select-color};--cui-form-multi-select-bg:#{$form-multi-select-bg};--cui-form-multi-select-box-shadow:#{$form-multi-select-box-shadow};--cui-form-multi-select-border-width:#{$form-multi-select-border-width};--cui-form-multi-select-border-color:#{$form-multi-select-border-color};--cui-form-multi-select-border-radius:#{$form-multi-select-border-radius};--cui-form-multi-select-disabled-color:#{$form-multi-select-disabled-color};--cui-form-multi-select-disabled-bg:#{$form-multi-select-disabled-bg};--cui-form-multi-select-disabled-border-color:#{$form-multi-select-disabled-border-color};--cui-form-multi-select-focus-color:#{$form-multi-select-focus-color};--cui-form-multi-select-focus-bg:#{$form-multi-select-focus-bg};--cui-form-multi-select-focus-border-color:#{$form-multi-select-focus-border-color};--cui-form-multi-select-focus-box-shadow:#{$form-multi-select-focus-box-shadow};--cui-form-multi-select-placeholder-color:#{$form-multi-select-placeholder-color};--cui-form-multi-select-selection-padding-y:#{$form-multi-select-selection-padding-y};--cui-form-multi-select-selection-padding-x:#{$form-multi-select-selection-padding-x};--cui-form-multi-select-cleaner-width:#{$form-multi-select-cleaner-width};--cui-form-multi-select-cleaner-height:#{$form-multi-select-cleaner-height};--cui-form-multi-select-cleaner-padding-y:#{$form-multi-select-cleaner-padding-y};--cui-form-multi-select-cleaner-padding-x:#{$form-multi-select-cleaner-padding-x};--cui-form-multi-select-cleaner-icon:#{escape-svg($form-multi-select-cleaner-icon)};--cui-form-multi-select-cleaner-icon-color:#{$form-multi-select-cleaner-icon-color};--cui-form-multi-select-cleaner-icon-hover-color:#{$form-multi-select-cleaner-icon-hover-color};--cui-form-multi-select-cleaner-icon-size:#{$form-multi-select-cleaner-icon-size};--cui-form-multi-select-indicator-width:#{$form-multi-select-indicator-width};--cui-form-multi-select-indicator-height:#{$form-multi-select-indicator-height};--cui-form-multi-select-indicator-padding-y:#{$form-multi-select-indicator-padding-y};--cui-form-multi-select-indicator-padding-x:#{$form-multi-select-indicator-padding-x};--cui-form-multi-select-indicator-icon:#{escape-svg($form-multi-select-indicator-icon)};--cui-form-multi-select-indicator-icon-color:#{$form-multi-select-indicator-icon-color};--cui-form-multi-select-indicator-icon-hover-color:#{$form-multi-select-indicator-icon-hover-color};--cui-form-multi-select-indicator-icon-size:#{$form-multi-select-indicator-icon-size};--cui-form-multi-select-select-all-padding-y:#{$form-multi-select-select-all-padding-y};--cui-form-multi-select-select-all-padding-x:#{$form-multi-select-select-all-padding-x};--cui-form-multi-select-select-all-color:#{$form-multi-select-select-all-color};--cui-form-multi-select-select-all-bg:#{$form-multi-select-select-all-bg};--cui-form-multi-select-select-all-border-width:#{$form-multi-select-select-all-border-width};--cui-form-multi-select-select-all-border-color:#{$form-multi-select-select-all-border-color};--cui-form-multi-select-select-all-hover-color:#{$form-multi-select-select-all-hover-color};--cui-form-multi-select-select-all-hover-bg:#{$form-multi-select-select-all-hover-bg};--cui-form-multi-select-dropdown-min-width:#{$form-multi-select-dropdown-min-width};--cui-form-multi-select-dropdown-bg:#{$form-multi-select-dropdown-bg};--cui-form-multi-select-dropdown-border-width:#{$form-multi-select-dropdown-border-width};--cui-form-multi-select-dropdown-border-color:#{$form-multi-select-dropdown-border-color};--cui-form-multi-select-dropdown-border-radius:#{$form-multi-select-dropdown-border-radius};--cui-form-multi-select-dropdown-box-shadow:#{$form-multi-select-dropdown-box-shadow};--cui-form-multi-select-options-padding-y:#{$form-multi-select-options-padding-y};--cui-form-multi-select-options-padding-x:#{$form-multi-select-options-padding-x};--cui-form-multi-select-options-font-size:#{$form-multi-select-options-font-size};--cui-form-multi-select-options-font-weight:#{$form-multi-select-options-font-weight};--cui-form-multi-select-options-color:#{$form-multi-select-options-color};--cui-form-multi-select-optgroup-label-padding-y:#{$form-multi-select-optgroup-label-padding-y};--cui-form-multi-select-optgroup-label-padding-x:#{$form-multi-select-optgroup-label-padding-x};--cui-form-multi-select-optgroup-label-font-size:#{$form-multi-select-optgroup-label-font-size};--cui-form-multi-select-optgroup-label-font-weight:#{$form-multi-select-optgroup-label-font-weight};--cui-form-multi-select-optgroup-label-color:#{$form-multi-select-optgroup-label-color};--cui-form-multi-select-optgroup-label-text-transform:#{$form-multi-select-optgroup-label-text-transform};--cui-form-multi-select-option-padding-y:#{$form-multi-select-option-padding-y};--cui-form-multi-select-option-padding-x:#{$form-multi-select-option-padding-x};--cui-form-multi-select-option-margin-y:#{$form-multi-select-option-margin-y};--cui-form-multi-select-option-margin-x:#{$form-multi-select-option-margin-x};--cui-form-multi-select-option-border-width:#{$form-multi-select-option-border-width};--cui-form-multi-select-option-border-color:#{$form-multi-select-option-border-color};--cui-form-multi-select-option-border-radius:#{$form-multi-select-option-border-radius};--cui-form-multi-select-option-box-shadow:#{$form-multi-select-option-box-shadow};--cui-form-multi-select-option-hover-color:#{$form-multi-select-option-hover-color};--cui-form-multi-select-option-hover-bg:#{$form-multi-select-option-hover-bg};--cui-form-multi-select-option-focus-box-shadow:#{$form-multi-select-option-focus-box-shadow};--cui-form-multi-select-option-disabled-color:#{$form-multi-select-option-disabled-color};--cui-form-multi-select-option-indicator-width:#{$form-multi-select-option-indicator-width};--cui-form-multi-select-option-indicator-bg:#{$form-multi-select-option-indicator-bg};--cui-form-multi-select-option-indicator-border:#{$form-multi-select-option-indicator-border};--cui-form-multi-select-option-indicator-border-radius:#{$form-multi-select-option-indicator-border-radius};--cui-form-multi-select-option-selected-bg:#{$form-multi-select-option-selected-bg};--cui-form-multi-select-option-selected-indicator-bg:#{$form-multi-select-option-selected-indicator-bg};--cui-form-multi-select-option-selected-indicator-bg-image:#{escape-svg($form-multi-select-option-selected-indicator-bg-image)};--cui-form-multi-select-option-selected-indicator-border-color:#{$form-multi-select-option-selected-indicator-border-color};--cui-form-multi-select-tag-padding-y:#{$form-multi-select-tag-padding-y};--cui-form-multi-select-tag-padding-x:#{$form-multi-select-tag-padding-x};--cui-form-multi-select-tag-bg:#{$form-multi-select-tag-bg};--cui-form-multi-select-tag-border-width:#{$form-multi-select-tag-border-width};--cui-form-multi-select-tag-border-color:#{$form-multi-select-tag-border-color};--cui-form-multi-select-tag-border-radius:#{$form-multi-select-tag-border-radius};--cui-form-multi-select-tag-delete-width:#{$form-multi-select-tag-delete-width};--cui-form-multi-select-tag-delete-height:#{$form-multi-select-tag-delete-height};--cui-form-multi-select-tag-delete-icon:#{escape-svg($form-multi-select-tag-delete-icon)};--cui-form-multi-select-tag-delete-icon-color:#{$form-multi-select-tag-delete-icon-color};--cui-form-multi-select-tag-delete-icon-hover-color:#{$form-multi-select-tag-delete-icon-hover-color};--cui-form-multi-select-tag-delete-icon-size:#{$form-multi-select-tag-delete-icon-size};--cui-form-multi-select-selection-tags-gap:#{$form-multi-select-selection-tags-gap};--cui-form-multi-select-selection-tags-padding-y:#{$form-multi-select-selection-tags-padding-y};--cui-form-multi-select-selection-tags-padding-x:#{$form-multi-select-selection-tags-padding-x};SASS variables
scss/_variables.scss
$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:$form-invalid-border-color;$form-multi-select-valid-border-color:$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;