ant-design/components/input-number/index.en-US.md

category	group	title	description	cover	coverDark	demo
Components	Data Entry	InputNumber	Enter a number within certain range with the mouse or keyboard.	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*JvWbSYhuNlIAAAAAAAAAAAAADrJ8AQ/original	https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*1uH-R5kLAMIAAAAAAAAAAAAADrJ8AQ/original	cols 2

When To Use

When a numeric value needs to be provided.

Examples

Basic Sizes Pre / Post tab Disabled High precision decimals Formatter Keyboard Wheel Variants Filled Debug Out of range Prefix / Suffix Status Focus Icon _InternalPanelDoNotUseOrYouWillBeFired Override Component Style

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	-
changeOnBlur	Trigger onChange when blur. e.g. reset value in range by blur	boolean	true	5.11.0
changeOnWheel	Allow control with mouse wheel	boolean	-	5.14.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	-	-
placeholder	placeholder	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
suffix	The suffix icon for the Input	ReactNode	-	5.20.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	-	-
variant	Variants of Input	outlined | borderless | filled	outlined	5.13.0
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

Ref

Name	Description	Type	Version
blur()	Remove focus	-
focus()	Get focus	(option?: { preventScroll?: boolean, cursor?: 'start' | 'end' | 'all' })	cursor - 5.22.0
nativeElement	The native DOM element	-	5.17.3

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

Why changeOnWheel unable to control whether the mouse scroll wheel changes value?

The use of the type attribute is deprecated

The InputNumber component allows you to use all the attributes of the input element and ultimately pass them to the input element, This attribute will also be added to the input element when you pass in type='number', which will cause the input element to trigger native properties (allowing the mouse wheel to change the value), As a result changeOnWheel cannot control whether the mouse wheel changes the value.