function (props, {meta, input}, formOptions) => props

Only applicable for fields connected to the form state.

A function allowing to compute field properties from the current state of the field.

const schema = {
    fields: [{
        component: 'text-field',
        resolveProps: (props, {meta, input}, formOptions) => ({ helperText: input.value ? 'You set a value' : 'No value' })
    }]
}

All field props passed in the schema.

What are input and meta?

Input

Input is an object which contains field values and methods that change form state. See the selection of most important attributes:

{
  value: any, // any value of given form field. Its data type is based on field data type
  name: string, // unique name of form field. Value will be accessible under this key in form state
  onBlur: (event) => void, // function that should be triggered on field blur event
  onChange: (value) => void, // function that changes value of field in formState. Should be called whenever you want to change value of field
  onFocus: (event) => void, // function that should be triggered on field focus event
}

Every user interaction that updates field value in form state should also call input.onChange with correct value.

Meta

Meta is a object which contains meta information about field with given name. There is a lot of information about every field. Full list is here. These are commonly used meta informations

{
  error: any, // whatever your validation function returns
  pristine: bool, // true if the current value is === to the initial value, false if the values are !==.
  dirty: bool, // opposite of pristine
  touched: bool, //true if this field has ever gained and lost focus. false otherwise. Useful for knowing when to display error messages.
  valid: bool //true if this field has no validation or submission errors. false otherwise.
}

Object containing access to the form state. Read more here.

I. resolveProps cannot return actions. You can access actions's code in the resolveProps prop if you need it.

II. Do not use async functions to get the props.

III. Do not trigger any side effects, as it could introduce bugs.

IV. resolveProps are merged together with following priority: actions.resolveProps (highest) > field.resolveProps > mapper.resolveProps (lowest)

You can modify behavior for all components of the same type in your componentMapper via global component props.

const componentMapper = {
    'text-field': {
        component: TextField,
        resolveProps: () => { ... }
    }
}

You can get states of all other fields in the form via functions from formOptions. Don't forget to set the right subscription to trigger resolveProps functions from changing other fields.

Following example shows how can be a behavior of components changed using resolveProps. In this example, the component will have different color and helper text after it is validated.