CoreUI for Vue.js logo
Angular JavaScript / Vanilla JS React.js
  • undefinedGetting started
  • undefinedCustomize
  • undefinedLayout
  • undefinedForms
  • undefinedComponents
  • undefinedTemplates
  • undefinedMigration
  • undefined
  • undefined
  • undefined
undefinedDownloadundefinedHire Us Get CoreUI PRO

CoreUI PRO Component

To use this component you must have a CoreUI PRO license. Buy the CoreUI PRO and get access to all PRO components, features, templates, and dedicated support.

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.

  • Angular Multi Select
  • Bootstrap Multi Select
  • React Multi Select

Examples #

Angular
Bootstrap
React.js
Vue.js
backend
Django
Laravel
Node.js
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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
Angular
Bootstrap
React.js
Vue.js
backend
Django
Laravel
Node.js
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

Selection types #

Counter #

Angular
Bootstrap
React.js
Vue.js
backend
Django
Laravel
Node.js
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

Tags #

Angular
Bootstrap
React.js
Vue.js
backend
Django
Laravel
Node.js
<template>
  <CMultiSelect :options="options" selectionType="tags" />
</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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

Text #

Angular
Bootstrap
React.js
Vue.js
backend
Django
Laravel
Node.js
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

Single Selection #

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

Angular
Bootstrap
React.js
Vue.js
backend
Django
Laravel
Node.js
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

Disabled #

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

Angular
Bootstrap
React.js
Vue.js
backend
Django
Laravel
Node.js
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

Sizing #

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

Angular
Bootstrap
React.js
Vue.js
backend
Django
Laravel
Node.js
Angular
Bootstrap
React.js
Vue.js
backend
Django
Laravel
Node.js
Angular
Bootstrap
React.js
Vue.js
backend
Django
Laravel
Node.js
Angular
Bootstrap
React.js
Vue.js
backend
Django
Laravel
Node.js
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

External Data #

no items
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>
1
2
3
4
5
6
7
8
9

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};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78

How to use CSS variables #

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

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;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116

API #

CMultiSelect #

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

Props #

Prop nameDescriptionTypeValuesDefault
cleanerEnables selection cleaner element.
@default true
boolean-true
disabledToggle 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-
idThe 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-
multipleIt specifies that multiple options can be selected at once.
@default true
boolean-true
optionsList of option elements.Option[]-() => []
options-max-heightSets maxHeight of options list.
@default 'auto'
number|string-'auto'
options-styleSets option style.
@default 'checkbox'
string'checkbox', 'text''checkbox'
placeholderSpecifies a short hint that is visible in the search input.
@default 'Select...''
string-'Select...'
searchEnables search input element.boolean|string-true
search-no-results-labelSets the label for no results when filtering.string-'no items'
select-allEnables select all button.
@default true
boolean-true
select-all-labelSets the select all button label.
@default 'Select all options'
string-'Select all options'
selection-typeSets the selection style.
@default 'tags'
string'counter', 'tags', 'text''tags'
selection-type-counter-textSets the counter selection label.
@default 'item(s) selected'
string-'item(s) selected'
sizeSize 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-
visibleToggle the visibility of multi select dropdown.
@default false
boolean-false

Events #

Event nameDescriptionProperties
changeExecute a function when a user changes the selected option. [docs]
filter-changeExecute a function when the filter value changed.
On this page
  • Examples
  • Selection types
    • Counter
    • Tags
    • Text
  • Single Selection
  • Disabled
  • Sizing
  • External Data
  • Customizing
    • CSS variables
    • SASS variables
  • API
    • CMultiSelect
  • GitHub
  • Twitter
  • CoreUI (Vanilla)
  • CoreUI for Angular
  • CoreUI for React.js

CoreUI for Vue is Open Source UI Components Library for Vue.js.

CoreUI code licensed MIT, docs CC BY 3.0. CoreUI PRO requires a commercial license.