Hero Hook Form API / FieldArrayField

Function: FieldArrayField()

FieldArrayField<TFieldValues>(props): Element | null

Defined in: fields/FieldArrayField.tsx:139

Field array component for dynamic repeating field groups.

Type Parameters

TFieldValues

TFieldValues extends FieldValues

The form data type

Parameters

props

FieldArrayFieldProps<TFieldValues>

Component props

Returns

Element | null

The rendered field array with add/remove controls

Description

Allows users to add and remove multiple instances of a field group. Useful for forms with repeating data like addresses, items, or contacts. Automatically manages field array state and provides add/remove buttons. Supports reordering, custom item rendering, default values, and conditional fields within items.

Examples

Basic usage:


import { FieldArrayField, FormFieldHelpers } from "@rachelallyson/hero-hook-form";
 
const fields = [
  FormFieldHelpers.input("name", "Name"),
  {
    type: "fieldArray",
    name: "addresses",
    label: "Address",
    fields: [
      FormFieldHelpers.input("street", "Street Address"),
      FormFieldHelpers.input("city", "City"),
      FormFieldHelpers.input("zipCode", "ZIP Code"),
    ],
    min: 1,
    max: 5,
    addButtonText: "Add Address",
    removeButtonText: "Remove Address",
  },
];

With reordering:


{
  type: "fieldArray",
  name: "slots",
  label: "Question Slots",
  enableReordering: true,
  reorderButtonText: { up: "↑", down: "↓" },
  fields: [
    FormFieldHelpers.select("slotType", "Slot Type", options),
  ],
}

With custom item rendering:


{
  type: "fieldArray",
  name: "items",
  renderItem: ({ index, children, onMoveUp, onMoveDown, onRemove }) => (
    <Card className="p-4">
      <div className="flex justify-between">
        <span>Item {index + 1}</span>
        <Button onPress={onRemove}>Remove</Button>
      </div>
      {children}
    </Card>
  ),
  fields: [...],
}

With default item:


{
  type: "fieldArray",
  name: "slots",
  defaultItem: () => ({
    order: 0,
    slotType: "STATIC",
    staticQuestionId: "",
  }),
  fields: [...],
}

With conditional fields within items:


{
  type: "fieldArray",
  name: "slots",
  fields: [
    FormFieldHelpers.select("slotType", "Slot Type", [
      { label: "Static", value: "STATIC" },
      { label: "Dynamic", value: "DYNAMIC" },
    ]),
    {
      ...FormFieldHelpers.select("staticQuestionId", "Question", questions),
      dependsOn: "slotType",
      dependsOnValue: "STATIC",
    },
  ],
}

See

ConditionalField for conditional single fields
DynamicSectionField for conditional field groups
createFieldArrayCustomConfig for advanced custom rendering