A schema is an object consists of fields:

{
fields: []
}

Other attribues, such as title or description, can be used in form templates.

{
// required
component: 'text-field',
name: 'login',
// optional
actions: { ... },
clearedValue: null,
clearOnUnmount: true,
condition: { ... },
dataType: 'string',
hideField: true,
initializeOnMount: true,
initialValue: 'default-login',
resolveProps: (props) => ({ label: props.label || 'default label' }),
validate: [ ... ],
// + component specific attributes
...componentSpecificAttributes
}

string

component is a string value representing used component. Available options depends on the component mapper. Data Driven Forms automatically checks if the component is available, if not, it shows an error message. You use componentTypes to prevent typos.


string

name represents the variable the form value is stored in. You can use dot notatiton to create nested objects.

{
...,
name: 'person.name'
}

will be transformed to

{
person: {
name: 'value'
}
}

object

An object that allows to map other properties to globally defined actions. For example, a select has lazy loaded option and with this you can define parameters for the function and keep them in a string format. Read more here.


any

A value that will be used if the field is cleared. Read more here.


bool

When true, the value will be cleared after the component is unmounted. Read more here


object | array

condition allows to hide/show field when a condition is fulfilled.

Example:

{
...,
condition: {
when: 'first-name',
is: 'Douglas'
}
}

A field with this configuration will be shown only if the first name is Douglas.

There are multiple condition types: and, or, not, sequence that can be nested.

And there are multiple matchers: is, isEmpty, isNotTempy, pattern. Some of these matchers can be inverted by using notMatch.

There are also two actions that can be binded to conditions: set and visible.


one of strings: integer | float | number | boolean | string

Data type sets the type the value will be converted to. Read more here.


bool

When true, then this will be hidden by CSS. The value will be still registered and submitted.


bool

When true, the value will be re-initialized every time the component is mounted. Read more here.


any

Sets an initial value of the field. Read more here.


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. Read more here.


array

validate array sets up validation of the field. It is an array of objects/functions:

object

{
...,
validate: [{type: 'required'}]
}

Type is one of our provided validators: required, length, URL, pattern, number value. You can use validatorTypes to prevent typos.

Or you can implement your own via creating a validator mapper.

function

You can pass a custom function:

{
...,
validate: [function]
}

This also supports using async functions.


Each component defines its required and optional props. Read more here.

{
component: 'text-field',
name: 'password',
label: 'Enter password', // component defined prop
type: 'password', // component defined prop
helperText: 'Please enter your password' // component defined prop
}