If you like this project and want to help us, please give us a star ⭐️ on Github. ➡️ Star 🙏
View 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" selected>Angular</option>
  <option value="1" selected 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" selected>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">
  var myMultiSelect = document.getElementById('multiSelect')
  var 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>

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

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-coreui-, as in data-coreui-inline="".

Name Type Default Description
cleaner boolean true
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.
var myMutliSelect = document.getElementById('myMutliSelect')
myMutliSelect.addEventListener('changed.coreui.multi-select', function (event) {
  // Get the list of selected options.
  var selected = event.value
})

Customizing

SASS

$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:       1rem; // 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:     .5rem;
$form-multi-select-cleaner-padding-y:     $form-multi-select-cleaner-padding-x;
$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-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:  $border-radius;

$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;

CSS Vars

--cui-form-multi-select-bg
--cui-form-multi-select-border-color
--cui-form-multi-select-cleaner-bg
--cui-form-multi-select-cleaner-border-color
--cui-form-multi-select-cleaner-focus-bg
--cui-form-multi-select-cleaner-hover-bg
--cui-form-multi-select-color
--cui-form-multi-select-disabled-bg
--cui-form-multi-select-disabled-color
--cui-form-multi-select-focus-bg
--cui-form-multi-select-focus-border-color
--cui-form-multi-select-focus-color
--cui-form-multi-select-option-disabled-color
--cui-form-multi-select-option-hover-bg
--cui-form-multi-select-option-hover-color
--cui-form-multi-select-option-indicator-bg
--cui-form-multi-select-option-indicator-border
--cui-form-multi-select-option-selected-bg
--cui-form-multi-select-option-selected-indicator-bg
--cui-form-multi-select-option-selected-indicator-bg-image
--cui-form-multi-select-option-selected-indicator-border-color
--cui-form-multi-select-options-bg
--cui-form-multi-select-options-border-color
--cui-form-multi-select-options-color
--cui-form-multi-select-search-bg
--cui-form-multi-select-search-color
--cui-form-multi-select-select-all-bg
--cui-form-multi-select-select-all-border-color
--cui-form-multi-select-select-all-color
--cui-form-multi-select-select-all-hover-bg
--cui-form-multi-select-select-all-hover-color
--cui-form-multi-select-tag-bg
--cui-form-multi-select-tag-border-color