FieldProps

Premium

Contains the props for the Field component that you use inside forms.

Name	Type	Default	Description
children?	any		Provides child elements that are passed to the rendered component. jsx <Field name="user.name" component="input"> <span>Additional content</span> </Field>
colSpan?	number | ResponsiveFormBreakPoint[]		Sets how many columns the field spans in the form layout.
component	string | ComponentType<any>		Can be set to a React component or to the name of an HTML element, for example, input, select, and textarea. The props that are passed to the component are the FieldRenderProps. jsx <Field name="user.name" component="input" />
name	string		Sets the field name in the form state. You can use nested fields like user.age and users[0].name. jsx <Field name="user.age" component="input" />
onChange?	(event: any) => void		Handles changes to the field value. Use this to update related fields. The Form automatically updates its state when this fires. jsx const handleChange = event => console.log(event); <Field name="user.name" component="input" onChange={handleChange} />
validator?	FieldValidatorType | FieldValidatorType[]		Validates the field value and returns error messages. Only synchronous functions are supported. Use useMemo to avoid infinite loops when using an array of validators. jsx const validator = value => value ? "" : "This field is required."; <Field name="user.email" component="input" validator={validator} />