Getting Started with the Vue Checkbox Component in Vue 2

30 Jul 20267 minutes to read

This article provides a step-by-step guide for setting up a Vue 2 project using Vue-CLI and integrating the Syncfusion® Vue CheckBox component.

Prerequisites

Requirement Version
Vue 2.6 or higher
Node.js 16.0.0 or above

Vue supported versions

Vue version Minimum Syncfusion Vue Checkbox version
Vue v2.7 20.3.47 and above

Browser support

Browser Supported versions
Chrome Latest
Firefox Latest
Opera Latest
Edge 13+
Internet Explorer (IE) 11+
Safari 9+
iOS Safari 9+
Android Browser / Chrome for Android 4.4+
Windows Mobile IE 11+

Note: Ensure that your development environment satisfies the required Vue, Node.js, and browser compatibility prerequisites before using Syncfusion® Vue UI components. For more information, see the System Requirements.

Setup the Vue 2 project

Easily set up a Vue 2 application using Vue CLI, which provides a reliable development environment, a streamlined project structure, and optimized builds compared to older setup tools. For detailed steps, refer to the Vue CLI installation instructions.

Note: To create a Vue 2 application using Vue CLI, refer to this documentation for more details.

To create a new Vue 2 application, run the following commands based on your preferred package manager:

npm install -g @vue/cli
vue create quickstart

or

yarn global add @vue/cli
vue create quickstart

During the setup process, the CLI will prompt you for a few configuration options. Select the following:

  • Which linter to use? → Default ([Vue 2] babel, eslint)
  • Install with npm and start now? → Yes

Selecting Yes automatically installs the project dependencies and starts the development server.

After verifying that the application starts successfully, terminate the development server in the terminal and proceed to the next step.

Navigate to the project directory:

cd quickstart

Adding Vue Buttons package

To install the Buttons package, use the following command:

npm install @syncfusion/ej2-vue-buttons

or

yarn add @syncfusion/ej2-vue-buttons

Adding CSS reference

Themes for Syncfusion® Button components can be applied using CSS files provided through npm theme packages. For available themes, refer to the Themes documentation.

Install the Material 3 theme package using the following command:

npm install @syncfusion/ej2-material3-theme --save

Then add the following CSS reference to the src/App.vue file:

<style>
  @import "../node_modules/@syncfusion/ej2-material3-theme/styles/check-box/index.css";
</style>

You can also refer to the combined CSS file for all Syncfusion components in your application. For more information, see the documentation on referring themes through npm packages.

Adding Checkbox component

You can add the Vue Checkbox component to your application by importing it into the src/App.vue file and defining the component with the label property.

The Essential® JS 2 Checkbox supports three visual states: Checked, Unchecked, and Indeterminate. The checked property is used to control the checked and unchecked states, where a tick mark is displayed when the Checkbox is selected.

Additionally, the indeterminate property can be used to display the Checkbox in an indeterminate state, which visually masks the actual value of the Checkbox. This state cannot be set or changed by user interaction and can only be applied programmatically through the component property.

<template>
  <ul>
    <li><ejs-checkbox label='Checked State' checked=true></ejs-checkbox></li>
    <li><ejs-checkbox label='Unchecked State'></ejs-checkbox></li>
    <li><ejs-checkbox label='Indeterminate State' indeterminate=true></ejs-checkbox></li>
  </ul>
</template>

<script setup>
  import { CheckBoxComponent } from "@syncfusion/ej2-vue-buttons";
  import { enableRipple } from '@syncfusion/ej2-base';

  enableRipple(true);
</script>

<style>
  @import "../node_modules/@syncfusion/ej2-material3-theme/styles/check-box/index.css";

  .e-checkbox-wrapper {
    margin-top: 18px;
  }

  li {
    list-style: none;
  }
</style>
<template>
  <ul>
    <li><ejs-checkbox label='Checked State' checked=true></ejs-checkbox></li>
    <li><ejs-checkbox label='Unchecked State'></ejs-checkbox></li>
    <li><ejs-checkbox label='Indeterminate State' indeterminate=true></ejs-checkbox></li>
  </ul>
</template>

<script>
  import { CheckBoxComponent } from "@syncfusion/ej2-vue-buttons";
  import { enableRipple } from '@syncfusion/ej2-base';

  enableRipple(true);

  export default {
    name: "App",
    components: {
      'ejs-checkbox': CheckBoxComponent
    }
  }
</script>

<style>
  @import "../node_modules/@syncfusion/ej2-material3-theme/styles/check-box/index.css";
  
  .e-checkbox-wrapper {
    margin-top: 18px;
  }

  li {
    list-style: none;
  }
</style>

Run the application

To run the application, use the following command:

npm run serve

or

yarn run serve

The output will appear as follows:

You can refer to our Vue Checkbox feature tour page for its groundbreaking feature representations. You can also explore our Vue Checkbox example that shows how to render the Checkbox in Vue.

See also