Vue CheckBox - Getting Started

jQuery
NOTE
Before you start the tutorial, ensure DevExtreme is installed in your application.
Angular
NOTE
Before you start the tutorial, ensure DevExtreme is installed in your application.
Vue
NOTE
Before you start the tutorial, ensure DevExtreme is installed in your application.
React
NOTE
Before you start the tutorial, ensure DevExtreme is installed in your application.

This tutorial shows how to add the CheckBox to your application and configure its core features.

Each section in this tutorial describes a single configuration step. You can also find the full code in the GitHub repository.

View on GitHub

Create a CheckBox

jQuery

Add DevExtreme to your jQuery application and use the following code to create a CheckBox component:

index.js
index.html
$(function() {
    $("#check-box").dxCheckBox({ });
});
<html>
    <head>
        <!-- ... -->
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/24.1.7/css/dx.light.css">
        <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/24.1.7/js/dx.all.js"></script>
        <script type="text/javascript" src="index.js"></script>
    </head>
    <body>
        <div id="check-box"></div>
    </body>
</html>
Angular

Add DevExtreme to your Angular application and use the following code to create a CheckBox component:

app.component.html
app.component.ts
app.module.ts
<dx-check-box></dx-check-box>
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {

}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxCheckBoxModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxCheckBoxModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }
Vue

Add DevExtreme to your Vue application and use the following code to create a CheckBox component:

App.vue
<template>
    <DxCheckBox />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';
import { DxCheckBox } from 'devextreme-vue/check-box';

export default {
    components: {
        DxCheckBox
    }
}
</script>
React

Add DevExtreme to your React application and use the following code to create a CheckBox component:

App.js
import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import { CheckBox } from 'devextreme-react/check-box';

function App() {
    return (
        <CheckBox />
    );
}

export default App;

Specify the Initial Value

The CheckBox can be in one of the following states depending on its value:

  • checked
    the value is true

  • unchecked
    the value is false

  • indeterminate
    the value is undefined or null

You can turn on the enableThreeStateBehavior option to allow users to cycle through all three states.

The following code specifies the initial value as null:

jQuery
index.js
$(function() {
    $("#check-box").dxCheckBox({
        value: null,
        enableThreeStateBehavior: true
    });
});
Angular
app.component.html
<dx-check-box
    [value]="null"
    [enableThreeStateBehavior]="true"
>
</dx-check-box>
Vue
App.vue
<template>
    <DxCheckBox
        :value="null"
        :enable-three-state-behavior="true"
    />
</template>

<script>
// ...
</script>
React
App.js
// ...

function App() {
    return (
        <CheckBox
            value={null}
            enableThreeStateBehavior={true}
        />
    );
}

export default App;

Configure the CheckBox

To label the CheckBox and add a pop-up hint, specify the text and hint properties.

You can also use the iconSize property to specify a custom width and height for the CheckBox.

jQuery
index.js
$(function() {
    $("#check-box").dxCheckBox({
        // ...
        text: 'Approve',
        hint: 'Approve',
        iconSize: 25
    });
});
Angular
app.component.html
<dx-check-box ...
    text="Approve"
    hint="Approve"
    iconSize="25"
>
</dx-check-box>
Vue
App.vue
<template>
    <DxCheckBox ...
        text="Approve"
        hint="Approve"
        icon-size="25"
    />
</template>

<script>
// ...
</script>
React
App.js
// ...

function App() {
    return (
        <CheckBox
            text="Approve"
            hint="Approve"
            iconSize="25"
        />
    );
}

export default App;

Handle the Value Change

Implement the onValueChanged event handler to perform an action when users click the CheckBox.

The code below notifies a user every time the CheckBox is checked.

jQuery
index.js
$(function() {
    $("#check-box").dxCheckBox({
        // ...
        onValueChanged: function(e) {
            if (e.value) {
                DevExpress.ui.notify("The CheckBox is checked", "success", 500);
            }
        }
    });
});
Angular
app.component.html
app.component.ts
<dx-check-box ...
    (onValueChanged)="onValueChanged($event)"
>
</dx-check-box>
import { Component } from '@angular/core';
import notify from 'devextreme/ui/notify';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent {
    onValueChanged(e) {
        if (e.value) {
            notify("The CheckBox is checked", "success", 500);
        }
    }
}
Vue
App.vue
<template>
    <DxCheckBox ...
        @value-changed="onValueChanged"
    />
</template>

<script>
// ...
import notify from "devextreme/ui/notify";

export default {
    // ...
    methods: {
        onValueChanged(e) {
            if (e.value) {
                notify("The CheckBox is checked", "success", 500);
            }
        }
    }
}
</script>
React
App.js
import React, { useCallback } from 'react';
import notify from 'devextreme/ui/notify';
// ...

function App() { 
    const onValueChanged = useCallback((e) => {
        if (e.value) {
            notify("The CheckBox is checked", "success", 500);
        }
    }, []);

    return (
        <CheckBox ...
            onValueChanged={onValueChanged}
        />
    );
}

export default App;