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.