Vue CheckBox - 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