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.
PropTypeDefaultDescription
titlestring—Heading displayed in the panel title bar
iconstring—Material Design icon name (without the mdi- prefix, e.g. file-document) shown to the left of the title. Requires title to be set (no header renders without a title)
descriptionstring—One-line subtitle rendered below the title. Requires title
iconColorstring—Tailwind color token that renders the icon inside a tinted, avatar-style rounded tile. Requires both title and icon. Allowed tokens: blue, indigo, violet, purple, fuchsia, pink, rose, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, slate. An unrecognized token falls back to a neutral grey tile
collapsiblebooleanfalseWhen true, adds a toggle to collapse/expand the panel body
colSpannumber (1-12)—Number of grid columns the panel should span
groupTaxonstring—Taxonomy path; creates a tab for each data object at that path. See Data Binding
mustExpandbooleanfalseWhen true AND collapsible: true, the panel starts collapsed and a reviewer must expand it at least once before a gatedByCompleteness task action can fire. Ignored (with a warning) when the panel is not collapsible. See Gating actions on completeness
mustScrollbooleanfalseWhen true, the reviewer must scroll to the end of the panel body (a bottom sentinel must enter the viewport) before the requirement is satisfied. Useful for long instruction blocks
serviceBridgeServiceBridgeConfig—Connects the panel to an external API via a service bridge. See Bridge API
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 
{
  "component": "v2:panel",
  "props": {
    "title": "Claim Details",
    "collapsible": true
  },
  "children": []
}
A panel header can combine an icon, a tinted tile, and a one-line description: 
{
  "component": "v2:panel",
  "props": {
    "title": "Invoice Details",
    "description": "Charges and line items for this shipment",
    "icon": "file-document",
    "iconColor": "blue",
    "collapsible": true
  },
  "children": []
}
A “Review Instructions” panel can require the reviewer to expand and read to the end before a gated action becomes available: 
{
  "component": "v2:panel",
  "props": {
    "title": "Review Instructions",
    "icon": "information-outline",
    "collapsible": true,
    "mustExpand": true,
    "mustScroll": true
  },
  "children": []
}

​
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.
PropTypeDefaultDescription
titlestring—Title for the tabs component itself
iconstring—Icon identifier displayed alongside the title
tabsstring[]—Explicit tab labels; when omitted, labels are auto-detected from child title props
mustViewnumber[]—Zero-based indices of tabs a reviewer must click into before gated task actions can fire. The first-rendered tab counts as already viewed; remaining required tabs show an amber dot in their header and a banner (N tabs to review before continuing) until visited
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 
{
  "component": "v2:tabs",
  "props": {
    "tabs": ["Charges", "Line Items", "Route"],
    "mustView": [1, 2]
  },
  "children": []
}
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. 
{
  "component": "v2:tabs",
  "props": {
    "tabs": ["Income", "Expenses"]
  },
  "children": [
    {
      "component": "v2:panel",
      "props": { "title": "Income" },
      "children": []
    },
    {
      "component": "v2:panel",
      "props": { "title": "Expenses" },
      "children": []
    }
  ]
}

​
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).
PropTypeDefaultDescription
gapnumber—Custom gap override (in pixels)
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.
PropTypeDefaultDescription
spannumber (1-12)autoNumber of grid columns to occupy
gapnumber16Gap between sibling columns in pixels
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 
{
  "component": "v2:row",
  "children": [
    {
      "component": "v2:col",
      "props": { "span": 6 },
      "children": []
    },
    {
      "component": "v2:col",
      "props": { "span": 6 },
      "children": []
    }
  ]
}

​
v2:divider

A horizontal separator line used to visually break sections within a panel or other container.
PropTypeDefaultDescription
classstringmy-4 border-borderCSS class override for custom styling
Supports children: no

​
v2:alert

A colored message box for displaying notices, warnings, or status messages within a form.
PropTypeDefaultDescription
type"info" | "warning" | "success" | "error""info"Controls the alert color scheme
textstring (required)—Message body
strongstring—Bold prefix text displayed before the message body
Supports children: no 
{
  "component": "v2:alert",
  "props": {
    "type": "warning",
    "strong": "Attention:",
    "text": "This claim has unresolved exceptions."
  }
}

​
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. 
{
  "version": "2",
  "nodes": [
    {
      "component": "v2:panel",
      "props": {
        "title": "Policy Overview",
        "collapsible": true
      },
      "children": [
        {
          "component": "v2:row",
          "children": [
            {
              "component": "v2:col",
              "props": { "span": 6 },
              "children": [
                {
                  "component": "v2:attributeEditor",
                  "props": { "tagPath": "Policy/PolicyNumber" }
                }
              ]
            },
            {
              "component": "v2:col",
              "props": { "span": 6 },
              "children": [
                {
                  "component": "v2:attributeEditor",
                  "props": { "tagPath": "Policy/EffectiveDate" }
                }
              ]
            }
          ]
        },
        {
          "component": "v2:divider"
        },
        {
          "component": "v2:alert",
          "props": {
            "type": "info",
            "strong": "Note:",
            "text": "Review both columns before approving."
          }
        }
      ]
    }
  ]
}
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.