@progress/kendo-react-form/interfaces/FormProps.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 { FormRenderProps } from './FormRenderProps.js';
import { FormValidatorType } from './FormValidator.js';
import { FormSubmitClickEvent } from './FormSubmitClickEvent.js';
/**
 * Contains the props for the KendoReact Form component.
 */
export interface FormProps {
    /**
     * Sets the starting values for form fields.
     *
     * Set initial values to prevent errors when switching from uncontrolled to controlled mode.
     *
     * @example
     * ```jsx
     * const initialValues = { user: { name: '', age: 0 } };
     * <Form initialValues={initialValues} render={props => <form>form content</form>} />
     * ```
     */
    initialValues?: {
        [name: string]: any;
    };
    /**
     * Validation errors that override field and form validators.
     *
     * Provides validation errors directly as an object, unlike the validator prop which expects a callback.
     * When both validator and errors exist for a field, the errors prop takes precedence.
     *
     * @example
     * ```jsx
     * const [errors, setErrors] = useState({});
     * const handleSubmit = async (data) => {
     *     const response = await submitToServer(data);
     *     if (response.errors) {
     *         setErrors(response.errors);
     *     }
     * };
     * <Form errors={errors} onSubmit={handleSubmit} render={props => <FormElement>form content</FormElement>} />
     * ```
     */
    errors?: {
        [name: string]: string;
    };
    /**
     * Fires each time any field value changes.
     *
     * The third parameter `valueGetter` allows accessing other field values, useful for cross-field validation or clearing related errors.
     *
     * @example
     * ```jsx
     * const handleChange = (fieldName, value, valueGetter) => {
     *     // For nested fields like 'user.name', access related fields like 'user.email'
     *     if (fieldName === 'user.name') {
     *         const email = valueGetter('user.email');
     *         console.log('Name changed:', value, 'Email is:', email);
     *     }
     *     // Clear error for the changed field
     *     if (formErrors[fieldName]) {
     *         setFormErrors(prev => ({ ...prev, [fieldName]: '' }));
     *     }
     * };
     * <Form errors={formErrors} onChange={handleChange} render={props => <FormElement>form content</FormElement>} />
     * ```
     */
    onChange?: (fieldName: string, value: any, valueGetter: (name: string) => any) => void;
    /**
     * Validates the entire form and returns error messages.
     *
     * Return a key-value pair where the key is the field path and the value is the error message.
     * You can validate nested fields like 'users[0].name'.
     * Only synchronous functions are supported.
     *
     * @example
     * ```jsx
     * const validator = values => ({ user: { name: values.user.name ? "" : "Name is required." } });
     * <Form validator={validator} render={props => <form> form content </form>} />
     * ```
     */
    validator?: FormValidatorType;
    /**
     * Handles form submission when validation passes and fields are modified.
     *
     * Fires when at least one field is modified, the user clicks Submit, and validation passes.
     *
     * @example
     * ```jsx
     * const handleSubmit = (values, event) => console.log(values);
     * <Form onSubmit={handleSubmit} render={props => <form> form content </form>} />
     * ```
     */
    onSubmit?: (values: {
        [name: string]: any;
    }, event?: React.SyntheticEvent<any>) => void;
    /**
     * Handles every submit button click, even when the form is invalid or unchanged.
     *
     * Use this for advanced scenarios where you need to handle all submit events.
     *
     * @example
     * ```jsx
     * const handleSubmitClick = event => console.log(event);
     * <Form onSubmitClick={handleSubmitClick} render={props => <form> form content </form>} />
     * ```
     */
    onSubmitClick?: (event: FormSubmitClickEvent) => void;
    /**
     * Renders the form content using the provided render function.
     *
     * @example
     * ```jsx
     * const renderForm = props => <form> form content </form>;
     * <Form render={renderForm} />
     * ```
     */
    render: (props: FormRenderProps) => any;
    /**
     * Allows the form to submit even when no fields have been modified.
     *
     * @example
     * ```jsx
     * <Form ignoreModified={true} render={props => <form>form content </form>} />
     * ```
     */
    ignoreModified?: boolean;
    /**
     * @hidden
     * This prop comes from the `withId` HOC and is used internally by the Form.
     * It replaces the previously used guid() function and generates an `id` of the Form.
     */
    id?: string;
}