Your search did not match any results.
Check Box

Check Box

When you add a CheckBox to an application, set its value property. The CheckBox can have the following states:

  • Checked (value is true).
  • Unchecked (value is false).
  • Undetermined (value is undefined).

To handle value change, use two-way binding to bind the value property to a component property. In this demo, the value properties of the "Handle value change" and "Disabled" CheckBox components are bound to the same component property. Click the first CheckBox to see how it affects the second one. You can also use the onValueChanged property to handle value change, for example, if you need to use the previous value.

You can use the iconSize property to specify a custom width and height for the CheckBox. To add a label to the CheckBox, set the text property.

Backend API
Copy to CodeSandBox
Apply
Reset
<template> <div class="form"> <div class="dx-fieldset"> <div class="dx-field"> <div class="dx-field-label">Checked</div> <div class="dx-field-value"> <DxCheckBox :value="true"/> </div> </div> <div class="dx-field"> <div class="dx-field-label">Unchecked</div> <div class="dx-field-value"> <DxCheckBox :value="false"/> </div> </div> <div class="dx-field"> <div class="dx-field-label">Indeterminate</div> <div class="dx-field-value"> <DxCheckBox :value="null"/> </div> </div> <div class="dx-field"> <div class="dx-field-label">Handle value change</div> <div class="dx-field-value"> <DxCheckBox v-model:value="checkBoxValue"/> </div> </div> <div class="dx-field"> <div class="dx-field-label">Disabled</div> <div class="dx-field-value"> <DxCheckBox :disabled="true" :value="checkBoxValue" /> </div> </div> <div class="dx-field"> <div class="dx-field-label">Custom size</div> <div class="dx-field-value"> <DxCheckBox :value="null" :icon-size="30" /> </div> </div> <div class="dx-field"> <div class="dx-field-label">With label</div> <div class="dx-field-value"> <DxCheckBox :value="true" text="Label" /> </div> </div> </div> </div> </template> <script> import { DxCheckBox } from 'devextreme-vue/check-box'; export default { components: { DxCheckBox, }, data() { return { checkBoxValue: null, }; }, }; </script>
import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');
<!DOCTYPE html> <html> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/22.1.4/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/22.1.4/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" /> <script src="https://unpkg.com/core-js@2.4.1/client/shim.min.js"></script> <script src="https://unpkg.com/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.js"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> </div> </div> </body> </html>
window.config = { transpiler: 'plugin-babel', meta: { '*.vue': { loader: 'vue-loader', }, 'devextreme/localization.js': { 'esModule': true, }, }, paths: { 'npm:': 'https://unpkg.com/', }, map: { 'vue': 'npm:vue@3.0.0/dist/vue.esm-browser.js', 'vue-loader': 'npm:dx-systemjs-vue-browser@1.0.15/index.js', 'mitt': 'npm:mitt/dist/mitt.umd.js', 'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.28.0/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@22.1.4/cjs', 'devextreme-vue': 'npm:devextreme-vue@22.1.4', 'jszip': 'npm:jszip@3.7.1/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@1.5.16/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.1.63/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@4.1.32/dist/dx-gantt.js', '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.7', 'inferno': 'npm:inferno@7.4.4/dist/inferno.min.js', 'inferno-compat': 'npm:inferno-compat@7.4.11/dist/inferno-compat.min.js', 'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js', 'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js', 'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js', 'inferno-clone-vnode': 'npm:inferno-clone-vnode@7.4.11/dist/inferno-clone-vnode.min.js', 'inferno-create-class': 'npm:inferno-create-class@7.4.11/dist/inferno-create-class.min.js', 'inferno-extras': 'npm:inferno-extras@7.4.11/dist/inferno-extras.min.js', 'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js', 'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js', }, packages: { 'devextreme-vue': { main: 'index.js', }, 'devextreme': { defaultExtension: 'js', }, 'devextreme/events/utils': { main: 'index', }, 'devextreme/events': { main: 'index', }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js', }, }, packageConfigPaths: [ 'npm:@devextreme/*/package.json', 'npm:@devextreme/runtime@3.0.7/inferno/package.json', ], babelOptions: { sourceMaps: false, stage0: true, }, }; System.config(window.config);