InputNumber KIT

Examples API Setup

See also

InputSlider, InputRange, Range, Slider, Money

InputNumber is a form field to provide numerical input.

Form control value

Form control value is of `null` (for empty textfield only) and `number` (all other cases) types.
Use Validators.required (built-in validator provided by Angular team) with our FieldError pipe to notify your users about required field.

Enter a number

Control value:

null

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.

I am a label

Localization

TuiNumberFormat allows to customize separators specific for your locale.

Type number like a German

Affixes

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

Price

Step

Positive value of `step` property enables sided button to increase / decrease the number by the specified step's value. Moreover, keyboard keys `ArrowUp` / `ArrowDown` will also work in the same way.

Percentage