InputNumber

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

When To Use

When a numeric value needs to be provided.

Examples

Basic

Numeric-only input box.

Pre / Post tab

Using pre & post tabs example.

High precision decimals

Use stringMode to support high precision decimals support. onChange will return string value instead. You need polyfill of BigInt if browser not support.

Keyboard

Control keyboard behavior by keyboard.

Out of range

Show warning style when value is out of range by control.

Status

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

Sizes

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

Disabled

Click the button to toggle between available and disabled states.

Formatter

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

Here is a Intl.NumberFormat InputNumber implementation: https://codesandbox.io/s/currency-wrapper-antd-input-3ynzo

Borderless

No border.

Prefix

Add a prefix inside input.

API

Common props ref：Common props

Property	Description	Type	Default	Version
addonAfter	The label text displayed after (on the right side of) the input field	ReactNode	-
addonBefore	The label text displayed before (on the left side of) the input field	ReactNode	-
autoFocus	If get focus when component mounted	boolean	false	-
bordered	Whether has border style	boolean	true	4.12.0
controls	Whether to show `+-` controls, or set custom arrows icon	boolean \| { upIcon?: React.ReactNode; downIcon?: React.ReactNode; }	-	4.19.0
decimalSeparator	Decimal separator	string	-	-
defaultValue	The initial value	number	-	-
disabled	If disable the input	boolean	false	-
formatter	Specifies the format of the value presented	function(value: number \| string, info: { userTyping: boolean, input: string }): string	-	info: 4.17.0
keyboard	If enable keyboard behavior	boolean	true	4.12.0
max	The max value	number	Number.MAX_SAFE_INTEGER	-
min	The min value	number	Number.MIN_SAFE_INTEGER	-
parser	Specifies the value extracted from formatter	function(string): number	-	-
precision	The precision of input value. Will use `formatter` when config of `formatter`	number	-	-
readOnly	If readonly the input	boolean	false	-
status	Set validation status	'error' \| 'warning'	-	4.19.0
prefix	The prefix icon for the Input	ReactNode	-	4.17.0
size	The height of input box	`large` \| `middle` \| `small`	-	-
step	The number to which the current value is increased or decreased. It can be an integer or decimal	number \| string	1	-
stringMode	Set value as string to support high precision decimals. Will return string value by `onChange`	boolean	false	4.13.0
value	The current value	number	-	-
onChange	The callback triggered when the value is changed	function(value: number \| string \| null)	-	-
onPressEnter	The callback function that is triggered when Enter key is pressed	function(e)	-	-
onStep	The callback function that is triggered when click up or down buttons	(value: number, info: { offset: number, type: 'up' \| 'down' }) => void	-	4.7.0

Methods

Name	Description
blur()	Remove focus
focus()	Get focus

Design Token

Component Token

Global Token

Notes

Per issues #21158, #17344, #9421, and documentation about inputs, it appears this community does not support native inclusion of the type="number" in the <Input /> attributes, so please feel free to include it as needed, and be aware that it is heavily suggested that server side validation be utilized, as client side validation can be edited by power users.

FAQ

Why `value` can exceed `min` or `max` in control?

Developer handle data by their own in control. It will make data out of sync if InputNumber change display value. It also cause potential data issues when use in form.

Why dynamic change `min` or `max` which makes `value` out of range will not trigger `onChange`?

onChange is user trigger event. Auto trigger will makes form lib can not detect data modify source.

Why `onBlur` or other event can not get correct value?

InputNumber's value is wrapped by internal logic. The event.target.value you get from onBlur or other event is the DOM element's value instead of the actual value of InputNumber. For example, if you change the display format through formatter or decimalSeparator, you will get the formatted string in the DOM. You should always get the current value through onChange.

API

Common props ref：Common props

Property	Description	Type	Default	Version
addonAfter	The label text displayed after (on the right side of) the input field	ReactNode	-
addonBefore	The label text displayed before (on the left side of) the input field	ReactNode	-
autoFocus	If get focus when component mounted	boolean	false	-
bordered	Whether has border style	boolean	true	4.12.0
controls	Whether to show `+-` controls, or set custom arrows icon	boolean \| { upIcon?: React.ReactNode; downIcon?: React.ReactNode; }	-	4.19.0
decimalSeparator	Decimal separator	string	-	-
defaultValue	The initial value	number	-	-
disabled	If disable the input	boolean	false	-
formatter	Specifies the format of the value presented	function(value: number \| string, info: { userTyping: boolean, input: string }): string	-	info: 4.17.0
keyboard	If enable keyboard behavior	boolean	true	4.12.0
max	The max value	number	Number.MAX_SAFE_INTEGER	-
min	The min value	number	Number.MIN_SAFE_INTEGER	-
parser	Specifies the value extracted from formatter	function(string): number	-	-
precision	The precision of input value. Will use `formatter` when config of `formatter`	number	-	-
readOnly	If readonly the input	boolean	false	-
status	Set validation status	'error' \| 'warning'	-	4.19.0
prefix	The prefix icon for the Input	ReactNode	-	4.17.0
size	The height of input box	`large` \| `middle` \| `small`	-	-
step	The number to which the current value is increased or decreased. It can be an integer or decimal	number \| string	1	-
stringMode	Set value as string to support high precision decimals. Will return string value by `onChange`	boolean	false	4.13.0
value	The current value	number	-	-
onChange	The callback triggered when the value is changed	function(value: number \| string \| null)	-	-
onPressEnter	The callback function that is triggered when Enter key is pressed	function(e)	-	-
onStep	The callback function that is triggered when click up or down buttons	(value: number, info: { offset: number, type: 'up' \| 'down' }) => void	-	4.7.0

Name

Description

blur()

Remove focus

focus()

Get focus

Notes

FAQ

Why value can exceed min or max in control?

Developer handle data by their own in control. It will make data out of sync if InputNumber change display value. It also cause potential data issues when use in form.

Why dynamic change min or max which makes value out of range will not trigger onChange?

onChange is user trigger event. Auto trigger will makes form lib can not detect data modify source.

Why onBlur or other event can not get correct value?

Namu Design

InputNumber

Namu Design

InputNumber

When To Use

Examples

API

Methods

Design Token

Component Token

Global Token

Notes

FAQ

Why `value` can exceed `min` or `max` in control?

Why dynamic change `min` or `max` which makes `value` out of range will not trigger `onChange`?

Why `onBlur` or other event can not get correct value?

When To Use

Examples

API

Methods

Design Token

Component Token

Global Token

Notes

FAQ

Why `value` can exceed `min` or `max` in control?

Why dynamic change `min` or `max` which makes `value` out of range will not trigger `onChange`?

Why `onBlur` or other event can not get correct value?

InputNumberChangelog

InputNumberChangelog

When To Use

Examples

API

Methods

Design Token

Component Token

Global Token

Notes

FAQ

Why value can exceed min or max in control?

Why dynamic change min or max which makes value out of range will not trigger onChange?

Why onBlur or other event can not get correct value?

When To Use

Examples

API

Methods

Design Token

Component Token

Global Token

Notes

FAQ

Why value can exceed min or max in control?

Why dynamic change min or max which makes value out of range will not trigger onChange?

Why onBlur or other event can not get correct value?

InputNumber

InputNumber

Why `value` can exceed `min` or `max` in control?

Why dynamic change `min` or `max` which makes `value` out of range will not trigger `onChange`?

Why `onBlur` or other event can not get correct value?

Why `value` can exceed `min` or `max` in control?

Why dynamic change `min` or `max` which makes `value` out of range will not trigger `onChange`?

Why `onBlur` or other event can not get correct value?