Nested arrays

Each company in this example has its own contacts array. Its defaults, controls, and nested field configuration follow that same structure. Adding a contact affects only the selected company's list.

Usage

Use your form instance from useForm. See the initial setup.

const schema = z.object({
  companies: z.array(z.object({
    name: z.string(),
    contacts: z.array(z.object({ phone: z.string() })),
  })),
});

<ErlForm
  form={form}
  schema={schema}
  fieldConfig={{
    companies: {
      name: { label: "Company" },
      contacts: { phone: { label: "Phone" } },
    },
  }}
/>

Configure the company fields under companies, then the contact fields under companies.contacts. A contact callback receives that contact object, so showIf can check its type without reading another company's data. A condition does not replace schema validation; keep both consistent.

For arrays without object items, use the recursive item pattern shown in Arrays. For tuples in an array, see Tuple.