Checkbox in Vue Multi select component

11 Jun 202418 minutes to read

The MultiSelect has built-in support to select multiple values through checkbox, when mode property set as CheckBox.

To use checkbox, inject the CheckBoxSelection module in the MultiSelect.

<template>
  <div id="app">
    <div id='container' style="margin:15px auto 0; width:250px;">
      <br>
      <ejs-multiselect id='multiselect' :dataSource='sportsData' placeholder="Find a game" mode="CheckBox"
        :fields='fields'></ejs-multiselect>
    </div>
  </div>
</template>
<script setup>
import { provide } from "vue";
import { MultiSelectComponent as EjsMultiselect, CheckBoxSelection } from "@syncfusion/ej2-vue-dropdowns";

const sportsData = [
  { Id: 'game1', Game: 'Badminton' },
  { Id: 'game2', Game: 'Football' },
  { Id: 'game3', Game: 'Tennis' },
  { Id: 'game4', Game: 'Golf' },
  { Id: 'game5', Game: 'Cricket' },
  { Id: 'game6', Game: 'Handball' },
  { Id: 'game7', Game: 'Karate' },
  { Id: 'game8', Game: 'Fencing' },
  { Id: 'game9', Game: 'Boxing' }
];
const fields = { text: 'Game', value: 'Id' };

provide('multiselect', [CheckBoxSelection]);
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
</style>
<template>
  <div id="app">
    <div id='container' style="margin:15px auto 0; width:250px;">
      <br>
      <ejs-multiselect id='multiselect' :dataSource='sportsData' placeholder="Find a game" mode="CheckBox"
        :fields='fields'></ejs-multiselect>
    </div>
  </div>
</template>
<script>
import { MultiSelectComponent, CheckBoxSelection } from "@syncfusion/ej2-vue-dropdowns";

export default {
  name: "App",
  components: {
    "ejs-multiselect": MultiSelectComponent
  },
  data() {
    return {
      sportsData: [
        { Id: 'game1', Game: 'Badminton' },
        { Id: 'game2', Game: 'Football' },
        { Id: 'game3', Game: 'Tennis' },
        { Id: 'game4', Game: 'Golf' },
        { Id: 'game5', Game: 'Cricket' },
        { Id: 'game6', Game: 'Handball' },
        { Id: 'game7', Game: 'Karate' },
        { Id: 'game8', Game: 'Fencing' },
        { Id: 'game9', Game: 'Boxing' }
      ],
      fields: { text: 'Game', value: 'Id' }
    }
  },
  provide: {
    multiselect: [CheckBoxSelection]
  }
}

</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
</style>

Select All

The MultiSelect component has in-built support to select the all list items using Select All options in the header.

When the showSelectAll property is set to true, by default Select All text will show. You can customize the name attribute of the Select All option by using selectAllText.

For the unSelect All option, by default unSelect All text will show. You can customize the name attribute of the unSelect All option by using
unSelectAllText.

<template>
  <div id="app">
    <div id='container' style="margin:15px auto 0; width:250px;">
      <br>
      <ejs-multiselect id='multiselect' :dataSource='sportsData' placeholder="Select a game" mode="CheckBox"
        :fields='fields' :showSelectAll='showSelectAll' selectAllText="Select All"
        unSelectAllText="unSelect All"></ejs-multiselect>
    </div>
  </div>
</template>
<script setup>
import { provide } from "vue";
import { MultiSelectComponent as EjsMultiselect, CheckBoxSelection } from "@syncfusion/ej2-vue-dropdowns";

const sportsData = [
  { Id: 'game1', Game: 'Badminton' },
  { Id: 'game2', Game: 'Football' },
  { Id: 'game3', Game: 'Tennis' },
  { Id: 'game4', Game: 'Golf' },
  { Id: 'game5', Game: 'Cricket' },
  { Id: 'game6', Game: 'Handball' },
  { Id: 'game7', Game: 'Karate' },
  { Id: 'game8', Game: 'Fencing' },
  { Id: 'game9', Game: 'Boxing' }
];
const fields = { text: 'Game', value: 'Id' };
let showSelectAll = true;

provide('multiselect', [CheckBoxSelection]);
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
</style>
<template>
  <div id="app">
    <div id='container' style="margin:15px auto 0; width:250px;">
      <br>
      <ejs-multiselect id='multiselect' :dataSource='sportsData' placeholder="Select a game" mode="CheckBox"
        :fields='fields' :showSelectAll='showSelectAll' selectAllText="Select All"
        unSelectAllText="unSelect All"></ejs-multiselect>
    </div>
  </div>
</template>
<script>
import { MultiSelectComponent, CheckBoxSelection } from "@syncfusion/ej2-vue-dropdowns";

export default {
  name: "App",
  components: {
    "ejs-multiselect": MultiSelectComponent
  },
  data() {
    return {
      sportsData: [
        { Id: 'game1', Game: 'Badminton' },
        { Id: 'game2', Game: 'Football' },
        { Id: 'game3', Game: 'Tennis' },
        { Id: 'game4', Game: 'Golf' },
        { Id: 'game5', Game: 'Cricket' },
        { Id: 'game6', Game: 'Handball' },
        { Id: 'game7', Game: 'Karate' },
        { Id: 'game8', Game: 'Fencing' },
        { Id: 'game9', Game: 'Boxing' }
      ],
      fields: { text: 'Game', value: 'Id' },
      showSelectAll: true
    }
  },
  provide: {
    multiselect: [CheckBoxSelection]
  }
}

</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
</style>

Selection Limit

Defines the limit of the selected items using maximumSelectionLength.

<template>
  <div id="app">
    <div id='container' style="margin:15px auto 0; width:250px;">
      <br>
      <ejs-multiselect id='multiselect' :dataSource='sportsData' placeholder="Select a game" mode="CheckBox"
        :fields='fields' :maximumSelectionLength='maximumSelectionLength'></ejs-multiselect>
    </div>
  </div>
</template>
<script setup>
import { provide } from "vue";
import { MultiSelectComponent as EjsMultiselect, CheckBoxSelection } from "@syncfusion/ej2-vue-dropdowns";

const sportsData = [
  { Id: 'game1', Game: 'Badminton' },
  { Id: 'game2', Game: 'Football' },
  { Id: 'game3', Game: 'Tennis' },
  { Id: 'game4', Game: 'Golf' },
  { Id: 'game5', Game: 'Cricket' },
  { Id: 'game6', Game: 'Handball' },
  { Id: 'game7', Game: 'Karate' },
  { Id: 'game8', Game: 'Fencing' },
  { Id: 'game9', Game: 'Boxing' }
];
const fields = { text: 'Game', value: 'Id' };
let maximumSelectionLength = 3;

provide('multiselect', [CheckBoxSelection]);
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
</style>
<template>
  <div id="app">
    <div id='container' style="margin:15px auto 0; width:250px;">
      <br>
      <ejs-multiselect id='multiselect' :dataSource='sportsData' placeholder="Select a game" mode="CheckBox"
        :fields='fields' :maximumSelectionLength='maximumSelectionLength'></ejs-multiselect>
    </div>
  </div>
</template>
<script>
import { MultiSelectComponent, CheckBoxSelection } from "@syncfusion/ej2-vue-dropdowns";

export default {
  name: "App",
  components: {
    "ejs-multiselect": MultiSelectComponent
  },
  data() {
    return {
      sportsData: [
        { Id: 'game1', Game: 'Badminton' },
        { Id: 'game2', Game: 'Football' },
        { Id: 'game3', Game: 'Tennis' },
        { Id: 'game4', Game: 'Golf' },
        { Id: 'game5', Game: 'Cricket' },
        { Id: 'game6', Game: 'Handball' },
        { Id: 'game7', Game: 'Karate' },
        { Id: 'game8', Game: 'Fencing' },
        { Id: 'game9', Game: 'Boxing' }
      ],
      fields: { text: 'Game', value: 'Id' },
      maximumSelectionLength: 3
    }
  },
  provide: {
    multiselect: [CheckBoxSelection]
  }
}

</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
</style>

Selection Reordering

Using enableSelectionOrder to Reorder the selected items in popup visibility state.

<template>
  <div id="app">
    <div id='container' style="margin:15px auto 0; width:250px;">
      <br>
      <ejs-multiselect id='multiselect' :dataSource='sportsData' placeholder="Select a game" mode="CheckBox"
        :fields='fields' :enableSelectionOrder='enableSelectionOrder'></ejs-multiselect>
    </div>
  </div>
</template>
<script setup>
import { provide } from "vue";
import { MultiSelectComponent as EjsMultiselect, CheckBoxSelection } from "@syncfusion/ej2-vue-dropdowns";

const sportsData = [
  { Id: 'game1', Game: 'Badminton' },
  { Id: 'game2', Game: 'Football' },
  { Id: 'game3', Game: 'Tennis' },
  { Id: 'game4', Game: 'Golf' },
  { Id: 'game5', Game: 'Cricket' },
  { Id: 'game6', Game: 'Handball' },
  { Id: 'game7', Game: 'Karate' },
  { Id: 'game8', Game: 'Fencing' },
  { Id: 'game9', Game: 'Boxing' }
];
const fields = { text: 'Game', value: 'Id' };
let enableSelectionOrder = false;

provide('multiselect', [CheckBoxSelection]);
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
</style>
<template>
  <div id="app">
    <div id='container' style="margin:15px auto 0; width:250px;">
      <br>
      <ejs-multiselect id='multiselect' :dataSource='sportsData' placeholder="Select a game" mode="CheckBox"
        :fields='fields' :enableSelectionOrder='enableSelectionOrder'></ejs-multiselect>
    </div>
  </div>
</template>
<script>
import { MultiSelectComponent, CheckBoxSelection } from "@syncfusion/ej2-vue-dropdowns";

export default {
  name: "App",
  components: {
    "ejs-multiselect": MultiSelectComponent
  },
  data() {
    return {
      sportsData: [
        { Id: 'game1', Game: 'Badminton' },
        { Id: 'game2', Game: 'Football' },
        { Id: 'game3', Game: 'Tennis' },
        { Id: 'game4', Game: 'Golf' },
        { Id: 'game5', Game: 'Cricket' },
        { Id: 'game6', Game: 'Handball' },
        { Id: 'game7', Game: 'Karate' },
        { Id: 'game8', Game: 'Fencing' },
        { Id: 'game9', Game: 'Boxing' }
      ],
      fields: { text: 'Game', value: 'Id' },
      enableSelectionOrder: false
    }
  },
  provide: {
    multiselect: [CheckBoxSelection]
  }
}

</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
</style>

See Also