All docs
V20.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.

Overview

The CheckBox is a small box, which when selected by the end user, shows that a particular feature has been enabled or a specific property has been chosen.

View Demo

The following code adds the CheckBox to your page.

jQuery
HTML
JavaScript
<div id="checkBoxContainer"></div>
$(function() {
    $("#checkBoxContainer").dxCheckBox({
        text: "Check me",
        value: undefined
    });
});
Angular
HTML
TypeScript
<dx-check-box
    text="Check me"
    [(value)]="checkBoxValue">
</dx-check-box>
import { DxCheckBoxModule } from "devextreme-angular";
// ...
export class AppComponent {
    checkBoxValue: boolean;
}
@NgModule({
    imports: [
        // ...
        DxCheckBoxModule
    ],
    // ...
})
Vue
App.vue
<template>
    <DxCheckBox
        text="Check me"
        v-model:value="checkBoxValue"
    />
</template>

<script>
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import DxCheckBox from 'devextreme-vue/check-box';

export default {
    components: {
        DxCheckBox
    },
    data() {
        return {
            checkBoxValue: undefined
        };
    }
}
</script>
React
App.js
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

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

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            checkBoxValue: undefined
        };
        this.handleValueChange = this.handleValueChange.bind(this);
    }

    handleValueChange(e) {
        this.setState({
            checkBoxValue: e.value
        });
    }

    render() {
        return (
            <CheckBox
                text="Check me"
                value={this.state.checkBoxValue}
                onValueChanged={this.handleValueChange}
            />
        );
    }
}
export default App;

The CheckBox UI component can have the following states: checked (the value property is true), unchecked (value is false), undetermined (value is undefined).

See Also