Textarea

The Textarea component can be used in any form to provide a multi-line text input field. It has similar properties to the Text component, including configuration options for being readonly, disabled, required, and supporting placeholder, helper text, and default value.

Configuration Schema

The JSON schema defines the structure for the Textarea component, outlining the options for customization:

[
    {
        "name": "comments",
        "meta": {
            "displayName": "Comments",
            "displayType": "textarea",
            "placeholder": "Enter your comments",
            "description": "Please provide your feedback",
            "readOnly": false,
            "validation": {
                "required": true,
                "requiredDetail": {
                    "errorMsg": "custom message for required detail"
                },
                "minLength": 10,
                "maxLength": 300
            },
            "htmlProps": {
                "minRows": 4,
                "maxRows": 4
            }
        }
    }
]

Basic Configuration

Comments

​

Please provide your feedback

---

---

Form Data:

{}

Field Properties

Properties used by this field (inside meta field in schema)

Name	Description	Type
displayName	The label shown above the textarea field	string
displayType	The type of the field to be displayed	string
placeholder	The hint shown in the textarea field	string
required	Indicates whether the field is mandatory	boolean
minLength	Specifies the minimum number of characters allowed in the input	number
maxLength	Specifies the maximum number of characters allowed in the input	number
pattern	A regex pattern that the field value must match	string
validate	A function for custom validation logic	function
description	Helper text or additional description shown below the textarea field	string
readOnly	A readonly field is not editable and value cannot be changed	boolean
htmlProps	Additional HTML properties that can be passed to the textarea	object

Field Properties - Validation Details

The validation settings within the Textarea component are crucial for ensuring that user input meets specific requirements. Here’s a breakdown of the available validation properties:

Property	Description
required	Boolean value that specifies whether entering data into the field is mandatory.
minLength	Specifies the minimum number of characters allowed in the input.
maxLength	Specifies the maximum number of characters allowed in the input.
min	Specifies the minimum value allowed for number inputs, with support for dynamic values.
max	Specifies the maximum value allowed for number inputs, also supporting dynamic conditions.
pattern	A regex pattern that the input must match to be considered valid.
validate	A function for custom validation logic, which can return a boolean or an error message.
requiredDetail	Contains info msgs about the required validation property

Example Usage of Validation Properties

{
    "name": "comments",
    "meta": {
        "displayName": "Comments",
        "displayType": "textarea",
        "readOnly": false,
        "validation": {
            "required": true,
            "minLength": 10,
            "maxLength": 300,
            "min": 10,
            "max": 300,
            "pattern": "/^[a-zA-Z0-9 .,'-]+$/"
        },
        "htmlProps": {
            "minRows": 3,
            "maxRows": 6
        }
    }
}