@progress/kendo-react-form/interfaces/FormRenderProps.d.ts

React Form is a small and fast package for form state management with zero dependencies. KendoReact Form package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
import { KeyValue } from './KeyValue.js';
/**
 * Contains props that are passed to the form's render function.
 */
export interface FormRenderProps {
    /**
     * Submits the form when called.
     * Use this with the onClick property of Submit buttons.
     *
     * @example
     * ```jsx
     * const handleSubmit = event => console.log("Form submitted");
     * <Button onClick={props.onSubmit}>Submit</Button>
     * ```
     */
    onSubmit: (event: React.SyntheticEvent<any>) => void;
    /**
     * A callback for emitting changes to a specific field without using the Field component
     * ([see example](https://www.telerik.com/kendo-react-ui/components/form/advanced-scenarios#toc-changing-the-field-value)).
     *
     * > Use `onChange` only if you cannot achieve the desired behavior through the Field component.
     *
     * @example
     * ```jsx
     * props.onChange("user.name", { value: "John Doe" });
     * ```
     */
    onChange: (name: string, options: {
        value: any;
    }) => void;
    /**
     * Resets the form to its initial state.
     *
     * @example
     * ```jsx
     * <Button onClick={props.onFormReset}>Reset</Button>
     * ```
     */
    onFormReset: () => void;
    /**
     * Contains current validation errors organized by field path.
     *
     * @example
     * ```jsx
     * console.log(props.errors);
     * ```
     */
    errors: KeyValue<string>;
    /**
     * Shows whether the form passes all validation rules.
     * Becomes false if any field fails validation.
     *
     * @example
     * ```jsx
     * console.log(props.valid);
     * ```
     */
    valid: boolean;
    /**
     * Shows whether the user has interacted with any field.
     * Becomes true when any field loses focus or the user tries to submit.
     *
     * @example
     * ```jsx
     * console.log(props.touched);
     * ```
     */
    touched: boolean;
    /**
     * Shows whether the user has focused on any field.
     * Becomes true when any field receives focus or the user tries to submit.
     *
     * @example
     * ```jsx
     * console.log(props.visited);
     * ```
     */
    visited: boolean;
    /**
     * Shows whether any field value has changed from its initial value.
     * Becomes true when any field value changes for the first time.
     *
     * @example
     * ```jsx
     * console.log(props.modified);
     * ```
     */
    modified: boolean;
    /**
     * Shows whether the form has been successfully submitted.
     * Use this to detect if the user is leaving before saving changes.
     *
     * @example
     * ```jsx
     * console.log(props.submitted);
     * ```
     */
    submitted: boolean;
    /**
     * Shows whether the form can be submitted.
     * When true and form is valid, you can submit. When true and form is invalid, you can show all validation errors.
     *
     * Use this to control the disabled state of Submit buttons.
     *
     * @example
     * ```jsx
     * console.log(props.allowSubmit);
     * ```
     */
    allowSubmit: boolean;
    /**
     * A callback for getting the value of a field without using the Field component
     * ([see example](https://www.telerik.com/kendo-react-ui/components/form/advanced-scenarios#toc-reading-the-field-state)).
     * Useful for creating and modifying the UI based on the field values.
     *
     * @example
     * ```jsx
     * const value = props.valueGetter("user.name");
     * console.log(value);
     * ```
     */
    valueGetter: (name: string) => any;
}