InputNumber

An input box which only allows to enter number.

Install

npm install @arco-design/web-react@2.66.18

Import @arco-design/web-react/dist/css/arco.css at the entry and set the locale with ConfigProvider. React 19 projects must also import @arco-design/web-react/es/_util/react-19-adapter first, or imperative APIs such as Message and Modal cannot render.

Examples

Basic: Use the mouse or keyboard to enter standard values within the range.
Button Mode: Set mode as button to use a numeric input box with buttons.
Size: Setting size can use four sizes (mini, small, default, large) number input box. The corresponding heights are 24px, 28px, 32px, and 36px respectively.
Precision: Use precision to set the number precision. When precision is less than the decimal place of step, the precision is taken as the number of decimal places of step.
Format: The display value of the input box can be defined through the use of formatter and parser together. Use the userTyping parameter in the formatter to determine whether the input is in progress. You can delay the display of the value after the formatter
Prefix and Suffix: You can add a prefix or a suffix.
Strict Mode: Enable strict mode with strictMode to support higher precision, onChange will return a string at this time.

Examples come from the official Arco Design repository (MIT) at the commit published as npm 2.66.18. Some use online images or upload endpoints; network requests are disabled in previews.

API

InputNumber

Property	Description	Type	DefaultValue	Version
disabled	Whether input is disabled	boolean	`-`	-
error	Whether input has error status	boolean	`-`	-
hideControl	Whether to hide the control buttons	boolean	`-`	-
readOnly	Whether input is readonly	boolean	`-`	2.17.0
strictMode	`onChange` will return a string in strict mode	boolean	`-`	2.42.0
max	The max value	number	`Infinity`	-
min	The min value	number	`-Infinity`	-
precision	The precision of input value	number	`-`	-
step	The value of each step. It can be an integer or decimal	number	`1`	-
placeholder	Placeholder of input element	string	`-`	-
mode	`embed`: Button embedded, `button`: Buttons on both sides	'embed' \| 'button'	`embed`	-
size	Different sizes	'mini' \| 'small' \| 'default' \| 'large'	`-`	-
prefix	The prefix for the InputNumber	ReactNode	`-`	-
suffix	The suffix for the InputNumber	ReactNode	`-`	-
className	Additional css class	string \| string[]	`-`	-
defaultValue	To set default value	number \| string	`-`	-
icons	Customize icons	{up?: ReactNode;down?: ReactNode;plus?: ReactNode;minus?: ReactNode;}	`-`	-
style	Additional style	CSSProperties	`-`	-
value	To set value	undefined \| number \| string	`-`	-
formatter	Specifies the format of the value presented	(value: number \| string, info: { userTyping: boolean; input: string }) => string	`-`	Param `info` in `2.41.0`
onBlur	Callback when the input is blurred	(e) => void	`-`	-
onChange	Callback when the value changes	(value: number, reason?: InputNumberValueChangeReason) => void	`-`	`reason` in 2.61.0
onFocus	Callback when the input is focused	(e) => void	`-`	-
onKeyDown	Callback when the keyboard is pressed	(e: Event) => void	`-`	-
parser	Specifies the value extracted from formatter	(value: string) => number \| string	`(input) => input.replace(/[^\w\.-]+/g, '')`	-

InputNumberValueChangeReason

// 造成输入框值改变的原因：用户输入、增加、减少、超出范围值修正
export type InputNumberValueChangeReason =
  | "manual"
  | "increase"
  | "decrease"
  | "outOfRange";

Methods

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