Atlas Forms
Label Control
The label type renders a plain text paragraph for informational content. Unlike input controls, the label control uses the description field as its text content — not label or defaultValue. Use it for instructions, help text, warnings, and contextual notes.
Minimal Example
{
"id": "instructions",
"type": "label",
"order": 1,
"width": "full",
"description": "Please complete all fields below. Fields marked with an asterisk (*) are required."
}How Description Becomes Content
The description field serves double duty in Atlas Forms:
- On input controls — rendered as help text below the input field
- On the label control — rendered as the main display content
This means a label control with no description renders nothing. Always set description.
Settings Reference
| Setting | Type | Default | Description |
|---|---|---|---|
style | default | muted | info | warning | success | error | default | Visual callout style applied to the paragraph |
icon | string (FA class) | — | FontAwesome icon class to prepend (e.g., "fa-solid fa-circle-info") |
fontSize | sm | md | lg | md | Text size variant |
fontWeight | normal | medium | bold | normal | Font weight |
align | left | center | right | left | Text alignment |
Style Variants
Use style to communicate different types of messages with appropriate visual treatment:
// Information note
{
"id": "privacy-note",
"type": "label",
"description": "Your information is protected under our Privacy Policy.",
"settings": { "style": "info", "icon": "fa-solid fa-shield-halved" }
},
// Warning
{
"id": "deadline-warning",
"type": "label",
"description": "Submissions after 5pm will be processed the next business day.",
"settings": { "style": "warning", "icon": "fa-solid fa-triangle-exclamation" }
},
// Success confirmation
{
"id": "eligibility-note",
"type": "label",
"description": "You are eligible for the enhanced rate based on your account history.",
"settings": { "style": "success", "icon": "fa-solid fa-circle-check" }
}Conditional Labels
Use visibilityRule to show labels only when certain conditions are met:
{
"id": "high-value-warning",
"type": "label",
"description": "Transactions over $10,000 require additional documentation. Please attach supporting documents below.",
"settings": { "style": "warning" },
"visibilityRule": "values['amount'] > 10000"
},
{
"id": "standard-info",
"type": "label",
"description": "Standard processing applies. Funds typically clear within 2 business days.",
"settings": { "style": "info" },
"visibilityRule": "values['amount'] <= 10000"
}Mode Visibility
Instructions labels are typically only needed in edit mode. Hide them in view and print modes:
{
"id": "form-instructions",
"type": "label",
"description": "Complete sections A, B, and C. Section D is optional.",
"modeVisibilitySettings": {
"edit": true,
"view": false,
"admin": true,
"preview": true,
"design": true
}
}Label vs HTML Control
| Use label when | Use html when |
|---|---|
| Content is plain text | Content needs formatting (bold, lists, links) |
| Simple one-paragraph note | Multi-paragraph content or structured layout |
| Dynamic content based on visibilityRule | Static formatted content blocks |
| Callout box with icon needed | Full HTML rendering needed |