InputNumber

Enter a number within certain range with the mouse or keyboard.
Import
Source components/input-number
Docs Edit this page

When To Use#

When a numeric value needs to be provided.

Examples

Basic

Numeric-only input box.

      Loading...
+
$
+
$
cascader
Pre / Post tab

Using pre & post tabs example.

      Loading...
Decimals

A numeric-only input box whose values can be increased or decreased using a decimal step. The number of decimals (also known as precision) is determined by the nzStep prop.

      Loading...
Keyboard behavior

Use the nzKeyboard property to control keyboard behavior. `

      Loading...
Out of range

When the value is out of range in controlled mode, a warning style is provided.

      Loading...
Status

Add status to InputNumber with nzStatus, which could be error or warning.

      Loading...
Sizes

There are three sizes available to a numeric input box. By default, the nzSize is 32px. The two additional sizes are large and small which means 40px and 24px, respectively.

      Loading...


Disabled

Click the button to toggle between available and disabled states.

      Loading...
Formatter

Display value within it's situation with nzFormatter, and we usually use nzParser at the same time.

      Loading...
Variants

Variants of InputNumber, there are four variants: outlinedfilledborderless and underlined.

      Loading...
￥
￥
￥
Prefix

Add a prefix inside input.

      Loading...
Custom handler icon

Custom arrow icon.

      Loading...

API#

nz-input-number#

PropertyDescriptionTypeDefault
[ngModel]current value, two way bindingnumber-
[nzId]ID of the input boxstring-
[nzPlaceHolder]placeholderstring-
[nzAutoFocus]auto focusbooleanfalse
[nzBordered]whether to have borderbooleantrue
[nzVariant]Variants of InputNumber'outlined' | 'borderless' | 'filled' | 'underlined''outlined'
[nzControls]whether to show up and down buttonsbooleantrue
[nzDisabled]whether to disablebooleanfalse
[nzFormatter]specify the format of the displayed value(value: number) => string-
[nzKeyboard]Whether to enable keyboard shortcutsbooleantrue
[nzMax]maximum valuenumberNumber.MAX_SAFE_INTEGER
[nzMin]minimum valuenumberNumber.MIN_SAFE_INTEGER
[nzParser]specify how to convert back to a number from formatter, used with formatter(value: string) => number-
[nzPrecision]numerical precision, the formatter configuration takes precedencenumber-
[nzReadOnly]whether to read onlybooleanfalse
[nzStatus]status, optional errorwarning'error' | 'warning'-
[nzSize]input box size, optional largedefaultsmall'large' | 'small' | 'default''default'
[nzStep]step of each change, can be a decimalnumber1
(nzOnStep)callback when clicking the up and down arrowsEventEmitter<{ value: number, offset: number, type: 'up' | 'down' }>-
(nzFocus)callback when focusOutputRef<void>-
(nzBlur)callback when blurOutputRef<void>-
(ngModelChange)callback function when the value changesEventEmitter<number>-

Methods#

You can get instance by ViewChild

NameDescription
focus()get focus
blur()remove focus

FAQ#

Why can the value exceed the min and max range in controlled mode?#

In controlled mode, developers may store related data by themselves. If the component constrains the data back to the range, it will cause the displayed data to be inconsistent with the actual stored data. This leads to potential data problems in some scenarios such as form fields.