(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)

Textarea

Link to Figma: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=11628-199695&t=ftfrOGkPzlG2GaTo-1

Overview

• The Dynamic Textarea component is a multi-line text input field.
• It is designed for entering and editing longer text content.
• It is suitable for comments, descriptions, feedback, or other detailed input.
• It provides configuration options for appearance, behavior, and validation rules.

...

• dataTestId – Sets the testing hook ID for automated testing. For example, setting it to "customer-feedback-textarea" allows test scripts to reliably locate this component.

Link

• Figma: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=11628-199695&t=ftfrOGkPzlG2GaTo-1
• Live style guide: https://e1-dev.k8s.myapp.de/live-style-guide/id3/2-text-area

Guidelines

Usage

• Use for multi-line input such as comments or descriptions. Label the field clearly with labelTranslations; give optional guidance with placeholder.
• Match the expected response length by setting rows (e.g., short notes vs. longer feedback).
• When users may be interrupted, persist work-in-progress by enabling saveInLocalStorage.
• Present uneditable text (e.g., generated summaries) with readonly: true instead of a separate text component to keep visual consistency.
• Pre-fill only when it truly speeds up entry; otherwise prefer placeholder over hard value. If a reset should revert to a specific text, set defaultValue.
• Map the value to a backend field with dataField and choose how it’s sent via controlsRequestType (BODY, URL, HEADERS).

...

• Provide a persistent, localized label via labelTranslations; treat placeholder as supplementary.
  • Keep labels concise and unambiguous across locales.
• Communicate length limits textually using counterVisible alongside maxlength.
• Prevent impossible tasks by making non-editable fields readonly and by enforcing required only when validated is active.
• Keep content recoverable with saveInLocalStorage.Expose stable hooks for automated a11y checks with dataTestId.
• Avoid color-only cues; rely on text and validation states enabled via validated.