Vue 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.

Other frameworks

CoreUI components are available as native Angular, Bootstrap (Vanilla JS), and React components. To learn more please visit the following pages.

Examples

Framework

Please select your framework.

<template>
  <CMultiSelect label="Framework" :options="options" text="Please select your framework." />
</template>
<script>
export default {
  data: () => {
    return {
      options: [
        {
          value: 0,
          text: 'Angular',
        },
        {
          value: 1,
          text: 'Bootstrap',
        },
        {
          value: 2,
          text: 'React.js',
        },
        {
          value: 3,
          text: 'Vue.js',
        },
        {
          label: 'backend',
          options: [
            {
              value: 4,
              text: 'Django',
            },
            {
              value: 5,
              text: 'Laravel',
            },
            {
              value: 6,
              text: 'Node.js',
            },
          ],
        },
      ],
    }
  },
}
</script>

<template>
  <CMultiSelect :options="options2" />
</template>
<script>
export default {
  data: () => {
    return {
      options2: [
        {
          value: 0,
          text: 'Angular',
          selected: true,
        },
        {
          value: 1,
          text: 'Bootstrap',
          selected: true,
          disabled: true,
        },
        {
          value: 2,
          text: 'React.js',
        },
        {
          value: 3,
          text: 'Vue.js',
        },
        {
          label: 'backend',
          options: [
            {
              value: 4,
              text: 'Django',
            },
            {
              value: 5,
              text: 'Laravel',
              selected: true,
            },
            {
              value: 6,
              text: 'Node.js',
            },
          ],
        },
      ],
    }
  },
}
</script>

Selection types

Counter

<template>
  <CMultiSelect :options="options" selectionType="counter" />
</template>
<script>
export default {
  data: () => {
    return {
      options: [
        {
          value: 0,
          text: 'Angular',
          selected: true,
        },
        {
          value: 1,
          text: 'Bootstrap',
          selected: true,
          disabled: true,
        },
        {
          value: 2,
          text: 'React.js',
        },
        {
          value: 3,
          text: 'Vue.js',
        },
        {
          label: 'backend',
          options: [
            {
              value: 4,
              text: 'Django',
            },
            {
              value: 5,
              text: 'Laravel',
              selected: true,
            },
            {
              value: 6,
              text: 'Node.js',
            },
          ],
        },
      ],
    }
  },
}
</script>

Text

<template>
  <CMultiSelect :options="options" selectionType="text" />
</template>
<script>
export default {
  data: () => {
    return {
      options: [
        {
          value: 0,
          text: 'Angular',
          selected: true,
        },
        {
          value: 1,
          text: 'Bootstrap',
          selected: true,
          disabled: true,
        },
        {
          value: 2,
          text: 'React.js',
        },
        {
          value: 3,
          text: 'Vue.js',
        },
        {
          label: 'backend',
          options: [
            {
              value: 4,
              text: 'Django',
            },
            {
              value: 5,
              text: 'Laravel',
              selected: true,
            },
            {
              value: 6,
              text: 'Node.js',
            },
          ],
        },
      ],
    }
  },
}
</script>

Single Selection

Set the multiple boolean property to false and allow select only one element.

<template>
  <CMultiSelect :multiple="false" :options="options" />
</template>
<script>
export default {
  data: () => {
    return {
      options: [
        {
          value: 0,
          text: 'Angular',
        },
        {
          value: 1,
          text: 'Bootstrap',
        },
        {
          value: 2,
          text: 'React.js',
        },
        {
          value: 3,
          text: 'Vue.js',
        },
        {
          label: 'backend',
          options: [
            {
              value: 4,
              text: 'Django',
            },
            {
              value: 5,
              text: 'Laravel',
            },
            {
              value: 6,
              text: 'Node.js',
            },
          ],
        },
      ],
    }
  },
}
</script>

Disabled

Add the disabled boolean property to give it a grayed out appearance, remove pointer events, and prevent focusing.

<template>
  <CMultiSelect :options="options" disabled />
</template>
<script>
export default {
  data: () => {
    return {
      options: [
        {
          value: 0,
          text: 'Angular',
          selected: true,
        },
        {
          value: 1,
          text: 'Bootstrap',
          selected: true,
          disabled: true,
        },
        {
          value: 2,
          text: 'React.js',
        },
        {
          value: 3,
          text: 'Vue.js',
        },
        {
          label: 'backend',
          options: [
            {
              value: 4,
              text: 'Django',
            },
            {
              value: 5,
              text: 'Laravel',
              selected: true,
            },
            {
              value: 6,
              text: 'Node.js',
            },
          ],
        },
      ],
    }
  },
}
</script>

Sizing

You may also choose from small and large multi selects to match our similarly sized text inputs.

<template>
  <CRow>
    <CCol :md="6" class="mb-3">
      <CMultiSelect :options="options" selectionType="counter" size="lg" />
    </CCol>
    <CCol :md="6" class="mb-3">
      <CMultiSelect :options="options" size="lg" />
    </CCol>
    <CCol :md="6">
      <CMultiSelect :options="options" selectionType="counter" size="sm" />
    </CCol>
    <CCol :md="6">
      <CMultiSelect :options="options" size="sm" />
    </CCol>
  </CRow>
</template>
<script>
export default {
  data: () => {
    return {
      options: [
        {
          value: 0,
          text: 'Angular',
          selected: true,
        },
        {
          value: 1,
          text: 'Bootstrap',
          selected: true,
          disabled: true,
        },
        {
          value: 2,
          text: 'React.js',
        },
        {
          value: 3,
          text: 'Vue.js',
        },
        {
          label: 'backend',
          options: [
            {
              value: 4,
              text: 'Django',
            },
            {
              value: 5,
              text: 'Laravel',
              selected: true,
            },
            {
              value: 6,
              text: 'Node.js',
            },
          ],
        },
      ],
    }
  },
}
</script>

External Data

Users

Please select your user.

<template>
  <CMultiSelect
    label="Users"
    :options="users"
    options-max-height="390px"
    text="Please select your user."
    @filter-change="(value) => getUsers(value)"
  />
</template>

Customizing

CSS variables

Vue multi selects use local CSS variables on .form-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};

How to use CSS variables

const vars = {
  '--my-css-var': 10,
  '--my-another-css-var': "red"
}
return <CMultiSelect :style="vars">...</CMultiSelect>

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;

API

CMultiSelect

import { CMultiSelect } from '@coreui/vue-pro'
// or
import CMultiSelect from '@coreui/vue-pro/src/components/multi-select/CMultiSelect'

Props

Prop name	Description	Type	Values	Default
cleaner	Enables selection cleaner element. `@default` true	boolean	-	true
disabled	Toggle the disabled state for the component.	boolean	-	false
feedback 4.6.0+	Provide valuable, actionable feedback.	string	-
feedback-invalid 4.6.0+	Provide valuable, actionable feedback.	string	-
feedback-valid 4.6.0+	Provide valuable, actionable invalid feedback when using standard HTML form validation which applied two CSS pseudo-classes, `:invalid` and `:valid`.	string	-
id	The id global attribute defines an identifier (ID) that must be unique in the whole document.	string	-
invalid 4.6.0+	Set component validation state to invalid.	boolean	-
label 4.6.0+	Add a caption for a component.	string	-
multiple	It specifies that multiple options can be selected at once. `@default` true	boolean	-	true
options	List of option elements.	Option[]	-	() => []
options-max-height	Sets maxHeight of options list. `@default` 'auto'	number\|string	-	'auto'
options-style	Sets option style. `@default` 'checkbox'	string	`'checkbox'`, `'text'`	'checkbox'
placeholder	Specifies a short hint that is visible in the search input. `@default` 'Select...''	string	-	'Select...'
search	Enables search input element.	boolean\|string	-	true
search-no-results-label	Sets the label for no results when filtering.	string	-	'no items'
select-all	Enables select all button. `@default` true	boolean	-	true
select-all-label	Sets the select all button label. `@default` 'Select all options'	string	-	'Select all options'
selection-type	Sets the selection style. `@default` 'tags'	string	`'counter'`, `'tags'`, `'text'`	'tags'
selection-type-counter-text	Sets the counter selection label. `@default` 'item(s) selected'	string	-	'item(s) selected'
size	Size the component small or large.	string	`'sm'`, `'lg'`
text 4.6.0+	Add helper text to the component.	string	-
tooltip-feedback 4.6.0+	Display validation feedback in a styled tooltip.	boolean	-
valid 4.6.0+	Set component validation state to valid.	boolean	-
visible	Toggle the visibility of multi select dropdown. `@default` false	boolean	-	false

Events

Event name	Description	Properties
change	Execute a function when a user changes the selected option. [docs]
filter-change	Execute a function when the filter value changed.

CoreUI PRO Component

Vue Multi Select

Other frameworks

Examples

Selection types

Counter

Tags

Text

Single Selection

Disabled

Sizing

External Data

Customizing

CSS variables

How to use CSS variables

SASS variables

API

CMultiSelect

Props

Events

CoreUI PRO Component

Vue Multi Select

Other frameworks

Examples #

Selection types #

Counter #

Tags #

Text #

Single Selection #

Disabled #

Sizing #

External Data #

Customizing #

CSS variables #

How to use CSS variables #

SASS variables #

API #

CMultiSelect #

Props #

Events #

Examples

Selection types

Counter

Tags

Text

Single Selection

Disabled

Sizing

External Data

Customizing

CSS variables

How to use CSS variables

SASS variables

API

CMultiSelect

Props

Events