Groups and Sections

Forms can organize fields with form.groups or form.sections.

Groups

Groups render fieldsets inside the form. Fields not listed in any group render after grouped fields.

export const usersSchema = {
  resource: "users",
  form: {
    fields: [
      { name: "firstName", type: "text" },
      { name: "lastName", type: "text" },
      { name: "email", type: "email" },
      { name: "roleId", label: "Role", type: "select" },
      { name: "notes", type: "textarea" }
    ],
    groups: [
      {
        title: "Profile",
        fields: ["firstName", "lastName", "email"]
      },
      {
        title: "Access",
        fields: ["roleId"]
      }
    ]
  }
} as const;

Sections

Sections are also fieldsets, but use key, label, and title. Fields not listed in any section render after sectioned fields.

form: {
  sections: [
    {
      key: "profile",
      title: "Profile",
      fields: ["firstName", "lastName", "email"]
    },
    {
      key: "settings",
      title: "Settings",
      fields: ["roleId", "notes"]
    }
  ]
}

Grid

form.grid controls the field grid.

form: {
  grid: {
    columns: {
      base: 1,
      md: 2,
      xl: 3
    },
    gap: "gap-4"
  }
}

Rendering priority

The runtime chooses the first matching layout pattern:

layout.type: "tabs"
layout.type: "wizard"
form.groups
form.sections
plain field grid