New to KendoReact? Start a free 30-day trial

Form

Component

Represents the KendoReact Form component.

Definition

Package:@progress/kendo-react-form

Syntax:

jsx

export const FormInput = (fieldRenderProps) => {
    const onValueChange = React.useCallback(
        (event) => fieldRenderProps.onChange(event.target.value),
        [fieldRenderProps.onChange]
    );
    return (
        <input
            className={'k-input'}
            value={fieldRenderProps.value}
            onChange={onValueChange}
        />
    );
};

export const App = () => {
    const handleSubmit = (dataItem) => alert(JSON.stringify(dataItem));
    return (
        <Form
            initialValues={{title: ''}}
            onSubmit={handleSubmit}
            render={(formRenderProps) => (
                <div>
                    <Field name={'title'} component={FormInput} />
                    <Button
                        disabled={!formRenderProps.allowSubmit}
                        onClick={formRenderProps.onSubmit}
                    >
                        Submit
                    </Button>
                </div>
            )}
        />
    );
};

Properties

props

FormProps intersected with RefAttributes<FormHandle>

The props of the Form component.

Methods

onChange

Method for emiting changes to a specific field outside the form component.

Use onChange only if you cannot achieve the desired behavior through the Field component by FormRenderProps.

Parameters:namestringoptions{ value: any }

onReset

Method for resetting the form state outside the form component.

Use onReset only if you cannot achieve the desired behavior through the Field component or by FormRenderProps.