The PARAGRAPH component provides formatted text content within the form for displaying informational text.
🛝 Use the Dynamic Form Playground to see the Paragraph component in action and try out different configurations
| Property | Type | Required | Description |
|---|---|---|---|
type | 'PARAGRAPH' | Yes | Specifies the field type as PARAGRAPH. |
id | string | Yes | Unique identifier for the field. |
renderName | string | No | Optional name added as data-render-name attribute to locate the rendered element in the DOM. |
label | string | Yes | The paragraph text content. Supports translation, string interpolation, and Markdown. |
testId | string | No | Test identifier for automated testing. Set as data-testid attribute. |
acl | array | No | Access control rules for field visibility/editability. Each rule has state ('hidden', 'readonly', 'disabled', 'visible', 'editable') and optional condition (Filtrex expression). |
columnSpan | number | No | Number of columns to span (1-12) in CUSTOM_COLUMN layout. Default: 12 (full width). See Overriding the number of grid columns when using --df-custom-columns. Only effective when paragraphWidthMatchesLayoutType is set to true in the form layout; otherwise the paragraph always spans the full width regardless. |
spacing | string | No | Margin spacing before next field: 'NONE' (0px), 'XS' (8px), 'S' (16px), 'M' (24px), 'L' (32px), 'XL' (40px), 'XXL' (48px). |
| Property | Type | Required | Description |
|---|---|---|---|
copytextOption | string | No | The nxCopytext variant. This determines the visuals of the paragraph. |
cssClasses | string | No | Property to add css classes via configuration |
icon | IconDefinition | No | Configuration of the icon to be place before the label. |
layout | object | No | The layout of the field. See also Layout Properties |
| Property | Type | Required | Description |
|---|---|---|---|
leftAlignInRetail | boolean | No | Controls paragraph text alignment for retail journeys. Set to true to left-align text. Defaults to centered alignment.Ignored in expert journeys, which always use left alignment. |
{
"id": "paragraph-basic",
"type": "PARAGRAPH",
"label": "Please fill out all required fields marked with an asterisk (*). This information is necessary to process your application."
}{
"id": "paragraph-markdown",
"type": "PARAGRAPH",
"label": "**Important Notice:** Your personal data will be processed according to our [Privacy Policy](https://example.com/privacy). By submitting this form, you agree to our terms."
}{
"id": "paragraph-lists",
"type": "PARAGRAPH",
"label": "Required documents:\n\n* Valid ID or passport\n* Proof of address\n* Recent photograph\n* Previous insurance documentation"
}{
"id": "paragraph-icon",
"type": "PARAGRAPH",
"label": "**Disclaimer:** The information provided is for estimation purposes only. Final premium amounts may vary based on underwriting review.",
"icon": {
"name": "info-circle",
"size": "s"
}
}{
"id": "paragraph-large-left",
"type": "PARAGRAPH",
"label": "**Warning:** Providing false information may result in claim denial and policy cancellation.",
"copytextOption": "large",
"layout": {
"leftAlignInRetail": true
}
}The PARAGRAPH component supports standard Markdown syntax including:
**text***text*~~text~~:u[text][text](url)* or - for bullets\nFor complete API documentation, see DfParagraphConfig.