MultiSelect 🔗

Example 🔗

Use v-model to bind selected values, and options as select options.

<template>
  <multi-select v-model="selected" :options="options"/>
</template>
<script>
  export default {
    data () {
      return {
        selected: [],
        options: [
          {value: 1, label:'Option1'},
          {value: 2, label:'Option2'},
          {value: 3, label:'Option3'},
          {value: 4, label:'Option4'},
          {value: 5, label:'Option5'}
        ]
      }
    }
  }
</script>
<!-- multi-select-example.vue -->

Multiple Limit 🔗

Use limit to restrict the maximum number of options user can select, no limit when set to 0.

<template>
  <multi-select v-model="selected" :options="options" :limit="3"/>
</template>
<script>
  export default {
    data () {
      return {
        selected: [],
        options: [
          {value: 1, label:'Option1'},
          {value: 2, label:'Option2'},
          {value: 3, label:'Option3'},
          {value: 4, label:'Option4'},
          {value: 5, label:'Option5'}
        ]
      }
    }
  }
</script>
<!-- multi-select-limit.vue -->

Optional Sizes 🔗

Optional sizes sm and lg are supported. You can also add block prop to quickly apply width: 100% style to the component.

<template>
  <section>
    <div>
      <multi-select v-model="selected" :options="options" size="sm"/>
    </div>
    <br/>
    <div>
      <multi-select v-model="selected" :options="options"/>
    </div>
    <br/>
    <div>
      <multi-select v-model="selected" :options="options" size="lg"/>
    </div>
    <br/>
    <div>
      <multi-select v-model="selected" :options="options" size="lg" block/>
    </div>
  </section>
</template>
<script>
  export default {
    data () {
      return {
        selected: [],
        options: [
          {value: 1, label:'Option1'},
          {value: 2, label:'Option2'},
          {value: 3, label:'Option3'},
          {value: 4, label:'Option4'},
          {value: 5, label:'Option5'}
        ]
      }
    }
  }
</script>
<!-- multi-select-sizes.vue -->

Disabled options 🔗

Add disabled: true to an option to disable it.

<template>
  <multi-select v-model="selected" :options="options"/>
</template>
<script>
  export default {
    data () {
      return {
        selected: [],
        options: [
          {value: 1, label:'Option1'},
          {value: 2, label:'Option2'},
          {value: 3, label:'Option3', disabled: true},
          {value: 4, label:'Option4'},
          {value: 5, label:'Option5', disabled: true}
        ]
      }
    }
  }
</script>
<!-- multi-select-disabled-options.vue -->

Disabled select 🔗

<template>
  <multi-select v-model="selected" :options="options" disabled/>
</template>
<script>
  export default {
    data () {
      return {
        selected: [],
        options: [
          {value: 1, label:'Option1'},
          {value: 2, label:'Option2'},
          {value: 3, label:'Option3'},
          {value: 4, label:'Option4'},
          {value: 5, label:'Option5'}
        ]
      }
    }
  }
</script>
<!-- multi-select-disabled-select.vue -->

Collapse selected 🔗

Collapse multiple selected items into a text by using collapse-selected prop.

<template>
  <multi-select v-model="selected" :options="options" collapse-selected/>
</template>
<script>
  export default {
    data () {
      return {
        selected: [],
        options: [
          {value: 1, label:'Option1'},
          {value: 2, label:'Option2'},
          {value: 3, label:'Option3'},
          {value: 4, label:'Option4'},
          {value: 5, label:'Option5'}
        ]
      }
    }
  }
</script>
<!-- multi-select-collapse-selected.vue -->

Option groups 🔗

If you need grouped options, simply add group (String) as the name to them.

<template>
  <multi-select v-model="selected" :options="options"/>
</template>
<script>
  export default {
    data () {
      return {
        selected: [],
        options: [
          {value: 1, label:'Apple', group: 'Fruit'},
          {value: 2, label:'Banana', group: 'Fruit'},
          {value: 3, label:'Orange', group: 'Fruit'},
          {value: 4, label:'Red', group: 'Color'},
          {value: 5, label:'Green', group: 'Color'}
        ]
      }
    }
  }
</script>
<!-- multi-select-option-groups.vue -->

Filterable 🔗

Add filterable to append filter input before options.

By default, options are filtered by item value and label (case ignored), use a custom filter-function to override it if needed.

<template>
  <multi-select v-model="selected" :options="options" filterable/>
</template>
<script>
  export default {
    data () {
      return {
        selected: [],
        options: [
          {value: 1, label:'Option1'},
          {value: 2, label:'Option2'},
          {value: 3, label:'Option3'},
          {value: 4, label:'Option4'},
          {value: 5, label:'Option5'}
        ]
      }
    }
  }
</script>
<!-- multi-select-filterable.vue -->

API Reference 🔗

MultiSelect 🔗

Props 🔗

Events 🔗

Slots 🔗