Text Area
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.
Examples
A basic textarea with validation
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 |