GroupField

The GroupField component renders the "group" field type — a bordered, labeled cluster of nested fields. It does not introduce a nested object shape: each nested field keeps its own top-level id in the form's flat values object.

See the Nested & Repeatable Fields guide for the full walkthrough.

Props

• field: The field definition, including label and fields (the nested field definitions).
• allValues: The full current form values, so nested fields can read/write their own top-level slot.
• onFieldChange: (id, value) => void — dispatches a nested field's change up to the form.
• getFieldError: (id) => string | undefined — looks up a nested field's current error.
• renderers: Custom renderer overrides, forwarded to nested fields.
• locale: Current locale for label/placeholder resolution.

Features

• Renders nested fields in a responsive grid, same as a Section.
• Respects each nested field's own visibleWhen condition.
• Custom renderers passed to the parent FormBuilder apply to nested fields too.

Example Usage

{
  id: "address",
  type: "group",
  label: "Address",
  fields: [
    { id: "street", type: "text", label: "Street" },
    { id: "city", type: "text", label: "City" },
  ],
}

Customization

Override the whole group's rendering by passing a renderers map to FormBuilder with a group entry pointing at your own component.