FormRenderProps

Premium

Represents the props that are passed to the render option component of the Form.

Name	Type	Default	Description
allowSubmit	boolean		Indicates if the Form is ready to be submitted. If allowSubmit is set to true and the Form is valid, the user will be able to submit the form. If allowSubmit is set to true and the Form is not valid, the user will be able to set the touched and visited state of all fields to true. Useful for toggling the disabled state of the Submit button. jsx console.log(props.allowSubmit);
errors	KeyValue<string>		The key-value pair containing the current errors by field path, combined from both field and form level validators. jsx console.log(props.errors);
modified	boolean		Indicates if the Form is modified. If any field is modified, modified is set to true. The modified state of a field is set to true when the onChange callback of the Field component is called for the first time. jsx console.log(props.modified);
onChange	(name: string, options: { value: any; }) => void		A callback for emitting changes to a specific field without using the Field component (see example). Use onChange only if you cannot achieve the desired behavior through the Field component. jsx props.onChange("user.name", { value: "John Doe" });
onFormReset	() => void		A callback for resetting the Form. jsx <button onClick={props.onFormReset}>Reset</button>
onSubmit	(event: SyntheticEvent<any>) => void		A callback for submitting the Form. Can be passed to the onClick property of the Submit button. jsx const handleSubmit = event => console.log("Form submitted"); <button onClick={props.onSubmit}>Submit</button>
submitted	boolean		Indicates if the Form is successfully submitted. Useful for detecting if the user is leaving the form before saving changes. jsx console.log(props.submitted);
touched	boolean		Indicates if the Form is touched. If any field is touched, touched is set to true. The touched state of a field is set to true when the onBlur callback of the Field component is called or when the user tries to submit the form. jsx console.log(props.touched);
valid	boolean		Indicates if the Form is valid. If any field is invalid, valid is set to false. jsx console.log(props.valid);
valueGetter	(name: string) => any		A callback for getting the value of a field without using the Field component (see example). Useful for creating and modifying the UI based on the field values. jsx const value = props.valueGetter("user.name"); console.log(value);
visited	boolean		Indicates if the Form is visited. If any field is visited, visited is set to true. The visited state of a field is set to true when the onFocus callback of the Field component is called or when the user tries to submit the form. jsx console.log(props.visited);