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.

Available styles

<select class="form-multi-select" data-coreui-search="true" data-coreui-selection-type="tags">
  <option value="0">enhancement</option>
  <option value="1">bug</option>
  <option value="2">duplicate</option>
  <option value="3">invalid</option>
  <optgroup label="group">
    <option value="4">enhancement2</option>
    <option value="5">bug2</option>
  </optgroup>
</select>

Inline

<select class="form-multi-select" data-coreui-inline="true" data-coreui-search="true" data-coreui-selection-type="tags">
  <option value="0">enhancement</option>
  <option value="1">bug</option>
  <option value="2">duplicate</option>
  <option value="3">invalid</option>
  <optgroup label="group">
    <option value="4">enhancement2</option>
    <option value="5">bug2</option>
  </optgroup>
</select>

Selection types

Text

<select class="form-multi-select" id="multiple-select-text" data-coreui-search="true">
  <option value="0">enhancement</option>
  <option value="1">bug</option>
  <option value="2">duplicate</option>
  <option value="3">invalid</option>
  <optgroup label="group">
    <option value="4">enhancement2</option>
    <option value="5">bug2</option>
  </optgroup>
</select>

Tag

<select class="form-multi-select" id="multiple-select-tag" data-coreui-selection-type="tags" data-coreui-search="true">
  <option value="0">enhancement</option>
  <option value="1">bug</option>
  <option value="2">duplicate</option>
  <option value="3">invalid</option>
  <optgroup label="group">
    <option value="4">enhancement2</option>
    <option value="5">bug2</option>
  </optgroup>
</select>

Counter

<select class="form-multi-select" id="multiple-select-counter" data-coreui-selection-type="counter" data-coreui-search="true">
  <option value="0">enhancement</option>
  <option value="1">bug</option>
  <option value="2">duplicate</option>
  <option value="3">invalid</option>
  <optgroup label="group">
    <option value="4">enhancement2</option>
    <option value="5">bug2</option>
  </optgroup>
</select>

Single Select

<select class="form-multi-select" id="single-select" data-coreui-multiple="false" data-coreui-search="true">
  <option value="0">enhancement</option>
  <option value="1">bug</option>
  <option value="2">duplicate</option>
  <option value="3">invalid</option>
  <optgroup label="group">
    <option value="4">enhancement2</option>
    <option value="5">bug2</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">enhancement</option>
      <option value="1">bug</option>
      <option value="2">duplicate</option>
      <option value="3">invalid</option>
      <optgroup label="group">
        <option value="4">enhancement2</option>
        <option value="5">bug2</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">enhancement</option>
      <option value="1">bug</option>
      <option value="2">duplicate</option>
      <option value="3">invalid</option>
      <optgroup label="group">
        <option value="4">enhancement2</option>
        <option value="5">bug2</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">enhancement</option>
      <option value="1">bug</option>
      <option value="2">duplicate</option>
      <option value="3">invalid</option>
      <optgroup label="group">
        <option value="4">enhancement2</option>
        <option value="5">bug2</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">enhancement</option>
      <option value="1">bug</option>
      <option value="2">duplicate</option>
      <option value="3">invalid</option>
      <optgroup label="group">
        <option value="4">enhancement2</option>
        <option value="5">bug2</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
inline boolean false
multiple boolean true
options (boolean|array) false
optionsEmptyPlaceholder string 'no items'
search boolean false
searchPlaceholder string 'Select...'
selection boolean true
selectionType string 'counter'
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
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('show.coreui.multi-select', function () {
  // do something...
})

Customizing

SASS

// $form-multi-select-height:                  $input-height;
$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-border-width:   $input-btn-border-width;
$form-multi-select-search-color:          $input-color;
$form-multi-select-search-bg:             $input-bg;
$form-multi-select-search-border-color:   $input-border-color;
$form-multi-select-search-border-radius:  $border-radius;

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

$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-close-color
--cui-close-text-shadow
--cui-form-multi-select-bg
--cui-form-multi-select-border-color
--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-indicator-checked-bg
--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-border-color
--cui-form-multi-select-search-color
--cui-form-multi-select-tag-bg
--cui-form-multi-select-tag-border-color