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 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

export default () => (
  <Form formId="user" initialFields={initialFields}>
    /* form fields */

Per-Component Initialization

Instead of initializing each field instance separately, we can also add some default data to the whole component. It will be used to initialize every field instance of that component.
We can use asField's second parameter to achieve that. It takes a function of the passed component props and returns an object with default field data. Alternatively, it also accepts a plain object with data.


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

const Input = ({
}) => {
  function onInput(e) {
    const nextValue =

      isValid: nextValue.length > 0,
      value: nextValue

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

export default asField(Input, ({ defaultValue = '' }) => ({
  isValid: defaultValue.length > 0,
  isRequired: true,
  value: defaultValue

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 ""