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

Links

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

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

...