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

Translation Textarea

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

Overview

• The Translation Textarea is a specialized form control for multi-line localized text.
• It allows users to create and edit lengthy multilingual content.
• The component includes integrated language selection for translations.
• It is useful for internationalization scenarios requiring long text in different languages.
• Typical use cases include descriptions, instructions, terms, or user-facing content that needs localization.

...

• id - Specifies a unique identifier for the component used for programmatic access. For example, "productDescriptionTranslations" enables targeted manipulation of this specific translation textarea field.
• dataTestId - Sets the testing hook ID for automated testing. For example, setting to "product-description-translations" allows test scripts to reliably locate this component for automated testing of multilingual content.
• enableAsHotspot - Enables the component as a guided tour hotspot. When enabled, the translation textarea can be highlighted during onboarding or tutorial flows to explain its multilingual functionality to new users.
• guidedTourHotSpotTitle - Sets the title for the guided tour hotspot, supporting translations. For example, {"en-US": "Product Description Translations", "de-DE": "Produktbeschreibung Übersetzungen"} provides clear identification during guided tours.
• guidedTourHotSpotDescription - Sets the description for the guided tour hotspot, supporting translations. For example, {"en-US": "Enter product descriptions in multiple languages", "de-DE": "Geben Sie Produktbeschreibungen in verschiedenen Sprachen ein"} provides detailed instructions during guided tours.

Links

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

Guidelines

Usage

• Use for long, multi-line localized input where users must provide content per language, and label the field via labelTranslations.
• Pre-seed known copy with defaultValue to reduce initial typing and clarify expected structure.
• Limit verbosity with maxLength so each language stays within the allowed character budget.
• Preserve in-progress work on long tasks by enabling saveInLocalStorage.
• Switch to review/read-only scenarios by setting readonly: true instead of hiding the field.

...