A check box widget.

Included in: dx.phonejs.js, dx.webappjs.js, dx.all.js

The main purpose of the dxCheckBox widget is to allow a user to check or uncheck an option, and perform a specified action when the widget value changes.

This widget, like any other DevExtreme UI widget, can be created using one of three possible approaches: jQuery, Knockout or AngularJS. The following code demonstrates how to create the dxCheckBox widget using the Knockout approach.

<div data-bind="dxCheckBox: { checked: checkBoxState }"></div>

You can access the current check box state via the checked option. Declare an observable variable and pass it to the checked option to update the variable each time the check box state changes.

Note that if the value option is set to undefined, the widget accepts the indeterminate state.

var checkBoxState = ko.observable(false);
See Also
  • To learn how to create widgets in detail, refer to the Create a Widget article.
  • The dxCheckBox widget is related to the Editors category. So read an overview of the features that are common for editors in the Common Tasks topic of the Editors article.
Show Example:


An object defining configuration options for the dxCheckBox widget.


This section describes methods that can be used to manipulate a widget.


This section describes events fired by this component.