Hero Hook Form API / FieldArrayField

Function: FieldArrayField()

FieldArrayField<TFieldValues>(props): Element | null

Defined in: fields/FieldArrayField.tsx:77

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.

Examples


import { FieldArrayField, FormFieldHelpers } from "@rachelallyson/hero-hook-form";
 
const fields = [
  FormFieldHelpers.input("name", "Name"),
  FieldArrayField({
    config: {
      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 validation:


const schema = z.object({
  addresses: z.array(z.object({
    street: z.string().min(1, "Street is required"),
    city: z.string().min(1, "City is required"),
  })).min(1, "At least one address is required"),
});

See

ConditionalField for conditional single fields
DynamicSectionField for conditional field groups