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

Number Input

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

Overview

• The Dynamic Number Input Component captures numerical values in forms.
• It includes built-in validation and formatting options.
• It is suited for precise numeric entry such as prices, quantities, or measurements.
• It improves form usability by handling numeric formats directly within the input.

...

• dataTestId – Sets the testing hook ID for automated testing. For example, setting to "product-price-input" allows test scripts to reliably locate this component.

Links

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

Guidelines

Usage

• Use for numeric-only entry that needs built-in constraints and formatting; enforce limits with validation.required, validation.min, validation.max, set precision with step, and activate checks via validated.
• Pre-fill working values with value; define reset behavior with defaultValue so the field returns to the intended baseline on reset.
• Preserve in-progress input across reloads by enabling saveInLocalStorage: true.

...