Tabs

How Tabs Reference Sections

Tabs do not contain controls directly. Each tab entry has a sectionId that points to a form section. The controls defined in that section appear as the tab's content:

{
  "id": "applicant-tabs",
  "type": "tabs",
  "order": 1,
  "width": "full",
  "settings": {
    "tabs": [
      { "id": "tab-personal",    "label": "Personal",    "sectionId": "section-personal" },
      { "id": "tab-employment",  "label": "Employment",  "sectionId": "section-employment" },
      { "id": "tab-financial",   "label": "Financial",   "sectionId": "section-financial" },
      { "id": "tab-documents",   "label": "Documents",   "sectionId": "section-documents" }
    ],
    "defaultTab": "tab-personal"
  }
}

// Referenced sections in the same form:
"sections": [
  { "id": "section-personal",   "title": "Personal",   "controls": [...] },
  { "id": "section-employment", "title": "Employment", "controls": [...] },
  { "id": "section-financial",  "title": "Financial",  "controls": [...] },
  { "id": "section-documents",  "title": "Documents",  "controls": [...] }
]

Settings Reference

Tab Object Schema

interface TabDefinition {
  id: string;           // Unique tab identifier
  label: string;        // Tab label text
  sectionId: string;    // ID of the form section to display
  icon?: string;        // FontAwesome class (optional)
  disabled?: boolean;   // Grey out and prevent selection
  badge?: string;       // Static badge text (e.g., "New", "3")
}

Tab Variant Styles

Tabs with Icons

{
  "id": "settings-tabs",
  "type": "tabs",
  "settings": {
    "variant": "pills",
    "tabs": [
      { "id": "tab-general",   "label": "General",   "sectionId": "sec-general",   "icon": "fa-solid fa-gear" },
      { "id": "tab-security",  "label": "Security",  "sectionId": "sec-security",  "icon": "fa-solid fa-lock" },
      { "id": "tab-billing",   "label": "Billing",   "sectionId": "sec-billing",   "icon": "fa-solid fa-credit-card" },
      { "id": "tab-api",       "label": "API Keys",  "sectionId": "sec-api",       "icon": "fa-solid fa-key" }
    ]
  }
}

Validation Error Badges

When showBadge: true, each tab displays a count of validation errors in its section. This guides users to which tabs need attention before submission:

{
  "id": "application-tabs",
  "type": "tabs",
  "settings": {
    "showBadge": true,
    "tabs": [
      { "id": "tab-personal",  "label": "Personal",  "sectionId": "sec-personal" },
      { "id": "tab-financial", "label": "Financial", "sectionId": "sec-financial" }
    ]
  }
}

// If section-financial has 2 required fields empty:
// "Financial" tab shows a red badge with "2"

Lazy Loading

For forms with heavy content in non-default tabs, enable lazyLoad to defer rendering until the tab is first activated:

{
  "settings": {
    "lazyLoad": true,
    "keepMounted": false   // Unmount inactive tabs to free memory
  }
}