State Management
The CheckBox enables you to control its checked state and respond to state changes through the checkedState property and the checkedStateChange event.
The checkedState property accepts three values defined by the CheckBoxState type:
true—The CheckBox is checked.false—The CheckBox is unchecked.'indeterminate'—The CheckBox displays an indeterminate state. When using the native HTML input element with thekendoCheckBoxdirective, set theindeterminateattribute totrueinstead.
Controlling the Checked State
Implement two-way binding for the checkedState property to keep the CheckBox state in sync with user interactions. The bound property updates automatically when the user clicks the CheckBox, and the component reflects any programmatic changes to the property.
<kendo-checkbox [(checkedState)]="checkedState"></kendo-checkbox>The following example demonstrates how to control the checked state of the CheckBox through two-way binding and external buttons.
Handling Checked State Changes
To execute custom logic when the checked state changes, bind a handler to the checkedStateChange event separately. The handler receives the new CheckBoxState value.
The
checkedStateChangeevent does not fire when the state changes programmatically throughngModelorformControl.
<kendo-checkbox
[checkedState]="isChecked"
(checkedStateChange)="onStateChange($event)"
></kendo-checkbox>Enabling User Actions Based on Checked State
A common use case for the checkedStateChange event is to enable or disable user actions based on the current state. The following example demonstrates a terms-of-service agreement where checking the CheckBox enables the submit button.
Toggling Dependent Options
The checkedStateChange event lets you create dependencies between form controls. For example, you can disable a child CheckBox when its parent is unchecked.
The following example demonstrates a notifications CheckBox that controls whether the email alerts CheckBox is enabled.