Versions Compared

Old Version 2

changes.mady.by.user GE-DevDoc-Bot

Saved on

compared with

New Version 3

changes.mady.by.user GE-DevDoc-Bot

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  • 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.

Guidelines

[NO DATA AVAILABLE]

Accessibility

...

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).

Sizing & Layout

  • Set the control’s visible height using rows; adjust only in whole-line increments for predictability.

States & Feedback

  • Indicate non-editable state using readonly; do not combine with required.

Data-Driven / Conditional Behavior

  • Enforce maximum length with maxlength; pair with counterVisible so users can self-correct.
  • Require input when business logic demands it by setting required: true; combine with validated to block submit.
  • Persist drafts between sessions using saveInLocalStorage; clear by resetting to defaultValue.

Visibility & Authorization

  • Show or hide the control based on user policies via visibilityPolicySetId.
  • Identify the control in authoring tools without affecting end-user text using displayName.

Content & Localization

  • Localize all user-facing copy with labelTranslations; keep it short and specific.
  • Provide concise guidance in placeholder, localized per market; never rely on placeholder as the only label.
  • Initialize user-visible defaults with value only when they are meaningful in all locales; otherwise rely on defaultValue + translations.

Dos & Don’ts

DoDon’tArticle setting(s)
Set rows to match expected input length.Leave a tiny field for long answers (excessive scrolling).rows
Show a counter when enforcing limits.Enforce maxlength silently.counterVisible, maxlength
Use a clear, localized label.Depend on placeholder as the only identifier.labelTranslations, placeholder
Persist drafts for long entries.Risk data loss on reloads for lengthy inputs.saveInLocalStorage
Require and validate when the field is mandatory.Mark as required but allow submission.required, validated
Use readonly for display-only text.Fake read-only by disabling submission elsewhere.readonly
Map to the correct backend field and channel.Submit under a wrong key or location.dataField, controlsRequestType
Sync app state on user edits.Wait until submit to reflect changes.events.ON_VALUE_CHANGE

Accessibility

  • 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.