The CheckBox component allows users to select yes/no or true/false. To change the editor's state (check/uncheck/indeterminate), click it or press SPACE when the editor is focused.
You can bind the CheckBox's state to Boolean, Nullable Boolean, Enum, Int16, and other property types.
The main CheckBox API members are listed below.
- Checked - Specifies whether the checkbox editor is checked.
- CheckedChanged - Fires when the editor's state changes.
- LabelPosition - Specifies the position of the editor's child content relative to the check mark.
- Enabled - Specifies whether the editor is enabled.
In the example above, the Select All checkbox is bound to a Nullable Boolean variable that supports three states: checked, unchecked, and indeterminate. The indeterminate state is activated if the other checkboxes have different states (checked or unchecked).
Use the CheckBox's Alignment and LabelPosition properties to define a component's input and label positions. Note that a CheckBox's input and label are only aligned in the component's root element. This element behaves as a standard block container (or flex in the case of SpaceBetween and SpaceAround alignment variants) regarding outer styles a user applies.
Use the CheckBoxContentAlignment enumeration values to specify CheckBox alignment options. The LabelPosition enumeration values specify the CheckBox label position.
This demo module shows how to add custom content to the CheckBox's ChildContent property and use the DisableDefaultRender property to hide the default check mark.
To allow users to set the CheckBox's state to indeterminate, enable the AllowIndeterminateStateByClick property. The state changes each time a user clicks a CheckBox: Indeterminate -> Checked -> Unchecked -> Indeterminate.
The CheckBox allows you to bind its states (check, uncheck, indeterminate) to custom data types. This module demonstrates how to bind the component to an Enum object.
- ValueChecked — Specifies a value that is considered as Checked.
- ValueUnchecked — Specifies a value that is considered as Unchecked.
- ValueIndeterminate — Specifies a value that is considered as Indeterminate.
A value is considered as Indeterminate if it is not equal to the specified properties.