Paragraph Component

1. Overview
2. Key Features
3. Configuration Properties
4. Configuration Examples
5. Markdown Support
6. API Reference

1. Overview

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

2. Key Features

Display informational text within forms
Multiple text size variants (small, medium, normal, large)
Optional icon placement before text
Left-alignment option for retail journeys
Translation and string interpolation support
Custom CSS classes for styling
Markdown support for rich text formatting

3. Configuration Properties

Base Properties

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).
`spacing`	`string`	No	Margin spacing before next field: `'NONE'` (0px), `'XS'` (8px), `'S'` (16px), `'M'` (24px), `'L'` (32px), `'XL'` (48px), `'XXL'` (64px).

Component Specific Properties

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

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.

4. Configuration Examples

Basic Paragraph

{
  "id": "paragraph-basic",
  "type": "PARAGRAPH",
  "label": "Please fill out all required fields marked with an asterisk (*). This information is necessary to process your application."
}

Paragraph with Markdown Formatting

{
  "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."
}

Paragraph with Lists

{
  "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"
}

Paragraph with Icon

{
  "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"
  }
}

Large Paragraph with Left Alignment

{
  "id": "paragraph-large-left",
  "type": "PARAGRAPH",
  "label": "**Warning:** Providing false information may result in claim denial and policy cancellation.",
  "copytextOption": "large",
  "layout": {
    "leftAlignInRetail": true
  }
}

5. Markdown Support

The PARAGRAPH component supports standard Markdown syntax including:

Bold text using **text**
Italic text using *text*
~~Strikethrough text~~ using ~~text~~
Underline text using :u[text]
Links using [text](url)
Lists using * or - for bullets
Line breaks using \n

6. API Reference

For complete API documentation, see DfParagraphConfig.