Support CoreUI Development

CoreUI is an MIT-licensed open source project and is completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing.

You can support our Open Source software development in the following ways:

  • Buy the CoreUI PRO, and get access to PRO components, and dedicated support.
  • Became a sponsor, and get your logo on BACKERS.md/README.md files or each site of this documentation
  • Give us a star ⭐️ on Github.

Multi Select

Customize the native <select>s with a powerful Multi-Select component that changes the element’s initial appearance and brings some new functionalities.

Basic example

<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

Option elements

<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

<select id="multiSelect"></select>

<script type="text/javascript">
  const myMultiSelect = document.querySelector('#multiSelect')
  const cuiMultiSelect = new coreui.MultiSelect(myMultiSelect, {
    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
          }
        ]
      }
    ]
  })
</script>

Selection types

Text

<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

<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

<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

<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

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
disabled boolean false
multiple boolean true
placeholder string 'Select...'
options (boolean|array) false
optionsMaxHeight (number|string) 'auto'
optionsStyle string 'checkbox'
search boolean false
searchNoResultsLabel string 'No results found'
selectAll boolean true
selectAllLabel string 'Select all options'
selectionType string 'tag'
selectionTypeCounterText string 'item(s) selected'

Methods

Method Description
show Shows the multi select’s options.
hide Hides the multi select’s options.
update Updates the configuration of multi select.
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.

  --cui-form-multi-select-padding-y: #{$form-multi-select-padding-y};
  --cui-form-multi-select-padding-x: #{$form-multi-select-padding-x};
  --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-bg-position: #{$form-multi-select-bg-position};
  --cui-form-multi-select-bg-size: #{$form-multi-select-bg-size};
  --cui-form-multi-select-border-color: #{$form-multi-select-border-color};
  --cui-form-multi-select-border: #{$form-multi-select-border-width} solid var(--cui-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-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-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};

  --cui-form-multi-select-indicator: #{escape-svg($form-multi-select-indicator)};
  --cui-form-multi-select-indicator-padding: #{$form-multi-select-indicator-padding};

  --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-bg: #{escape-svg($form-multi-select-cleaner-bg)};
  --cui-form-multi-select-cleaner-hover-bg: #{escape-svg($form-multi-select-cleaner-hover-bg)};
  --cui-form-multi-select-cleaner-focus-bg: #{escape-svg($form-multi-select-cleaner-focus-bg)};

  --cui-form-multi-select-search-color: #{$form-multi-select-search-color};
  --cui-form-multi-select-search-bg: #{$form-multi-select-search-bg};
  --cui-form-multi-select-search-border-radius: #{$form-multi-select-search-border-radius};

  --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-color: #{$form-multi-select-select-all-border-color};
  --cui-form-multi-select-select-all-border: #{$form-multi-select-select-all-border-width} solid var(--cui-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-options-margin-top: #{$form-multi-select-options-margin-top};
  --cui-form-multi-select-options-bg: #{$form-multi-select-options-bg};
  --cui-form-multi-select-options-border-color: #{$form-multi-select-options-border-color};
  --cui-form-multi-select-options-border: #{$form-multi-select-options-border-width} solid var(--cui-form-multi-select-options-border-color);
  --cui-form-multi-select-options-border-radius: #{$form-multi-select-options-border-radius};

  --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-color: #{$form-multi-select-options-color};

  --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-border-radius: #{$form-multi-select-option-border-radius};
  --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-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-margin-y: #{$form-multi-select-tag-margin-y};
  --cui-form-multi-select-tag-margin-x: #{$form-multi-select-tag-margin-x};
  --cui-form-multi-select-tag-bg: #{$form-multi-select-tag-bg};
  --cui-form-multi-select-tag-border-color: #{$form-multi-select-tag-border-color};
  --cui-form-multi-select-tag-border: #{$form-multi-select-tag-border-width} solid var(--cui-form-multi-select-tag-border-color);
  --cui-form-multi-select-tag-border-radius: #{$form-multi-select-tag-border-radius};
  

SASS variables

$form-multi-select-padding-y:               $input-padding-y;
$form-multi-select-padding-x:               $input-padding-x;
$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-disabled-color:          $gray-600;
$form-multi-select-bg:                      $input-bg;

$form-multi-select-bg-position:             right $form-multi-select-padding-x center;
$form-multi-select-bg-size:                 16px 12px; // In pixels because image dimensions
$form-multi-select-disabled-bg:             $gray-200;
$form-multi-select-indicator-padding:       $form-multi-select-padding-x * 3; // Extra padding to account for the presence of the background-image based indicator
$form-multi-select-indicator-color:         $gray-800;
$form-multi-select-indicator:               url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-multi-select-indicator-color}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/></svg>");

$form-multi-select-border-width:            $input-border-width;
$form-multi-select-border-color:            $input-border-color;
$form-multi-select-border-radius:           $border-radius;
$form-multi-select-box-shadow:              inset 0 1px 2px rgba($black, .075);

$form-multi-select-focus-width:             $input-focus-width;
$form-multi-select-focus-color:             $input-color;
$form-multi-select-focus-bg:                $input-bg;
$form-multi-select-focus-border-color:      shift-color($component-active-bg, -25);
$form-multi-select-focus-box-shadow:        0 0 0 $form-multi-select-focus-width $input-btn-focus-color;

$form-multi-select-selection-tags-padding-y:  .125rem;
$form-multi-select-selection-tags-padding-x:  .125rem;

$form-multi-select-tag-bg:             $light;
$form-multi-select-tag-border-width:   $border-width;
$form-multi-select-tag-border-color:   $border-color;
$form-multi-select-tag-border-radius:  $border-radius;
$form-multi-select-tag-margin-y:       .125rem;
$form-multi-select-tag-margin-x:       .125rem;
$form-multi-select-tag-padding-y:      subtract(($form-multi-select-padding-y - $form-multi-select-selection-tags-padding-y - $form-multi-select-tag-margin-y), $form-multi-select-tag-border-width);
$form-multi-select-tag-padding-x:      .5rem;

$form-multi-select-search-color:          $input-color;
$form-multi-select-search-bg:             $input-bg;
$form-multi-select-search-border-radius:  $border-radius;

$form-multi-select-cleaner-width:         .75rem;
$form-multi-select-cleaner-height:        .75rem;
$form-multi-select-cleaner-padding-x:     .75rem;
$form-multi-select-cleaner-padding-y:     .5rem;
$form-multi-select-cleaner-color:         $medium-emphasis;
$form-multi-select-cleaner-bg:            url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$form-multi-select-cleaner-color}'><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-hover-color:   $high-emphasis;
$form-multi-select-cleaner-hover-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$form-multi-select-cleaner-hover-color}'><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-focus-color:   $high-emphasis;
$form-multi-select-cleaner-focus-bg:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$form-multi-select-cleaner-focus-color}'><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-border-color:  $input-border-color;

$form-multi-select-select-all-padding-y:     .5rem;
$form-multi-select-select-all-padding-x:     .75rem;
$form-multi-select-select-all-color:         $medium-emphasis;
$form-multi-select-select-all-bg:            transparent;
$form-multi-select-select-all-hover-color:   $high-emphasis;
$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-margin-top:     .625rem;
$form-multi-select-options-font-size:      $font-size-base;
$form-multi-select-options-color:          $body-color;
$form-multi-select-options-bg:             $white;
$form-multi-select-options-border-color:   $border-color;
$form-multi-select-options-border-width:   $border-width;
$form-multi-select-options-border-radius:  $border-radius;

$form-multi-select-optgroup-label-font-weight:  $font-weight-bold;
$form-multi-select-optgroup-label-color:        $disabled;

$form-multi-select-option-padding-y:        .5rem;
$form-multi-select-option-padding-x:        1.25rem;
$form-multi-select-option-border-radius:    $border-radius;

$form-multi-select-option-hover-color:     shift-color($gray-900, 5);
$form-multi-select-option-hover-bg:        rgba($gray-100, .5);

$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:                      $light;
$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:  $gray-600;

$form-multi-select-padding-y-lg:                 $input-padding-y-lg;
$form-multi-select-padding-x-lg:                 $input-padding-x-lg;
$form-multi-select-font-size-lg:                 $input-font-size-lg;
$form-multi-select-selection-tags-padding-y-lg:  .125rem;
$form-multi-select-selection-tags-padding-x-lg:  .125rem;
$form-multi-select-tag-margin-y-lg:              .125rem;
$form-multi-select-tag-margin-x-lg:              .125rem;
$form-multi-select-tag-padding-y-lg:             subtract(($form-multi-select-padding-y-lg - $form-multi-select-selection-tags-padding-y-lg - $form-multi-select-tag-margin-y-lg), $form-multi-select-tag-border-width);
$form-multi-select-tag-padding-x-lg:             .5rem;

$form-multi-select-padding-y-sm:                 $input-padding-y-sm;
$form-multi-select-padding-x-sm:                 $input-padding-x-sm;
$form-multi-select-font-size-sm:                 $input-font-size-sm;
$form-multi-select-selection-tags-padding-y-sm:  .0675rem;
$form-multi-select-selection-tags-padding-x-sm:  .0675rem;
$form-multi-select-tag-margin-y-sm:              .0675rem;
$form-multi-select-tag-margin-x-sm:              .0675rem;
$form-multi-select-tag-padding-y-sm:             subtract(($form-multi-select-padding-y-sm - $form-multi-select-selection-tags-padding-y-sm - $form-multi-select-tag-margin-y-sm), $form-multi-select-tag-border-width);
$form-multi-select-tag-padding-x-sm:             .5rem;