Sponsor
Black Lives Matter. Support Equal Justice.
Types

FieldRenderProps


FieldRenderProps

These are the props that <Field/> provides to your render function or component.

This object separates out the values and event handlers intended to be given to the input component from the meta data about the field. The input can be destructured directly into an <input/> like so: <input {...props.input}/>. Keep in mind that the values in meta are dependent on you having subscribed to them with the subscription prop.

input.name

string

Required

The name of the field.

input.onBlur

(?SyntheticFocusEvent<*>) => void`

Required

The onBlur function can take a SyntheticFocusEvent like it would if you had given it directly to an <input/> component, but you can also just call it: props.input.onBlur() to mark the field as blurred (inactive).

Related:

input.onChange

(SyntheticInputEvent<*> | any) => void

Required

The onChange function can take a SyntheticInputEvent like it would if you had given it directly to an <input/> component (in which case it will read the value out of event.target.value), but you can also just call it: props.input.onChange(value) to update the value of the field.

Related:

input.onFocus

(?SyntheticFocusEvent<*>) => void

Required

The onFocus function can take a SyntheticFocusEvent like it would if you had given it directly to an <input/> component, but you can also just call it: props.input.onFocus() to mark the field as focused (active).

Related:

input.value

any

Optional. May not be present if you have not subscribed to value.

The current value of the field.

meta.active

boolean

Optional: May not be present if you have not subscribed to active.

Whether or not the field currently has focus.

meta.data

A place for arbitrary values to be placed by mutators.

meta.dirty

boolean

Optional: May not be present if you have not subscribed to dirty.

true when the value of the field is not equal to the initial value (using the isEqual comparator provided to <Field/>), false if the values are equal.

meta.dirtySinceLastSubmit

boolean

Optional: May not be present if you have not subscribed to dirtySinceLastSubmit.

true when the value of the field is not equal to the value last submitted (using the isEqual comparator provided to <Field/>), false if the values are equal.

meta.error

any

Optional: May not be present if you have not subscribed to error.

The current validation error for this field.

meta.initial

any

Optional: May not be present if you have not subscribed to initial.

The initial value of the field. undefined if it was never initialized.

meta.invalid

boolean

Optional: May not be present if you have not subscribed to invalid.

true if the field has a validation error or a submission error. false otherwise.

meta.modified

boolean

Optional: May not be present if you have not subscribed to modified.

true if this field's value has ever been changed. false otherwise.

Once true, it will remain true for the lifetime of the field, or until the form is reset.

meta.modifiedSinceLastSubmit

boolean

Optional: May not be present if you have not subscribed to modifiedSinceLastSubmit.

true if this field's value has ever been changed since last submission. false otherwise.

Once true, it will remain true until the next submit action, or until the form is reset.

meta.pristine

boolean

Optional: May not be present if you have not subscribed to pristine.

true if the current value is === to the initial value, false if the values are !==.

meta.submitError

any

Optional: May not be present if you have not subscribed to submitError.

The submission error for this field.

meta.submitFailed

boolean

Optional: May not be present if you have not subscribed to submitFailed.

true if a form submission has been tried and failed. false otherwise.

meta.submitSucceeded

boolean

Optional: May not be present if you have not subscribed to submitSucceeded.

true if the form has been successfully submitted. false otherwise.

meta.submitting

boolean

Optional: May not be present if you have not subscribed to submitting.

true if the form is currently being submitted asynchronously. false otherwise.

meta.touched

boolean

Optional: May not be present if you have not subscribed to touched.

true if this field has ever gained and lost focus. false otherwise.

Useful for knowing when to display error messages.

meta.valid

boolean

Optional: May not be present if you have not subscribed to valid.

true if this field has no validation or submission errors. false otherwise.

meta.validating

boolean

Optional: May not be present if you have not subscribed to validating.

true if this field is currently waiting on its asynchronous field-level validation function to resolve. false otherwise.

meta.visited

boolean

Optional: May not be present if you have not subscribed to visited.

true if this field has ever gained focus. false otherwise.