Working with Sections

What is a Section?

A section is a named group of controls. In a simple flat form, all controls might live in one section. In a complex form, you might have sections for "Company Details", "Contact Information", "Bank Details", and "Documents".

The section schema:

{
  "id": "section-company",
  "label": "Company Details",
  "order": 0,
  "collapsible": true,
  "defaultCollapsed": false,
  "description": "Enter the company's primary information"
}

Adding Sections

Click Add Section in the canvas toolbar. A new section appears at the bottom of the form. Give it a meaningful label — the label appears as a section header in the rendered form.

Section Properties

Reordering Sections

Drag the section header to reorder sections. The order property is updated automatically. Controls within each section maintain their relative order.

Sections and Layout Controls

Layout controls like Tabs and Accordion do not contain controls directly — instead they reference sections by ID. This is a key design distinction:

• You create sections and put controls in them
• You add a Tabs layout control to the form
• In the Tabs configuration, you map each tab to a section ID
• The form renderer places each section's controls inside the corresponding tab

// Tabs control referencing sections
{
  "id": "main-tabs",
  "type": "tabs",
  "label": "Form Sections",
  "settings": {
    "tabs": [
      { "label": "Company", "sectionId": "section-company" },
      { "label": "Contacts", "sectionId": "section-contacts" },
      { "label": "Banking", "sectionId": "section-banking" }
    ],
    "defaultTab": 0,
    "lazy": true
  }
}

Collapsible Sections

Mark a section as collapsible to let users hide it when not in use. This is especially useful for optional information blocks or advanced settings. The defaultCollapsed flag sets the initial state — useful for less-critical sections that should be available but not prominent.

Deleting a Section

Right-click the section header and choose Delete. You will be prompted to choose what happens to the controls in the section:

• Move to another section — Select a target section from the dropdown
• Delete controls too — Permanently removes the section and all its controls