Layout components structure how fields and sections are displayed within a form. These elements control grouping, alignment, visibility, and tab-based navigation. Use them to organize interfaces clearly for review, exception handling, or user input.
Description
A visual wrapper that holds other components. It does not affect the data path or logic of the components placed inside.
Parameters
Collapsible: (Checkbox) When enabled, the container can be collapsed or expanded in the UI.
Description
A repeatable container that allows multiple rows of the same field set. Use this when you need users to input multiple entries of a structured format—such as multiple items, approvals, or notes.
Parameters
Initially hidden: (Checkbox) Starts with one row by default. If enabled, the initial row is hidden until triggered.
Removable: (Checkbox) Adds an “X” button to each row to allow deletion.
Collapsible: (Checkbox) Allows collapsing or expanding the full group.
Selectable: (Checkbox) Enables selection of group rows. Often used in workflows where users choose specific rows for follow-up actions.
Select type: If Selectable is enabled, choose between:
Single-select
Multi-select
Functions
repeatRow(path) – Appends a new row to the group and returns the row path.
deleteRow(path) – Deletes the specified row from the group.
getGroupLength(path) – Returns how many rows currently exist in the group.
getSelectedGroups(path) – Returns selected rows if Selectable is active.
Events
on_<component_id>_change(path) – Triggered when a user deletes a group row. Returns the path of the deleted row.
Description
Displays components in horizontal columns. Use this to create side-by-side layouts for structured input.
Parameters
Resizable: (Checkbox) Allows resizing the width of each column.
Columns: Use the column editor to add or remove columns, define height, and control layout.
Sticky: (Checkbox, per column) Fixes a column in place during scroll.
Actions
+ Add column: Adds a new column to the grid.
Delete column: Remove a column via the trash icon on the right.
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, or rename tabs.
+ Add tab: Adds a new tab. Each tab can be removed via its own delete button.
Visibility: You can apply separate visibility conditions per tab.
Function
changeTab(path, index) – Changes the currently visible tab to the specified index.
Description
Inserts a horizontal line to visually separate sections of the form.
Parameters
Label: Optional text label shown above the divider.
Add info icon: (Checkbox) Adds a tooltip icon next to the label. You can configure the tooltip text in the component’s properties.