FieldRenderProps

Represents the props that are passed to the component which is rendered by Field.

NameTypeDefaultDescription

children

any

Represents the children that are passed to the Field.

modified

boolean

Indicates if the field is modified. The modified state is set to true when the onChange callback for the current field is called for first time.

name

string

The name of the field in the Form state.

onBlur

() => void

A callback you have to call when the rendered component is blurred. Responsible for setting the touched state of the Field.

onChange

(event: { target?: any; value?: any; }) => void

A callback you have to call when the value of the rendered component is changed (see example). The value property of the event takes precedence over target.value.

onFocus

() => void

A callback you have to call when the rendered component is focused. Responsible for setting the visited state of the Field.

touched

boolean

Indicates if the field is touched. The touched state is set to true when the onBlur callback is called.

valid

boolean

A calculated property based on whether validationMessage is present and the touched state is set to true.

validationMessage

"null" | string

Represents the error message that is returned by the validator. The Field is considered valid if the validationMessage field is empty.

value

any

Represents the current value of the Field (see example).

visited

boolean

Indicates if the field is visited. The visited state is set to true when the onFocus callback is called.