@progress/kendo-react-form/FormElement.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 { FormClassStructure } from '@progress/kendo-react-common';
import { ResponsiveFormBreakPoint } from './interfaces/ResponsiveFormBreakPoint.js';
import { Gutters } from './interfaces/Gutters.js';
import * as React from 'react';
/**
 * @hidden
 */
export declare const DEFAULT_FORM_GUTTERS: {
    cols?: number | string | null;
    rows?: number | string | null;
};
/**
 * Represents the props of the KendoReact FormElement component.
 */
export interface FormElementProps {
    /**
     * @hidden
     */
    children?: any;
    /**
     * The styles that are applied to the form DOM element.
     */
    style?: React.CSSProperties;
    /**
     * Sets a class for the form DOM element.
     */
    className?: string;
    /**
     * If set to `true` enable the horizontal layout of the form editors.
     */
    horizontal?: boolean;
    /**
     * Sets the id of the form DOM element. Takes priority over the Form's id.
     */
    id?: string;
    /**
     * Defines the number of columns in the form. Can be a number or an array of responsive breakpoints.
     */
    cols?: number | ResponsiveFormBreakPoint[];
    /**
     * Defines the gutters for the form. You can specify gutters for rows and columns. Number is equivalent to px.
     */
    gutters?: string | number | Gutters | ResponsiveFormBreakPoint[];
    /**
     * @hidden
     */
    [customProp: string]: any;
    /**
     * Configures the `size` of the Form.
     *
     * The available options are:
     * - small
     * - medium
     * - large
     *
     * @default undefined (theme-controlled)
     *
     * @example
     * ```jsx
     * <FormElement size="large" />
     * ```
     */
    size?: 'small' | 'medium' | 'large';
    /**
     * @hidden
     */
    unstyled?: FormClassStructure;
}
/**
 * Represent the `ref` of the FormElement component.
 */
export interface FormElementHandle {
    /**
     * Represents the props of the FormElement component.
     */
    props: FormElementProps;
    /**
     * Represents the element of the FormElement component.
     */
    element: HTMLFormElement | null;
}
/**
 * Represents the KendoReact FormElement component.
 * It's small wrapper around HTML form element which automatically attach the
 * Form component's `onSubmit` render prop and Kendo CSS classes.
 * Other props are passed to the DOM node.
 */
export declare const FormElement: React.FunctionComponent<FormElementProps>;