react-data-form

Groups

Splitting a long form into collapsible sections.

Past a dozen fields a form stops being readable as one column. Groups cut it into titled sections without touching a single field description — each field simply declares which sections it belongs to.

What a group changes#

Only the rendering. createGroupForm swaps the form's components.formInputs for one that walks the sections, and leaves everything else alone: the payload, the validation and the submit handling are identical to an ungrouped form.

createGroupForm#

CompanyForm.tsx

import { createGroupForm } from "react-data-form/group"
import { FormElement, useForm } from "react-data-form"

const form = createGroupForm({
  label: { title: "Company account" },
  groupOption: {
    itemGroups: [
      { group: "identity", title: "Identity", order: 10, icon: User },
      { group: "company", title: "Company", order: 20, icon: Building2 },
      {
        group: "billing",
        title: "Billing",
        description: "Only used for invoices.",
        order: 30,
        icon: CreditCard,
        collapsible: true,
      },
    ],
  },
  inputs: {
    firstName: { label: "First name", groups: ["identity"] },
    lastName:  { label: "Last name", groups: ["identity"] },
    company:   { label: "Legal name", groups: ["company"] },
    vat:       { label: "VAT number", groups: ["company"] },
    iban:      { label: "IBAN", groups: ["billing"] },
  },
})

// `createGroupForm` returns a *built* form, so pass it straight through.
const formContext = useForm({ form })
return <FormElement {...formContext} />

Grouped form — the last section collapses

It returns a built form

createGroupForm hands back a built form, not a description. Pass it to useForm as-is; building it twice would throw away the values already in it. It also throws when groupOption.itemGroups is empty, rather than rendering an empty form.

The section description#

Name	Type	Default	Description
`group`required	`string`	—	The identifier fields refer to in their own `groups` array.
`order`required	`number`	—	Ascending. Sections are sorted by it, never by declaration order.
`title`	`string`	—	The section heading.
`description`	`string`	—	A line under the heading.
`icon`	`FC`	—	Shown beside the heading.
`collapsible`	`boolean`	—	Lets the reader fold the section away.
`name`	`string`	—	Free label, used by the step navigation when the form is a wizard.
`component.submitButton`	`FC`	—	A submit action for this section alone.

A field can be in several groups#

groups is an array, so the same field can appear in more than one section — useful when a summary section repeats a key field. A field with no groups at all belongs to none, and a grouped form will not render it.

Steps are groups, walked one at a time

Multi-step forms reuse this exact model: a step is an item group, and the wizard shows one at a time instead of all of them.