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.
Examples
<template>
<CMultiSelect :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>
<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
Tags
Text
Angular, Bootstrap, Laravel
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 |
| 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 | - | 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' |
| 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] |