Checkbox in Vue MultiSelect Dropdown

03 Sep 202618 minutes to read

The MultiSelect has built-in support to select multiple values through checkboxes, when the mode property is set to 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 all list items using the Select All option in the header.

When the showSelectAll property is set to true, the Select All text is shown by default. You can customize the display text of the Select All option by using selectAllText.

For the Unselect All option, the Unselect All text is shown by default. You can customize the display text 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

Use enableSelectionOrder to reorder the selected items while the popup is visible.

<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