Field is the most common component.
It is used to render fully integrated form fields that ships all required methods and data.


Prop Type Default Description
fieldId (string) A (unique) identifier used to store the field data in our Redux store.
initialData (Object?) Default field data that is used to initialize the field. The data might be overwritten by initialFields set by the wrapping Form component.
render (Function) A render function that renders the component shape.
It's first parameter is an object containing the following properties.

Render Properties

Property Type Description
value (any) The controlled field value.
isEnabled (boolean) Indicates if the field is enabled.
isRequired (boolean) Indicates if the field is required.
isValid (boolean) Indicates if the field is valid.
isTouched (boolean) Indicates if the field is touched.
(Yields true as soon as the very first user input happens, but remains false for initialization).
state (Object) The form-scoped state
formId (string) The formId passed to the wrapping Form component.
fieldId (string) The fieldId passed to the component.
isFormValid (boolean) Indicates whether the whole form is valid or not.
updateField (Function) Updates the field data.
Accepts an object with isEnabled, isRequired, isTouched, isValid and value. Each value is optional though.
updateState (Function) Updates the form-scoped state.
Takes an object of new state keys and merges those with the existing state.


import { Field } from 'react-controlled-form'

function Input({ value, updateField }) {
  const onChange = e => updateField({ value: })

  return (
    <input value={value} onChange={onChange} />

// Usage
<Field fieldId="firstname" render={Input} />
<Field fieldId="lastname" render={Input} />

Tips & Tricks

  • To provide maximum accessibility, it is recommended to utilize the default DOM attributes such as disabled and required. We may use isEnabled and isRequired to set those attributes respectively.
  • Using onInput instead of onChange, onKeyPress or onKeyDown ensures that the event has the most recent value.
  • Field validation can easily be done within onChange. We can then set isValid within updateField to update the state. Altering the visual appearance depending on isValid helps to tell the user if the field is actually valid or not. Additional, we could show an error message if it's invalid.

results matching ""

    No results matching ""