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
<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>
Tags
<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>
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
<template>
<CMultiSelect
label="Users"
:options="users"
text="Please select your user."
virtual-scroller
@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 | - | - |
virtual-scroller 4.8.0+ | Enable virtual scroller for the options list. | boolean | - | - |
visible | Toggle the visibility of multi select dropdown.@default false | boolean | - | false |
visible-items 4.8.0+ | Amount of visible items when virtualScroller is set to true . | number | - | 10 |
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. |