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
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>
Modes
Allow create options
Users can create new options as well as choose from a list of pre-existing options by using the allowCreateOptions property in the Vue Multi Select component.
If this propety is set to true, the user can enter a new option in the multiselect component's search input field, and if it doesn't already exist in the list, it will be created and added there. This can be useful when the list of available options is not comprehensive or when the user needs to select an option that is not already available.
It's worth noting that this feature may not always be appropriate, depending on the specific use case of the multiselect component. In some cases, it may be preferable to restrict the user to selecting only pre-existing options, while in other cases, allowing for the creation of new options may be essential. It's important to consider the specific requirements of your application when deciding whether to enable this feature.
<template>
<CMultiSelect allowCreateOptions :options="options" />
</template>
<script>
export default {
data: () => {
return {
options: [
...
],
}
},
}
</script>
Clear search on select
The clearSearchOnSelect property is a Boolean attribute that can be used with the MultiSelect component in the CoreUI Vue library.
The MultiSelect component's search input field will be cleared as soon as the user chooses an item from the dropdown list if the property clearSearchOnSelect is set to true. This indicates that the user can instantly begin a fresh search after the search query is reset.
By default, the search input field will keep the user's search query even after an option has been picked because the value of the clearSearchOnSelect property is set to false. When a user must choose from a dropdown list several items that all match the same search term, this can be helpful.
You only need to specify the clearSearchOnSelect property to 'true' or 'false' as necessary in your code to use the MultiSelect component of the CoreUI Vue package. For example:
<template>
<CMultiSelect clearSearchOnSelect :options="options" />
</template>
<script>
export default {
data: () => {
return {
options: [
...
],
}
},
}
</script>
In this example, the clearSearchOnSelect property is set to true, which means that the search input field will be cleared as soon as the user selects an option from the dropdown list.
Selection types
Users can present selected items in a variety of ways by using the Vue Multi Select component. Selected things can be shown to users as a counter, tags, or a list of values separated by commas.
Use the selectionType property to set the presentation type to alter how the selected items are displayed.
Counter
The items from the list that are chosen for the example below are counted and shown as a counter. Set the selectionType property to "counter" in order to use this option.
The selectionTypeCounterText property lets you set the text that appears after the counter, allowing for even more customization of the 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
The selectionType property is set to 'tags' by default, which causes the selected options to be shown as tags. The "X" button can be used to delete a selected option.
<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
Set the selectionType property to '"text"' to show the list of selected options as comma-separated text values.
Angular, Bootstrap, Laravel
<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>
Custom options and options group labels
The CoreUI Vue Multi Select component provides the flexibility to personalize options and group labels by utilizing custom templates. You can easily customize the options using the <template #options="{ option }">...</template>, and for groups, you can use <template #options-groups="{ option }">...</template>, as demonstrated in the examples below:
By using custom templates, the CoreUI Vue Multi Select component gives users the freedom to customize the options and group labels. The <template #options="{ option }">...</template> allows for customization of options and <template #options-groups="{ option }">...</template> for groups, as shown in the following examples:
<template>
<CRow>
<CCol :md="6">
<CMultiSelect
label="Select country"
:options="countries"
optionsStyle="text"
>
<template #options="{ option }">
<div class="d-flex">
<CIcon class="me-3" :icon="flags[option.value]" size="xl"/> {{option.text}}
</div>
</template>
</CMultiSelect>
</CCol>
<CCol :md="6">
<CMultiSelect
label="Select city"
:options="cities"
>
<template #options-groups="{ option }">
<div class="d-flex align-items-center">
<CIcon class="me-3" :icon="flags[option.code]" size="xl"/> {{option.label}}
</div>
</template>
</CMultiSelect>
</CCol>
</CRow>
</template>
<script>
import { cifPl, cifDe, cifUs, cifEs, cifGb } from '@coreui/icons'
import CIcon from '@coreui/icons-vue'
export default {
data: () => {
return {
cities: [
{
label: 'United States',
code: 'us',
options: [
{
value: 'au',
text: 'Austin',
},
{
value: 'ch',
text: 'Chicago',
},
{
value: 'la',
text: 'Los Angeles',
},
{
value: 'ny',
text: 'New York',
},
{
value: 'sa',
text: 'San Jose',
},
],
},
{
label: 'United Kingdom',
code: 'gb',
options: [
{
value: 'li',
text: 'Liverpool',
},
{
value: 'lo',
text: 'London',
},
{
value: 'ma',
text: 'Manchester',
},
],
},
],
countries: [
{
value: 'pl',
text: 'Poland',
},
{
value: 'de',
text: 'Germany',
},
{
value: 'us',
text: 'United States',
},
{
value: 'es',
text: 'Spain',
},
{
value: 'gb',
text: 'United Kingdom',
},
],
flags: {
de: cifDe,
es: cifEs,
gb: cifGb,
pl: cifPl,
us: cifUs
},
}
},
}
</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
Please select your user.
<template>
<CMultiSelect
label="Users"
:loading="loading"
:options="users"
text="Please select your user."
virtual-scroller
@show="() => getUsers()"
@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 !default;
$form-multi-select-padding-x: $input-padding-x !default;
$form-multi-select-font-family: $input-font-family !default;
$form-multi-select-font-size: $input-font-size !default;
$form-multi-select-font-weight: $input-font-weight !default;
$form-multi-select-line-height: $input-line-height !default;
$form-multi-select-color: $input-color !default;
$form-multi-select-disabled-color: $gray-600 !default;
$form-multi-select-bg: $input-bg !default;
$form-multi-select-bg-position: right $form-multi-select-padding-x center !default;
$form-multi-select-bg-size: 16px 12px !default; // In pixels because image dimensions
$form-multi-select-disabled-bg: $gray-200 !default;
$form-multi-select-indicator-padding: $form-multi-select-padding-x * 3 !default; // Extra padding to account for the presence of the background-image based indicator
$form-multi-select-indicator-color: $gray-800 !default;
$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>") !default;
$form-multi-select-border-width: $input-border-width !default;
$form-multi-select-border-color: $input-border-color !default;
$form-multi-select-border-radius: $border-radius !default;
$form-multi-select-border-radius-sm: $border-radius-sm !default;
$form-multi-select-border-radius-lg: $border-radius-lg !default;
$form-multi-select-box-shadow: inset 0 1px 2px rgba($black, .075) !default;
$form-multi-select-focus-width: $input-focus-width !default;
$form-multi-select-focus-color: $input-color !default;
$form-multi-select-focus-bg: $input-bg !default;
$form-multi-select-focus-border-color: shift-color($component-active-bg, -25%) !default;
$form-multi-select-focus-box-shadow: 0 0 0 $form-multi-select-focus-width $input-btn-focus-color !default;
$form-multi-select-selection-tags-padding-y: .125rem !default;
$form-multi-select-selection-tags-padding-x: .125rem !default;
$form-multi-select-tag-bg: $light !default;
$form-multi-select-tag-border-width: $border-width !default;
$form-multi-select-tag-border-color: $border-color !default;
$form-multi-select-tag-border-radius: .25rem !default;
$form-multi-select-tag-border-radius-sm: .125rem !default;
$form-multi-select-tag-border-radius-lg: .375rem !default;
$form-multi-select-tag-margin-y: .125rem !default;
$form-multi-select-tag-margin-x: .125rem !default;
$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) !default;
$form-multi-select-tag-padding-x: .5rem !default;
$form-multi-select-search-color: $input-color !default;
$form-multi-select-search-bg: $input-bg !default;
$form-multi-select-search-border-radius: $border-radius !default;
$form-multi-select-cleaner-width: .75rem !default;
$form-multi-select-cleaner-height: .75rem !default;
$form-multi-select-cleaner-padding-x: .75rem !default;
$form-multi-select-cleaner-padding-y: .5rem !default;
$form-multi-select-cleaner-color: $medium-emphasis !default;
$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>") !default;
$form-multi-select-cleaner-hover-color: $high-emphasis !default;
$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>") !default;
$form-multi-select-cleaner-focus-color: $high-emphasis !default;
$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>") !default;
$form-multi-select-cleaner-border-color: $input-border-color !default;
$form-multi-select-select-all-padding-y: .5rem !default;
$form-multi-select-select-all-padding-x: .75rem !default;
$form-multi-select-select-all-color: $medium-emphasis !default;
$form-multi-select-select-all-bg: transparent !default;
$form-multi-select-select-all-hover-color: $high-emphasis !default;
$form-multi-select-select-all-hover-bg: transparent !default;
$form-multi-select-select-all-border-width: $input-border-width !default;
$form-multi-select-select-all-border-color: $input-border-color !default;
$form-multi-select-options-padding-y: .5rem !default;
$form-multi-select-options-padding-x: .75rem !default;
$form-multi-select-options-margin-top: .625rem !default;
$form-multi-select-options-font-size: $font-size-base !default;
$form-multi-select-options-color: $body-color !default;
$form-multi-select-options-bg: $white !default;
$form-multi-select-options-border-color: $border-color !default;
$form-multi-select-options-border-width: $border-width !default;
$form-multi-select-options-border-radius: $border-radius !default;
$form-multi-select-optgroup-label-font-weight: $font-weight-bold !default;
$form-multi-select-optgroup-label-color: $disabled !default;
$form-multi-select-option-padding-y: .5rem !default;
$form-multi-select-option-padding-x: 1.25rem !default;
$form-multi-select-option-border-radius: $border-radius !default;
$form-multi-select-option-hover-color: shift-color($gray-900, +5%) !default;
$form-multi-select-option-hover-bg: rgba($gray-100, .5) !default;
$form-multi-select-option-indicator-width: 1em !default;
$form-multi-select-option-indicator-bg: $form-check-input-bg !default;
$form-multi-select-option-indicator-border: $form-check-input-border !default;
$form-multi-select-option-indicator-border-radius: .25em !default;
$form-multi-select-option-selected-bg: $light !default;
$form-multi-select-option-selected-indicator-bg: $form-check-input-checked-bg-color !default;
$form-multi-select-option-selected-indicator-bg-image: $form-check-input-checked-bg-image !default;
$form-multi-select-option-selected-indicator-border-color: $form-multi-select-option-selected-indicator-bg !default;
$form-multi-select-option-disabled-color: $gray-600 !default;
$form-multi-select-padding-y-lg: $input-padding-y-lg !default;
$form-multi-select-padding-x-lg: $input-padding-x-lg !default;
$form-multi-select-font-size-lg: $input-font-size-lg !default;
$form-multi-select-selection-tags-padding-y-lg: .125rem !default;
$form-multi-select-selection-tags-padding-x-lg: .125rem !default;
$form-multi-select-tag-margin-y-lg: .125rem !default;
$form-multi-select-tag-margin-x-lg: .125rem !default;
$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) !default;
$form-multi-select-tag-padding-x-lg: .5rem !default;
$form-multi-select-padding-y-sm: $input-padding-y-sm !default;
$form-multi-select-padding-x-sm: $input-padding-x-sm !default;
$form-multi-select-font-size-sm: $input-font-size-sm !default;
$form-multi-select-selection-tags-padding-y-sm: .0675rem !default;
$form-multi-select-selection-tags-padding-x-sm: .125rem !default;
$form-multi-select-tag-margin-y-sm: .0675rem !default;
$form-multi-select-tag-margin-x-sm: .0675rem !default;
$form-multi-select-tag-padding-y-sm: 0 !default;
$form-multi-select-tag-padding-x-sm: .5rem !default;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 |
|---|---|---|---|---|
| allow-create-options 4.9.0+ | Allow users to create options if they are not in the list of options. | boolean | - | - |
| cleaner | Enables selection cleaner element.@default true | boolean | - | true |
| clear-search-on-select 4.9.0+ | Clear current search on selecting an item. | boolean | - | - |
| disabled | Toggle the disabled state for the component. | boolean | - | - |
| 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 | - | - |
| loading 4.9.0+ | When set, the options list will have a loading style: loading spinner and reduced opacity. | boolean | - | - |
| multiple | It specifies that multiple options can be selected at once.@default true | boolean | - | true |
| options | List of option elements. | (Option | OptionsGroup)[] | - | () => [] |
| 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...' |
| required | When it is present, it indicates that the user must choose a value before submitting the form. | boolean | - | - |
| 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 | - | - |
| 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. | |
| hide | The callback is fired when the Multi Select component requests to be hidden. | |
| show | The callback is fired when the Multi Select component requests to be shown. |