Object fields

An object field recursively renders properties inside z.object(). defaultValues must follow the same nested structure. The inferred metadata type is object, and submitted values remain nested, such as value.profile.firstName.

Usage

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

const schema = z.object({
  profile: z.object({ firstName: z.string(), lastName: z.string() }),
});

<ErlForm
  form={form}
  schema={schema}
  fieldConfig={{
    profile: {
      firstName: { label: "First name" },
      lastName: { label: "Last name" },
    },
  }}
/>

Put child configuration directly under its parent. For example, profile.firstName and company.firstName can have different labels without collisions. A child callback receives its immediate parent object.

Object children share a responsive grid. Set layout on each child, for example md: 6, for two columns. Label and placeholder are input options, not object options; use a root section heading or custom container for an object heading.