FormRenderProps

Premium

Contains props that are passed to the form's render function.

Name	Type	Default	Description
allowSubmit	boolean		Shows whether the form can be submitted. When true and form is valid, you can submit. When true and form is invalid, you can show all validation errors. Use this to control the disabled state of Submit buttons. jsx console.log(props.allowSubmit);
errors	KeyValue<string>		Contains current validation errors organized by field path. jsx console.log(props.errors);
modified	boolean		Shows whether any field value has changed from its initial value. Becomes true when any field value changes 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		Resets the form to its initial state. jsx <Button onClick={props.onFormReset}>Reset</Button>
onSubmit	(event: SyntheticEvent<any>) => void		Submits the form when called. Use this with the onClick property of Submit buttons. jsx const handleSubmit = event => console.log("Form submitted"); <Button onClick={props.onSubmit}>Submit</Button>
submitted	boolean		Shows whether the form has been successfully submitted. Use this to detect if the user is leaving before saving changes. jsx console.log(props.submitted);
touched	boolean		Shows whether the user has interacted with any field. Becomes true when any field loses focus or the user tries to submit. jsx console.log(props.touched);
valid	boolean		Shows whether the form passes all validation rules. Becomes false if any field fails validation. 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		Shows whether the user has focused on any field. Becomes true when any field receives focus or the user tries to submit. jsx console.log(props.visited);