Form Initialization

Sometimes, we want to initialize some form fields with default values or initial state. This can be especially helpful if we want to create persistent forms or auto-fill them with data received from a backend.

There are 5 different properties which we are able to initially set. Check out Basics: Fields to learn what they're used for. If not set, they will be automatically set to their default value.

Property Default
value ''
isEnabled true
isRequired false
isTouched false
isValid true

There are two different ways to initialize the form.

Per-Field Initialization

Per-Field Initialization is a form-based way to initialize special field instances and is only active for that single field instance. To achieve that, we can pass an initialFields object to our wrapping Form component.

The keys should match the fieldIds we pass to the field components inside the form while the value must be an object with field data values. We only have to provide the data we actually want to set initially, thus every data value is optional.


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

const initialFields = {
  firstname: {
    isRequired: true
  accepted_terms: {
    value: false,
    isValid: false,
    isRequired: true

// Usage
<Form formId="user" initialFields={initialFields} render={...} />

Per-Component Initialization

Instead of initializing each field instance separately, we can also add some default field data to the Field component. It will be used to initialize every field instance of that component.


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

function Input({ fieldId, defaultValue = '' }) {
  const renderInput = ({ value, updateField }) => (
    <input value={value} onChange={e => {
      const nextValue =

        isValid: nextValue.length > 0,
        value: nextValue
    }} />

  return (
        isValid: defaultValue.length > 0,
        value: defaultValue,
        isRequired: true,

Now we are able to use the component and always have isValid, isRequired and value set automatically. If we pass a defaultValue-prop, it will automatically initialize the value and isValid field data property correctly.


We are also able to mix both methods to achieve even more precise initialization. While doing so, the per-field data will overwrite per-component data properties and merge non-conflicting ones.

results matching ""

    No results matching ""