Skip to content




<ptcs-textarea> is a multiline input box that can be customized to fit your application.

Usage Examples

Basic Usage

<ptcs-textarea label="Write a description" hint-text="Add detailed explanation"></ptcs-textarea>

Shows an text area box with a label and a hint text.

Component API


Property Type Description Triggers a changed event?
counter Boolean Adds a characters counter at the end of the field No
disabled Boolean If true, the user cannot interact with this element No
hasText Boolean read-only property, indicating if text has a non-empty value No
hintText String Hint for an empty textarea No
label String Label that is shown for the textarea No
labelAlignment String Alignment of label (left, right, center). Default: 'left' No
maxNumberOfCharacters number Allows only specified amount of characters. Default: 100 No
readOnly Boolean This attribute indicates that the user cannot modify the value of the control No
text String The initial value of the control. Supports two-way data binding Yes
textAlignment String Alignment of text (left, right). Default: 'left' No
tooltip String The tooltip that appears when hovering over the text area, or when it has keyboard focus No
tooltipIcon String The icon for the tooltip No


Name Data Description
text-changed { text } Triggered whenever the value changes


No methods



Part Description
root The text area parent element
label The label element
text-box The element that wraps value and counter
hint-text The hint text value inside the text-box element
text-value The text value element inside the text-box element
counter The characters counter element inside the text-box element

CSS Variables

Currently no variables are available

State attributes

Attribute Description Part
counter Set to a text field with a characters counter :host
disabled Set to a disabled text field :host, text-value
hintText Set hint-text value to be presented on text-box :host, hint-text
readOnly Set to a read-only (non-editable) text area :host, text-value
label Set label value :host, label
labelAlignment Set text alignment in label part :host, label
maxNumberOfCharacters Set maximum number of characters to be entered in text-value :host, text-value
textAlignment Set text alignment of text-value input :host, text-value
extraValidation Function Custom client validation function. This is invoked with the text component itself as parameter, so that it can use any ptcs-textarea property for custom validation. Can return true (= valid), false (= invalid), or undefined (ignore validation)
externalValidity String List validity as determined externally (server-side). Value: undefined, "unvalidated", "invalid", or "valid"
hideValidationCriteria Boolean Don't show validation criteria in unvalidated state?
hideValidationError Boolean Don't show validation error state?
hideValidationSuccess Boolean Don't show validation success state?
required Boolean Validation criterion: Must the list have a selection?
minLength Number Validation criterion: minimum text length
maxLength Number Validation criterion: maximum text length
pattern String Validation criterion: Regular expression. Field is valid only if the text matches this pattern rule
validationCriteria String The validation details message
validationCriteriaIcon String Icon for criteria state (unvalidated). Default: cds:icon_info
validationErrorIcon String Icon for error state (invalid). Default: cds:icon_error
validationMessage String The validation (title) message
validationSuccessDetails String The validation success details message
validationSuccessIcon String Icon for success state (valid). Default: cds:icon_success
validationSuccessMessage String The validation success (title) message. Default: "Success"