Text Area Component

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

1. Overview

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

2. Key Features

Multi-line text input for longer content
Auto-resize functionality for dynamic height
Character limit support with validation
Translation and string interpolation support
Ideal for comments, descriptions, addresses, and detailed input

3. Configuration Properties

Base Properties

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).
`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
`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.

Layout Properties

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.

4. Configuration Examples

Basic Text Area

{
  "id": "comments",
  "type": "TEXT_AREA",
  "label": "Additional Comments",
  "rows": 4,
  "maxLength": 500
}

Required Text Area with Character Limit

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

Text Area without Auto-sizing

{
  "id": "address",
  "type": "TEXT_AREA",
  "label": "Full Address",
  "rows": 3,
  "autosize": false,
  "hint": "Please enter your complete address"
}

5. API Reference

For complete API documentation, see DfTextAreaConfig.

For Aquila component documentation and design guidelines, see Input Field - Aquila Design System.