UI Section (Layout)
Groups fields in a grid or flex layout without adding a wizard step.
Overview
A ui_section is a layout-only container. Use it to place fields side-by-side (for example name and email in two columns) inside a step or at the root of the form. It does not collect submission data, show help text, or support required/reporting/integration settings.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| id | string | — | Unique field identifier (UUID in the builder). |
| type | string | ui_section | Must be "ui_section". |
| label | string | "" | Optional label (often empty; layout-only grouping). |
| layoutType | "grid" | "flex" | "grid" | Grid places children in columns; flex lays them out in a row. |
| gridColumns | number | 2 | Column count when layoutType is grid. |
| gap | number | 16 | Gap between child fields in pixels. |
| alignItems | string | "start" | Cross-axis alignment for flex/grid children. |
| justifyContent | string | "start" | Main-axis alignment for flex/grid children. |
| fields | FormField[] | [] | Child fields rendered inside this layout group. |
JSON Schema
{
"id": "ui_contact",
"type": "ui_section",
"label": "",
"layoutType": "grid",
"gridColumns": 2,
"gap": 16,
"fields": [
{ "id": "first_name", "type": "text", "label": "First Name", "required": true },
{ "id": "email", "type": "email", "label": "Email", "required": true }
]
}Common Use Cases
- Two-column contact blocks (name + email, city + zip)
- Flex rows of short fields (quantity + unit + price)
- Grouping inside a step_section without extra wizard pages
- Visual alignment only—no extra submission keys