Layout Controls Overview — Layout Controls

The Layout Control Types

tabs

Tabbed navigation. Each tab shows a different set of controls. Supports lazy loading.

accordion

Expandable sections. One or multiple items open at a time.

card-container

Bordered/shadowed card. Optional title. Collapsible variant.

stepper

Multi-step wizard. Validates each step before advancing.

collapsible-panel

Single panel with show/hide toggle. Simpler than accordion.

modal

Button-triggered modal dialog containing a sub-form.

breadcrumb

Navigation path display. Clickable history trail.

sidebar-nav

Left-side navigation menu. Active item tracking.

data-table

Repeatable row grid. Addable, deletable, sortable rows. Key layout for line items.

api-response-viewer

Calls an API and displays the JSON response. Useful for previewing data.

Layout Controls vs Sections

Atlas Forms has two ways to organise controls:

Feature	Form Sections	Layout Controls
Definition	Top-level `sections[]` array in form schema	Control inside `controls[]` array
Nesting	Cannot be nested	Layout controls can contain sections and other controls
Designer support	Full palette panel support	Full palette panel support
Best for	Top-level form organisation	Sub-grouping within a section

Nesting Rules

Layout controls can contain input controls, display controls, and other layout controls
The data-table can be inside a card-container or accordion item
A stepper should not be nested inside another stepper — use sections for sub-structure
Controls inside a tabs layout reference sections by sectionId — not by inline control lists

How tabs and accordion Reference Content

The tabs and accordion layout controls do not contain controls directly. Instead, each tab/accordion item references a sectionId. The controls defined in that section appear as the tab content:

{
  "id": "main-tabs",
  "type": "tabs",
  "settings": {
    "tabs": [
      { "label": "Personal Info", "sectionId": "section-personal" },
      { "label": "Employment",    "sectionId": "section-employment" },
      { "label": "Documents",     "sectionId": "section-documents" }
    ]
  }
}

// The sections referenced above:
"sections": [
  { "id": "section-personal", "controls": [...] },
  { "id": "section-employment", "controls": [...] },
  { "id": "section-documents", "controls": [...] }
]

Data Table — the Most Important Layout Control

The data-table is the most commonly used layout control. It renders a grid of rows where each row is a record — essential for invoice line items, repeatable schedules, team member lists, and any scenario requiring multiple structured entries. See Data Table and Data Table Patterns for full details.

Next: Tabs →