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 #

Angular

Bootstrap

React.js

Vue.js

backend

Django

Laravel

Node.js

<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>

AngularBootstrapLaravel

Angular

Bootstrap

React.js

Vue.js

backend

Django

Laravel

Node.js

<template>
  <CMultiSelect :options="options2" />
</template>
<script>
export default {
  data: () => {
    return {
      options2: [
        {
          value: 0,
          text: 'Angular',
          selected: true
        },
        {
          value: 1,
          text: 'Bootstrap',
          selected: true,
          disabled: true,
        },
        {
          value: 2,
          text: 'React.js',
        },
        {
          value: 3,
          text: 'Vue.js',
        },
        {
          label: 'backend',
          options: [
            {
              value: 4,
              text: 'Django',
            },
            {
              value: 5,
              text: 'Laravel',
              selected: true,
            },
            {
              value: 6,
              text: 'Node.js',
            },
          ],
        },
      ],
    }
  },
}
</script>

Selection types #

Counter #

Angular

Bootstrap

React.js

Vue.js

backend

Django

Laravel

Node.js

Tags #

AngularBootstrapLaravel

Angular

Bootstrap

React.js

Vue.js

backend

Django

Laravel

Node.js

Text #

Angular, Bootstrap, Laravel

Angular

Bootstrap

React.js

Vue.js

backend

Django

Laravel

Node.js

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]