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

Guidelines

[NO DATA AVAILABLE]

Accessibility

[NO DATA AVAILABLE]