The TEXT_AREA component provides a multi-line text input field for longer text entries.
🛝 Use the Dynamic Form Playground to see the Text Area component in action and try out different configurations
| Property | Type | Required | Description |
|---|---|---|---|
type | 'TEXT_AREA' | Yes | Specifies the field type as TEXT_AREA. |
id | string | Yes | Unique identifier for the field. The field's value is stored in the form state under this key. |
renderName | string | No | Optional name added as data-render-name attribute to locate the rendered element in the DOM. |
label | string | Yes | Label text displayed above the field. Supports translation and string interpolation. |
value | string | No | The field's initial value. If set, the field will be pre-filled with this value. |
placeholder | string | No | Placeholder text when empty. Supports translation and string interpolation. |
hint | string | No | Additional hint text displayed below the field. |
note | string | No | Informational note displayed when there are no errors. |
infoIcon | DfInfoIconConfig | No | Info icon with popover. Object with popoverText (string, required) and popoverDirection ('top', 'bottom', 'left', 'right'). |
validators | array | No | Validation rules for the field. Common types: REQUIRED, MIN_LENGTH, MAX_LENGTH, PATTERN. Each validator has type and optional errorMessage. |
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. |
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 |
|---|---|---|---|
autosize | boolean | No | Property that allow the component to auto-size when the are more written lines than rows. |
layout | object | No | The layout of the field. See also Layout Properties |
maxLength | number | No | The maximum number of characters allowed in the <input> element. |
optionalLabel | string | No | Text that is additionally displayed in the label if the field is not mandatory. |
rows | number | No | Number of visible text lines for the control. |
| Property | Type | Required | Description |
|---|---|---|---|
centerAlignInRetail | boolean | No | Controls the field alignment for "CUSTOM_COLUMN" layout in retail journeys. Set to true to center-align the field. Defaults to left alignment.Ignored in expert journeys and other pre-defined layouts, which always use left alignment. |
{
"id": "comments",
"type": "TEXT_AREA",
"label": "Additional Comments",
"rows": 4,
"maxLength": 500
}{
"id": "claimDescription",
"type": "TEXT_AREA",
"label": "Claim Description",
"rows": 6,
"maxLength": 1000,
"validators": [
{
"type": "REQUIRED",
"errorMessage": "Please provide a description"
},
{
"type": "MIN_LENGTH",
"minLength": 50,
"errorMessage": "Description must be at least 50 characters"
}
]
}{
"id": "address",
"type": "TEXT_AREA",
"label": "Full Address",
"rows": 3,
"autosize": false,
"hint": "Please enter your complete address"
}For complete API documentation, see DfTextAreaConfig.
For Aquila component documentation and design guidelines, see Input Field - Aquila Design System.