InputNumber

Enter a number within certain range with the mouse or keyboard.
Import

When To Use#

When a numeric value needs to be provided.

Examples

Numeric-only input box.

      Loading...
    
+
$
+
$
cascader

Using pre & post tabs example.

      Loading...
    

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

Use the nzKeyboard property to control keyboard behavior. `

      Loading...
    

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

      Loading...
    

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

      Loading...
    

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


Click the button to toggle between available and disabled states.

      Loading...
    

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

      Loading...
    

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

      Loading...
    

Add a prefix inside input.

      Loading...
    

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.