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.

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.

<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 nameDescriptionTypeValuesDefault
allow-create-options
4.9.0+
Allow users to create options if they are not in the list of options.boolean--
cleanerEnables selection cleaner element.
@default true
boolean-true
clear-search-on-select
4.9.0+
Clear current search on selecting an item.boolean--
disabledToggle 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--
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--
loading
4.9.0+
When set, the options list will have a loading style: loading spinner and reduced opacity.boolean--
multipleIt specifies that multiple options can be selected at once.
@default true
boolean-true
optionsList of option elements.(Option | OptionsGroup)[]-() => []
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...'
requiredWhen it is present, it indicates that the user must choose a value before submitting the form.boolean--
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--
virtual-scroller
4.8.0+
Enable virtual scroller for the options list.boolean--
visibleToggle 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 nameDescriptionProperties
changeExecute a function when a user changes the selected option. [docs]
filter-changeExecute a function when the filter value changed.
hideThe callback is fired when the Multi Select component requests to be hidden.
showThe callback is fired when the Multi Select component requests to be shown.