> ## Documentation Index > Fetch the complete documentation index at: https://developer.kodexa.ai/llms.txt > Use this file to discover all available pages before exploring further. # Layout Components > Reference for Kodexa data form layout components: panels, tabs, rows, columns, dividers, and alerts for structuring form layouts and visual hierarchy. 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. | Prop | Type | Default | Description | | --------------- | --------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `title` | `string` | -- | Heading displayed in the panel title bar | | `icon` | `string` | -- | 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) | | `description` | `string` | -- | One-line subtitle rendered below the title. Requires `title` | | `iconColor` | `string` | -- | 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 | | `collapsible` | `boolean` | `false` | When true, adds a toggle to collapse/expand the panel body | | `colSpan` | `number` (1-12) | -- | Number of grid columns the panel should span | | `groupTaxon` | `string` | -- | Taxonomy path; creates a tab for each data object at that path. See [Data Binding](/guides/data-forms/data-binding) | | `mustExpand` | `boolean` | `false` | When 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](/guides/task-templates/gating-actions-on-completeness) | | `mustScroll` | `boolean` | `false` | When 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 | | `serviceBridge` | `ServiceBridgeConfig` | -- | Connects the panel to an external API via a service bridge. See [Bridge API](/guides/data-forms/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](/guides/task-templates/gating-actions-on-completeness) for the conceptual explanation and how `gatedByCompleteness` task actions consume these requirements. **Supports children:** yes ```json theme={null} { "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: ```json theme={null} { "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: ```json theme={null} { "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. | Prop | Type | Default | Description | | ---------- | ---------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `title` | `string` | -- | Title for the tabs component itself | | `icon` | `string` | -- | Icon identifier displayed alongside the title | | `tabs` | `string[]` | -- | Explicit tab labels; when omitted, labels are auto-detected from child `title` props | | `mustView` | `number[]` | -- | 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](/guides/task-templates/gating-actions-on-completeness) for how those actions consume it. **Supports children:** yes ```json theme={null} { "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. ```json theme={null} { "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). | Prop | Type | Default | Description | | ----- | -------- | ------- | ------------------------------- | | `gap` | `number` | -- | 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. | Prop | Type | Default | Description | | ------ | --------------- | ------- | ------------------------------------- | | `span` | `number` (1-12) | auto | Number of grid columns to occupy | | `gap` | `number` | `16` | Gap 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 ```json theme={null} { "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. | Prop | Type | Default | Description | | ------- | -------- | -------------------- | ------------------------------------- | | `class` | `string` | `my-4 border-border` | CSS class override for custom styling | **Supports children:** no ## v2:alert A colored message box for displaying notices, warnings, or status messages within a form. | Prop | Type | Default | Description | | -------- | --------------------------------------------- | -------- | -------------------------------------------------- | | `type` | `"info" \| "warning" \| "success" \| "error"` | `"info"` | Controls the alert color scheme | | `text` | `string` (required) | -- | Message body | | `strong` | `string` | -- | Bold prefix text displayed before the message body | **Supports children:** no ```json theme={null} { "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. ```json theme={null} { "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.