field

A decorator that supplies your component with all the necessary callbacks and data.

Props

name: string

• The name of your component. Required.

form: string

• The name of your form. Required if you didn't use the Form component.

Note: you have to create the form yourself via the addForm action if you decide to supply the form prop directly.

Optional props

validate: (value: any) => string | null

• Validation function - should return null if valid, else an error string

normalize: (value: any) => any

• Value normalize function - use it to transform values to your desired format (e.g. value => value.toUpperCase())

defaultValue: any

• A default value for the field. Your field will initialize with this value, and will determine whether the field is dirty or not. Defaults to ''.

Supplied props

field supplies all data, handlers and field information in input and meta objects alongside any custom props you provide.

Input props:

These are meant to be all placed onto your native input, select or textarea fields. Feel free to use the spread operator.

name: string

• The name of the input

value: any

• The value of the field

checked?: boolean

• Supplied for checkboxes if value is a boolean

onChange

• On change handler. Accepts both events and values

onFocus

• On focus handler

onBlur

• On blur handler. Accepts both events and values

Meta props:

Contain information about the field.

error: string | null

• Error string, or nothing if the field is valid

active: boolean

• If the component's currently being focused

visited: boolean

• If the component's ever been focused

touched: boolean

• If the component's ever been blurred, or there was an attempt to submit the form

dirty: boolean

• If current field value differs from the default value

String components have all input and any custom props supplied to them. Custom components receive input and meta props as objects, along with your custom props.

Example

One string and one custom component field, one with normalize and one with validate:

import { Form, field } from 'redux-forms-react';

const toLower = value => value.toLowerCase();
const minLength = value => value.length < 5 ? 'Too short' : null;

const Input = props => (
    <div className="Input">
        {props.meta.touched && props.meta.error && (
            <div className="Input-error">{props.meta.error}</div>
        )}
        <label className="Input-label" htmlFor={props.input.name}>
            <input
                {...props.input}
                id={props.input.name}
                type={props.type}
            />
        </label>
    </div>
);

const InputField = field(Input);

const MyForm = props => (
    <Form name="contact" onSubmit={props.onSubmit}>
        <InputField
            name="username"
            normalize={toLower}
        />
        <InputField
            name="password"
            validate={minLength}
        />
    </Form>
);

export default MyForm;

Your data will then look something like this:

{
  username: 'oreqizer',
  password: 'hax9001',
}