Groups & layouts

Keep meaning stable while changing the presentation.

{
  "type": "group",
  "key": "contact",
  "variant": "basic",
  "view": {
    "label": "Contact"
  },
  "render": {
    "type": "row",
    "settings": {
      "gap": 16,
      "columns": 2,
      "wrap": true
    }
  },
  "subform": [
    {
      "type": "text",
      "key": "contact.name"
    },
    {
      "type": "text",
      "variant": "email",
      "key": "contact.email"
    }
  ]
}

Basic and sectioned

Basic groups accept fields, groups and repeaters. Sectioned groups require basic groups as direct children; each child is a section, tab or step. Renderers declare the variant they support.

Settings

Gap is an integer from 0 to 128 pixels. Row columns are integers from 1 to 12. Alignment is start, center, end or stretch. Disclosure and overlay renderers accept initiallyOpen; overlays also accept triggerLabel. Sectioned renderers accept initialSection, which must be the full key of a direct child.

Each renderer rejects unknown settings. Switching a renderer in the editor emits only that renderer’s settings. Current navigation is kept in the UI and does not enter form values. Invalid inactive fields reveal their enclosing sections on submit.