InputNumber KIT

Number as form control value

By default, form control value is number or null when empty

BigInt as form control value

Form control value type can be changed to bigint .

Just put bigint attribute and set new values for min , max and precision properties.

Textfield-based

Use all powers of Textfield : put any number of Icons and Tooltips inside (and control their order and color), modify the size of the textbox and etc. Explore its documentation page for more customization options.

Localization

TuiNumberFormat allows to customize separators specific for your locale.

Affixes

Use prefix / postfix parameters to set non-removable text before\u00A0/\u00A0after the number.
To get currency symbol use Currency pipe.

Step

A positive value of the step property enables side buttons to increase\u00A0/\u00A0decrease the number by the specified step value. Additionally, the ArrowUp / ArrowDown keyboard keys provide the same functionality.

Custom step buttons

Fluid typography

Use FluidTypography directive to adjusts font size for the textfield value to fit in the textfield\u00A0box.

Value transformer

TuiValueTransformer is a great opportunity to override default form control's value format without breaking component's internal logic.

This example demonstrates how to use NaN -value for empty textfield instead of default null -value to keep type strictly "number" .

Quantum

Property [quantum] allows to set minimum indivisible value. Form control value never contains a number that is not divisible by value of this property. Even if user enters any invalid number, it will be rounded to the nearest valid one on blur event.

In this example, form control value can only contain 0 , 0.05 , 0.1 , 0.15 ... 0.9 , 0.95 , 1 .

Large integer and large decimal parts

JavaScript’s built‑in number type loses precision when a value contains too many digits in either the integer part, the decimal part, or both.

The built‑in bigint type avoids this issue but supports only integers.

If you need to preserve all extremely large digits of both parts, you can override the built‑in TuiValueTransformer and store the number as an {significand: bigint; exp: number} instead.