<ReactFormField>

Renders an individual form field and exposes field-specific state and methods through render props. Use the name prop to specify which field to render, then bind the provided context to your custom input components.

<ReactForm>
  {({ context }) => (
    <ReactFormFields>
      <ReactFormField name="email">
        {({
          error,
          label,
          name,
          value,
          updateValue,
          field,
        }) => (
          <>
            <label>{label}</label>
            <input type="email" {...field} />
            {error && <span>{error.message || error}</span>}
          </>
        )}
      </ReactFormField>
    </ReactFormFields>
  )}
</ReactForm>

This approach gives you complete control over how each field is rendered while ReactForm handles state management automatically.

Props

name

• Type: String
• Required

The field name from your fields configuration

className

• Type: String
• Optional
• Default: "react-form__field"

CSS class name for the field container.

Render Props

The only render prop available in <ReactFormField> is the default render prop. It exposes a set of variables that you can access.

Render Prop Properties

Key	Description
error	Object|String|null The field specific error. Can be an object with message property or a string.
label	String The display label for the field. If the field is defined as a string (e.g., 'first_name'), the label is automatically generated in CapitalCase (e.g., "First Name").
name	String The field name
value	Any The current value of the field
updateValue	Function You can manually set value with this function
field	Object Use this to bind to native HTML input elements or React controlled components. Contains value, onChange, and onBlur properties.

Usage Examples

With Native HTML Input

<ReactFormField name="email">
  {({ field, label, error }) => (
    <>
      <label>{label}</label>
      <input type="email" {...field} />
      {error && <span>{error.message || error}</span>}
    </>
  )}
</ReactFormField>

With Radio Buttons

<ReactFormField name="gender">
  {({ field, value, label, error }) => (
    <>
      <label>{label}</label>
      <label htmlFor="male">
        <input
          id="male"
          type="radio"
          {...field}
          value="male"
          checked={value === "male"}
        />
        <span>Male</span>
      </label>
      <label htmlFor="female">
        <input
          id="female"
          type="radio"
          {...field}
          value="female"
          checked={value === "female"}
        />
        <span>Female</span>
      </label>
      {error && <span>{error.message || error}</span>}
    </>
  )}
</ReactFormField>

Manual Value Update

<ReactFormField name="email">
  {({ updateValue, value }) => (
    <>
      <input
        value={value || ""}
        onChange={(e) => updateValue(e.target.value)}
      />
      <button onClick={() => updateValue("")}>Clear</button>
    </>
  )}
</ReactFormField>