InputNumeric

The InputNumeric component allows users to enter numeric values with support for formatting, validation, and interactive controls such as spin buttons.

1. Basic Properties

• Name: The unique identifier of the numeric input (e.g., InputNumeric1).
• Label: The text displayed above the numeric input.
• Default Value: The initial numeric value (e.g., 0).
• Placeholder: A hint text displayed when no value is entered.

States

• Read Only: Displays the value but prevents editing.
• Disabled: Makes the input non-interactive.
• Hidden: Hides the input from the UI while keeping it available in logic.

2. Layout

Defines how the numeric input behaves across responsive screen sizes and spacing relative to other components.

📘 See Common Properties → Layout.

3. Events

• onChange: Triggered when the value changes.
• onBlur: Triggered when the input loses focus.

4. Validations

Validation rules can ensure the numeric value matches required conditions (e.g., non-empty, within a range).

📘 See Common Properties → Validations.

5. Buttons

Custom action buttons can be added inside the input field for quick interactions.

6. Format

The Format property defines how numeric values are displayed and interpreted inside the InputNumeric component. It supports various built-in formats as well as a custom option for advanced use cases.

1. Available Formats

• custom → Allows defining a custom numeric format pattern. Useful when you need a very specific formatting rule.
• fixedPoint → Displays numbers as fixed-point decimals.
  • Example: 1234.56 → 1,234.56
• decimal → Standard decimal number representation without additional formatting.
  • Example: 1234.56 → 1234.56
• percent → Displays numbers as percentages.
  • Example: 0.25 → 25%
• currency → Displays numbers with a currency symbol (based on locale).
  • Example: 1234.56 → $1,234.56
• exponential → Scientific notation.
  • Example: 123456 → 1.23e+5
• thousands → Groups values by thousands.
  • Example: 1234567 → 1,234,567
• millions → Converts and formats numbers into millions.
  • Example: 1234567 → 1.23M
• billions → Converts and formats numbers into billions.
  • Example: 9876543210 → 9.87B
• trillions → Converts and formats numbers into trillions.
  • Example: 1234567890123 → 1.23T
• largeNumber → Automatically scales numbers into an appropriate large unit (K, M, B, T).
  • Example: 1500 → 1.5K, 2500000 → 2.5M

2. Precision

Along with the Format, the Precision property controls how many decimal places are shown.

• Example:
  • Format: currency
  • Precision: 2
  • Value: 1234.5 → $1,234.50

3. Step

The Step defines the increment/decrement value used by the spin buttons.

• Example:
  • Step = 5
  • Current value = 10
  • Next increments: 15, 20, 25

7. Buttons

• Show Spin Buttons → Enables increment/decrement controls.
• Show Clear Button → Adds a clear button to reset the value.

8. Style

Custom styles can be applied for further UI adjustments.

📘 See Common Properties → Style.