Skip to main content
Layout components structure the visual arrangement of a data form. They act as containers that hold other components — including both data components and other layout components — to create the form’s hierarchy.

​
v2:panel

The primary container for grouping form content. Panels render a bordered card with an optional title bar and support collapsing, grid-column spanning, repeating over data objects, and service bridge integration. The icon and description props only appear when title is set, and the tinted icon tile requires icon and iconColor together (set icon without iconColor for a plain inline icon). mustExpand and mustScroll are part of the per-form Form Completeness Gate: while a requirement is unmet, an amber dot appears next to the panel title. See Gating actions on completeness for the conceptual explanation and how gatedByCompleteness task actions consume these requirements. Supports children: yes
A panel header can combine an icon, a tinted tile, and a one-line description:
A “Review Instructions” panel can require the reviewer to expand and read to the end before a gated action becomes available:

​
v2:tabs

A tabbed container that renders each direct child as a separate tab. Tab labels are derived from each child’s title prop by default, or can be set explicitly with the tabs array. mustView is part of the per-form Form Completeness Gate. Each required tab that has not yet been opened registers an outstanding requirement, and a gatedByCompleteness task action stays disabled until every requirement clears. See Gating actions on completeness for how those actions consume it. Supports children: yes
In the example above, the first tab (Charges, index 0) is treated as already viewed, while Line Items (index 1) and Route (index 2) must each be opened before a gated action can fire.

​
v2:row

A horizontal flex container that lays out its children in a row with wrapping. The default gap between children is gap-x-4 gap-y-1 (Tailwind utility classes applied automatically). Supports children: yes

​
v2:col

A column within a 12-column grid system. Columns calculate their width as a fraction of 12 and account for gap spacing between siblings automatically. When span is omitted, the column auto-calculates its width based on the number of sibling columns. For example, three columns in a row each receive an effective span of 4 (12 / 3). Supports children: yes

​
v2:divider

A horizontal separator line used to visually break sections within a panel or other container. Supports children: no

​
v2:alert

A colored message box for displaying notices, warnings, or status messages within a form. Supports children: no

​
Composite Example

The following example combines several layout components into a realistic form structure: a panel containing a two-column row, a divider, and an alert.
The panel wraps everything with a collapsible title bar. Inside, a row splits two attribute editors into equal columns (span 6 each). A divider separates the editors from an informational alert at the bottom.