@progress/kendo-react-form/interfaces/FieldProps.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 { FieldValidatorType } from './FieldValidator.js';
import { ResponsiveFormBreakPoint } from './ResponsiveFormBreakPoint.js';
/**
 * Contains the props for the Field component that you use inside forms.
 */
export interface FieldProps {
    /**
     * Sets the field name in the form state.
     * You can use nested fields like `user.age` and `users[0].name`.
     *
     * @example
     * ```jsx
     * <Field name="user.age" component="input" />
     * ```
     */
    name: string;
    /**
     * Can be set to a React component or to the name of an HTML element,
     * for example, `input`, `select`, and `textarea`.
     * The props that are passed to the component are the
     * [`FieldRenderProps`](https://www.telerik.com/kendo-react-ui/components/form/api/fieldrenderprops).
     *
     * @example
     * ```jsx
     * <Field name="user.name" component="input" />
     * ```
     */
    component: string | React.ComponentType<any>;
    /**
     * Validates the field value and returns error messages.
     *
     * Only synchronous functions are supported.
     * Use `useMemo` to avoid infinite loops when using an array of validators.
     *
     * @example
     * ```jsx
     * const validator = value => value ? "" : "This field is required.";
     * <Field name="user.email" component="input" validator={validator} />
     * ```
     */
    validator?: FieldValidatorType | FieldValidatorType[];
    /**
     * Provides child elements that are passed to the rendered component.
     *
     * @example
     * ```jsx
     * <Field name="user.name" component="input">
     *   <span>Additional content</span>
     * </Field>
     * ```
     */
    children?: any;
    /**
     * Sets how many columns the field spans in the form layout.
     */
    colSpan?: number | ResponsiveFormBreakPoint[];
    /**
     * Handles changes to the field value.
     *
     * Use this to update related fields. The Form automatically updates its state when this fires.
     *
     * @example
     * ```jsx
     * const handleChange = event => console.log(event);
     * <Field name="user.name" component="input" onChange={handleChange} />
     * ```
     */
    onChange?: (event: any) => void;
}