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

Number Input

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.

Specs

Tokens

Structure

(Configured in General Properties)

• displayName – Sets the display name of the component shown in the structure panel. For example, "Price Input" allows for easy identification of the component's purpose in the component structure.

(Configured in Visual Properties)

• saveInLocalStorage – Determines whether the input's value is preserved in local storage. When enabled, user input persists between page reloads, improving user experience for lengthy forms.

(Configured in Non-Visual Properties)

• dataField – Defines the field name that will be used when submitting form data. For example, setting dataField to "productPrice" ensures the numeric value is submitted with this field name in the data object.
• controlsRequestType – Specifies how the field data is sent in HTTP requests: 'BODY', 'URL', or 'HEADERS'. For example, setting to "BODY" includes the field in the request body, which is standard for most form submissions.

Styling

(Configured in Visual Properties)

• labelTranslations – Sets the field label with support for multiple languages. For example, {"en-US": "Price", "de-DE": "Preis"} ensures proper localization of the field label.
• thousandSeparator – Defines the character used to separate thousands in large numbers for improved readability. For example, setting to "," will display "1,000" instead of "1000", making large numbers easier to read.
• step – Determines the increment/decrement value when using the up/down arrows or buttons. For example, setting to "0.5" allows users to increase or decrease the value by half units, useful for decimal precision.
• value – Sets the initial numeric value displayed in the input. For example, setting to "100" will pre-fill the field with this value when the form is loaded.
• helperText – Provides additional guidance text displayed below the input field. For example, "Enter price in USD without currency symbol" helps users understand what format is expected.
• defaultValue – Sets the initial value that will be used when the form is reset. For example, setting to "0" ensures the field resets to zero when form reset actions are triggered.

Validation

(Configured in Validation)

• validation – Configures validation rules for the number input, including:
• required – When set to true, the field must contain a value before the form can be submitted.
• min – Sets the minimum allowed value. For example, setting to "0" prevents negative numbers from being entered.
• max – Sets the maximum allowed value. For example, setting to "100" restricts input to values no greater than 100.
• validated – Controls whether validation rules should be actively applied to user input.

Authorization

(Configured in Authorization)

• authorizationDisable – Specifies a policy set that determines when the component should be disabled. For example, setting to "readOnlyPolicy" will disable the field for users who don't have edit permissions.

Actions & Variants

(Configured in Visual Properties)

• hidden – Controls whether the component is visible to users. When set to true, the component won't be displayed but still exists in the DOM, useful for conditional form fields that may need to appear later.
• readonly – Controls whether the input value can be edited by users. When set to true, the input will display its value but not allow changes, useful for displaying calculated values that shouldn't be modified.

(Configured in Events)

• events – Configures the events that the component can trigger and respond to:
• ON_INIT – Triggered when the number input component is initialized. Can be used to perform setup operations like loading initial configuration.
• ON_DESTROY – Triggered when the component is removed from the DOM. Useful for cleanup operations and releasing resources.
• ON_VALUE_CHANGE – Triggered when the user modifies the numeric value. Can be used to perform immediate calculations or updates based on the new value.
• ON_INIT_BASED_ON_USER_VIEW – Triggered specifically when the component initializes in user view mode rather than edit mode.

Tests

(Configured in Testing Hooks)

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

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

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.