Atlas Forms
Header Control
The header type renders a section heading inside the form canvas. Use headers to visually divide long forms into named sections without using the Sections layout control. Supports heading levels h1–h6, optional divider lines, and subtitle text.
Minimal Example
{
"id": "personal-info-header",
"type": "header",
"label": "Personal Information",
"order": 1,
"width": "full"
}Settings Reference
| Setting | Type | Default | Description |
|---|---|---|---|
level | 1–6 | 2 | HTML heading level (h1–h6) |
subtitle | string | — | Secondary text displayed below the heading |
divider | boolean | false | Show a horizontal rule below the heading |
dividerStyle | solid | dashed | dotted | solid | Style of the divider line when divider: true |
align | left | center | right | left | Text alignment of the heading and subtitle |
icon | string (FA class) | — | Icon displayed before the heading text |
topMargin | none | sm | md | lg | md | Spacing above the heading |
Heading Levels
Choose the heading level based on the hierarchy of your form sections:
| Level | HTML | Recommended Use |
|---|---|---|
| 1 | <h1> | Form title (usually set by the form itself, not a header control) |
| 2 | <h2> | Top-level section headings (default) |
| 3 | <h3> | Sub-sections within a section |
| 4 | <h4> | Group labels within a sub-section |
| 5–6 | <h5>–<h6> | Rarely used in forms; for deeply nested structures |
Section with Subtitle and Divider
{
"id": "financial-section-header",
"type": "header",
"label": "Financial Information",
"order": 10,
"width": "full",
"settings": {
"level": 2,
"subtitle": "Provide your annual income and any existing credit obligations",
"divider": true,
"dividerStyle": "solid",
"topMargin": "lg"
}
}Header with Icon
{
"id": "security-header",
"type": "header",
"label": "Security Settings",
"settings": {
"level": 2,
"icon": "fa-solid fa-lock",
"divider": true
}
},
{
"id": "contact-header",
"type": "header",
"label": "Contact Information",
"settings": {
"level": 2,
"icon": "fa-solid fa-address-card",
"divider": true
}
}Header vs Section vs Tab
| Structure | Use When |
|---|---|
header control | Visual divider only; all controls on one scrollable page |
| Sections layout | Logical grouping with optional collapse; controls are part of a panel |
| Tabs layout | Step-by-step or topic-based navigation; only one section visible at a time |
Conditional Header Visibility
Header controls support visibilityRule like any other control. This is useful for forms where entire sections are conditionally shown:
{
"id": "business-info-header",
"type": "header",
"label": "Business Information",
"settings": { "level": 2, "divider": true },
"visibilityRule": "values['account-type'] === 'business'"
}