Versions Compared

Old Version 1

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

Saved on

compared with

New Version 2

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

Saved on

Key

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

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

Input

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

Overview

  • The Input component is a flexible form control for single-line text.
  • It provides a customizable interface for capturing user input.
  • The component supports validation, custom styling, and events.
  • It is suited for short text entries such as names, email addresses, or references.

...

  • id – Specifies a unique identifier for the component used for programmatic access. For example, "customerEmailInput" enables targeted manipulation of this specific input field.
  • dataTestId – Sets the testing hook ID for automated testing. For example, setting to "email-input" allows test scripts to reliably locate this component for automated testing of form functionality.
  • enableAsHotspot – Enables the component as a guided tour hotspot. When enabled, the input field can be highlighted during onboarding or tutorial flows to explain its purpose to new users.
  • guidedTourHotSpotTitle – Sets the title for the guided tour hotspot, supporting translations. For example, {"en-US": "Email Address Input", "de-DE": "E-Mail-Adresse Eingabe"} provides clear identification during guided tours.
  • guidedTourHotSpotDescription – Sets the description for the guided tour hotspot, supporting translations. For example, {"en-US": "Enter your primary email address here", "de-DE": "Geben Sie hier Ihre primäre E-Mail-Adresse ein"} provides detailed instructions during guided tours.

Guidelines

Usage

  • Use for single-line text capture; bind the value name and transport with dataField and controlsRequestType.
  • Provide a clear, localized label using labelTranslations (sentence case).
    • Always provide clear and concise labels to help users understand input fields.
    Text inputs should allow free-form entry where appropriate
    • Use sentence-style capitalization for labels (capitalize only the first word unless it’s a proper noun).
  • Offer help through tooltips, placeholder text, or helper text for clarity.
  • Text inputs should allow free-form entry where appropriate.
  • Pre-fill known values with defaultValue.
  • Add an optional contextual cue with customIconName (supplemental to text).

Sizing & Layout

  • Adjust outer spacing using paddingClass.
  • When enforcing length limits, show a live character budget with counterVisible alongside maxLength/minLength.
  • Hide the control when not applicable using hidden.

States & Feedback

  • Switch to a read-only state with readonly for review scenarios.
  • Configure validation via validation (required, email, maxLength, minLength, pattern); tie feedback timing to ON_VALUE_CHANGE (see Interactions).
  • Preserve in-progress input with saveInLocalStorage.

Data-Driven / Conditional Behavior

  • Drive runtime visibility from state using displayConditions; use disjoint expressions to avoid rapid show/hide oscillation.

Visibility & Authorization

  • Hide for restricted audiences with visibilityPolicySetId or hidden.
  • Keep the field visible but non-editable when awareness is important using authorizationDisable.
  • Use sentence-style capitalization for labels (capitalize only the first word unless it’s a proper noun).

Accessibility

...

Content & Localization

  • Localize end-user strings with labelTranslations.
  • Enable onboarding aids with enableAsHotspot, guidedTourHotSpotTitle, and guidedTourHotSpotDescription.

Dos & Don’ts

DoDon’tArticle setting(s)
Localize the label (sentence case) for each target locale.Hard-code an English label or rely on an icon alone.labelTranslations, label, customIconName
Bind the input to a named field and correct request placement.Send unnamed values or rely on server defaults.dataField, controlsRequestType
Pre-fill when you know the value; keep it editable.Force users to retype data you already have.defaultValue, readonly
Turn on the counter when enforcing length limits.Hide limits until submit.counterVisible, maxLength, minLength
Validate on change for immediate feedback.Wait until submit to reveal basic errors.validation, ON_VALUE_CHANGE
Enforce format using pattern or email.Depend on placeholder/tooltip (not provided) to teach format.pattern, email, validation
Disable when users can see but not change the value; hide when they must not see it.Show a restricted field as editable or visible to all.readonly, authorizationDisable, visibilityPolicySetId
Gate visibility on prerequisites and state.Keep the field visible regardless of form state.displayConditions, hidden
Persist progress locally for long edits.Clear the field on accidental navigation.saveInLocalStorage
Use test hooks for automation.Target the control by visible text.id, dataTestId

Accessibility

  • Provide localized, descriptive labels with labelTranslations for correct announcement.
  • Prevent non-functional interaction by using readonly or authorizationDisable when edits are not allowed.
  • Communicate constraints without color reliance using counterVisible, maxLength, minLength, and pattern/email within validation.
  • Keep components discoverable and predictable with displayConditions and hidden.
  • Prefer visibilityPolicySetId to fully hide restricted fields; use authorizationDisable to present read-only awareness when visibility is appropriate.
  • Persist progress with saveInLocalStorage to reduce re-entry burden.