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
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
serviceBridgeServiceBridgeConfig—Connects the panel to an external API via a service bridge. See Bridge API
Supports children: yes 
{
  "component": "v2:panel",
  "props": {
    "title": "Claim Details",
    "collapsible": 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
Supports children: yes 
{
  "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.