React form renderer is using react-final-form for form state management. Most of its features are not directly available for consistency and performance reasons. If you want to create any custom components, you can access these features via FieldProvider component or useFieldApi hook.

FieldProvider is a wrapper using useFieldApi to get the access to the form state. It's recommended to use the hook. You can read more about that in Component mapping.

nametypedescription
ComponentcomponentA component that receives all field props + meta + input.
renderfunctionA render function that receives all field props + meta + input.

Next example shows simple input field with label and error message.

import React from 'react';


import FieldProvider from '@data-driven-forms/react-form-renderer/field-provider';


const CustomComponent = ({input, meta, label}) => (
    <div>
      <label>{label}</label>
      <input {...input} />
      {meta.error && <label>{meta.error}</label>}
    </div>
);


const WrappedComponent = (props) => <FieldProvider Component={CustomComponent} {...props} />;


export default WrappedComponent;

What are meta and input?


meta

meta is an object which contains meta information about field with given name. There is a lot of information about every field.

Here is the full list of commonly used meta information.

{
  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.
}

input

input is an object, which contains field values and methods that change form state.

See the selection of the 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.