Layout components structure how fields and sections are displayed within a form. These elements control grouping, sizing, and tab/section-based navigation. Use them to organize interfaces clearly for review, exception handling, or user input.
Container
Description
A single-column visual wrapper that holds other components. It does not affect the data path or logic of the components placed inside.
Parameters
- Label: optional text label for the container.
- Height mode:
Auto (grows with content, default) / Fill (stretches to fill its parent) / Fixed (set an explicit height value + unit — px, vh, or %).
- Resizable: (Checkbox) lets the user drag to resize the container's height.
- Show border: (Checkbox) adds a visible border around the container.
- Background color / Border color.
Grid (Columns)
Description
Displays components side by side across 1–12 columns. This is the same component referenced elsewhere as "Columns" — use it to create structured, side-by-side layouts.
Parameters
- Columns: 1–12. Use + Add column / the delete icon on each column to change the count.
- Per-column settings: label, width, and text format for each column header.
- Column header text format: shared text formatting applied to column headers.
- Resizable: (Checkbox) allows dragging to resize individual column widths.
- Height mode:
Auto / Fill / Fixed (+ value/unit), same as Container.
- Column gap: spacing between columns.
- Divider: (Checkbox) shows a vertical divider line between columns.
- Background color / Border color.
- Collapsible: (Checkbox) — only available when the grid is set to a single column. Lets that single-column grid collapse/expand, functioning like a collapsible Container.
Accordion
Description
A container split into collapsible sections, each with its own title. Use this for long forms where users should focus on one section at a time.
Parameters
- Label: optional label for the accordion as a whole.
- Section title text format: shared text formatting applied to each section's title.
- Height mode:
Auto / Fill / Fixed (+ value/unit).
- Column gap, Background color, Border color.
Fields are attached to a specific section (not to the accordion directly), so moving a field between sections is a matter of reparenting it to that section's container.
Tabs
Description
A container that separates content into tabs. Only the active tab's contents are visible. Ideal for long forms or workflows with multiple logical sections.
Parameters
- Tabs: add, remove, and reorder tabs; each tab has its own label.
- Tab label text format: shared text formatting applied to tab labels.
- Show icons: (Checkbox) lets each tab display an icon alongside its label.
- Height mode:
Auto / Fill / Fixed (+ value/unit).
- Tab style: e.g. underline.
- Orientation:
Horizontal (default) / Vertical.
- Visibility: each tab can have its own visibility condition, independent of the others.
Divider
Description
Inserts a horizontal line to visually separate sections of the form.
Parameters
- Style:
Solid (default) / Dashed / Dotted.
- Include label: (Checkbox) shows a text label alongside the line.
- Label text: the text shown when Include label is on (default "Section Divider").
