FormProps

Premium

Updated on Dec 9, 2025

Contains the props for the KendoReact Form component.

Name	Type	Default	Description
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. 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. 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. jsx const initialValues = { user: { name: '', age: 0 } }; <Form initialValues={initialValues} render={props => <form>form content</form>} />
onChange?	(fieldName: string, value: any, valueGetter: (name: string) => any) => void		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. 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>} />
onSubmit?	(values: {[name: string]: any}, event?: SyntheticEvent<any>) => 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. 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. jsx const handleSubmitClick = event => console.log(event); <Form onSubmitClick={handleSubmitClick} render={props => <form> form content </form>} />
render	(props: FormRenderProps) => any		Renders the form content using the provided render function. 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. jsx const validator = values => ({ user: { name: values.user.name ? "" : "Name is required." } }); <Form validator={validator} render={props => <form> form content </form>} />