ArrayField

The ArrayField component renders the "array" field type — a repeatable list of items shaped by an item template (field.fields), with built-in Add/Remove controls.

See the Nested & Repeatable Fields guide for the full walkthrough and current limitations.

Props

• field: The field definition, including label and fields (the item template).
• value: The current list — Record<string, any>[].
• onChange: Callback invoked with the full updated array whenever an item changes, or one is added/removed.
• renderers: Custom renderer overrides, forwarded to each item's fields.
• locale: Current locale for label/placeholder resolution.

Features

• Renders one bordered block per item, using the item template's fields in a responsive grid.
• "+ Add" appends a new, empty item; "Remove" deletes a single item.
• Each item's fields are scoped to that item — no id collisions between items or with the rest of the form.

Example Usage

{
  id: "contacts",
  type: "array",
  label: "Contacts",
  fields: [
    { id: "name", type: "text", label: "Name" },
    { id: "email", type: "email", label: "Email" },
  ],
}
// values.contacts is then a list of { name, email } objects

Customization

Override the whole array's rendering by passing a renderers map to FormBuilder with an array entry pointing at your own component — useful if you want a different add/remove UI (icon buttons, drag-to-reorder, etc.).