Forms Support

The Checkbox component can be easily integrated with HTML5 form as well as KendoReact Form (or other third-party solutions).

The form enables you to validate checkbox values and prevent the submission of forms which are in an invalid state.

In addition to the exposed form support settings, the Checkbox provides the same properties and behaves in the same way as a native HTML input[type=checkbox] element.

Functionality and Features

Support for KendoReact Form and Setting Custom Behavior

The KendoReact Form component integrates with all KendoReact components.

You can display error messages and fully customize the behavior of the rendered component by using the additional properties of the Field component.

The following example demonstrates how to render a required custom checkbox a terms agreement.

Example
View Source
Edit In Stackblitz  
Change Theme:

Setting Validation Requirements

The Checkbox supports props for setting basic validation. For example, the required property which prevents form submission when Checkbox is not checked.

Example
View Source
Edit In Stackblitz  
Change Theme:

Setting Custom Validation Messages

You can implement custom error messages which will be displayed when the Checkbox is in an invalid state and the user tries to submit the form. To render a custom validation message, set the validationMessage prop.

Example
View Source
Edit In Stackblitz  
Change Theme:

Disabling the Validation Styling

By default, to achieve a visual representation of its invalid state, the Checkbox applies the k-state-invalid class name to the wrapping component. To disable the utilization of k-state-invalid, set the validityStyles property to false.

Example
View Source
Edit In Stackblitz  
Change Theme: