New to KendoReact? Start a free 30-day trial

Form

Component

Represents the KendoReact Form component.

Definition

Package:@progress/kendo-react-form

Properties Interface:FormProps

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

errors?

{ [name: string]: string }

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>} />

ignoreModified?

boolean

Allows the form to submit even when no fields have been modified.

Example:

jsx

<Form ignoreModified={true} render={props => <form>form content </form>} />

initialValues?

{ [name: string]: any }

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>} />

onSubmit?

(values: { [name: string]: any }, event: SyntheticEvent<any, Event>) => void

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.

Parameters:values{ [name: string]: any }event?SyntheticEvent<any, Event>

Example:

jsx

const handleSubmit = (values, event) => console.log(values);
<Form onSubmit={handleSubmit} render={props => <form> form content </form>} />

onSubmitClick?

(event: FormSubmitClickEvent) => 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.

Parameters:eventFormSubmitClickEvent

Example:

jsx

const handleSubmitClick = event => console.log(event);
<Form onSubmitClick={handleSubmitClick} render={props => <form> form content </form>} />

render

Renders the form content using the provided render function.

Parameters:propsFormRenderPropsReturns:

any

Example:

jsx

const renderForm = props => <form> form content </form>;
<Form render={renderForm} />

validator?

FormValidatorType

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>} />

webMcp?

boolean | WebMcpProps

Enables browser-native AI agent tools via Web MCP (Chrome 146+).

Pass true for defaults or an object for fine-grained control. AI agents are multilingual — dataName accepts any language.

Example:

tsx

// Boolean: generic "form" label
<Form webMcp render={props => <FormElement>...</FormElement>} />

// Config object: explicit name
<Form webMcp={{ dataName: 'employee' }} render={props => <FormElement>...</FormElement>} />

References

ref

FormHandle

Represent the ref 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.