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.

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

Guidelines

[NO DATA AVAILABLE]

Accessibility

...

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.

Sizing & Layout

  • The component exposes no explicit size/padding tokens. Prevent wrapping/overflow by keeping copy concise when using labelTranslations and helperText.
  • Choose step values that avoid long fractional tails (e.g., 0.5, 0.25) to keep caret movement and keyboard incrementing predictable.

States & Feedback

  • Validation state: turn on validated and configure validation.required, validation.min, validation.max for immediate guardrails.
  • Read-only state: present values without allowing edits via readonly: true.

Data-Driven / Conditional Behavior

  • Express domain limits via validation.min and validation.max; ensure validated: true so limits apply during entry.
  • Match domain precision with step; users should never be able to increment into unsupported decimals.
  • Define reset semantics with defaultValue distinct from value.

Visibility & Authorization

  • Hide inputs that are not applicable with hidden: true.
  • When users may see but must not edit, keep the field visible and disable interaction via authorizationDisable.

Content & Localization

  • Provide a clear, localized label using labelTranslations (plain language, sentence case).
  • Align numeric formatting expectations to locale by choosing thousandSeparator (e.g., "," or `".").

Dos & Don’ts

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.