Versions Compared

Old Version 3

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

Saved on

compared with

New Version Current

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)

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

...

DoDon’tArticle setting(s)
Set step to match the smallest valid increment (e.g., 0.5).Leave the default and force trial-and-error increments.step
Enforce domain limits with validation.min/validation.max and enable validated.Allow any number and reject only at submit time.validation.min, validation.max, validated
Format large values using thousandSeparator.Show long digit strings without separators.thousandSeparator
Separate working value from reset value.Use value expecting it to reset automatically.value, defaultValue
Persist drafts in long flows.Make users retype values after a reload.saveInLocalStorage
Display computed results as read-only.Show computed values as editable fields.readonly, value
Hide fields that aren’t relevant.Leave irrelevant inputs visible and empty.hidden
Localize visible labels.Hard-code English labels.labelTranslations
Map data explicitly for submission.Rely on implicit names or default request placement.dataField, controlsRequestType
Clamp or react to edits on change.Ignore ON_VALUE_CHANGE and let invalid states propagate.events.ON_VALUE_CHANGE

Accessibility

  • Ensure an accessible name is present via labelTranslations.
  • Convey non-editable state with readonly so assistive tech does not present it as interactive.
  • Provide deterministic automation hooks for accessibility tests using dataTestId.
  • Avoid color-only meaning: rely on behavioral constraints using validated and validation.* to prevent and communicate invalid input, and on readonly to indicate calculated/locked values.
  • Choose step values that align with domain expectations to reduce repeated key presses and cursor repositioning for keyboard users.