FormProps

Premium

Contains the props for the KendoReact Form component.

Name	Type	Default	Description
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>} />
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>} />