数字输入框 InputNumber

仅允许输入数字格式的输入框。

安装

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

在入口引入 @arco-design/web-react/dist/css/arco.css，用 ConfigProvider 设置语言。React 19 项目还需在入口最先引入 @arco-design/web-react/es/_util/react-19-adapter，否则 Message、Modal 等命令式 API 无法渲染。

示例

基础用法：通过鼠标或者键盘输入范围内的标准数值。
按钮模式：指定 mode 为 button 来使用带按钮的数字输入框。
四种尺寸：设置 size 可以使用四种尺寸（mini, small, default, large）的数字输入框。高度分别对应24px、28px、32px、36px。
精度和步长：通过 precision 来设置数字精度。当 precision 小于 step 的小数位时，精度取 step 的小数个数。
格式化展示值：通过 formatter、 parser 配合使用可以定义输入框展示值。通过 formatter 中的 userTyping 参数，判断是否正在输入，可以延迟显示 formatter 后的值
前缀及后缀：可以添加前缀和后缀。
高精度：通过 strictMode 开启严格模式以支持更高精度，onChange 此时将会返回字符串。

示例来自 Arco Design 官方仓库（MIT），固定在 npm 2.66.18 对应的提交；部分示例使用在线图片或上传地址，预览中网络请求被禁用。

API

InputNumber

参数名	描述	类型	默认值	版本
disabled	是否禁用	boolean	`-`	-
error	错误状态	boolean	`-`	-
hideControl	隐藏右侧按钮	boolean	`-`	-
readOnly	是否只读	boolean	`-`	2.17.0
strictMode	严格模式下，`onChange` 回调将返回字符串类型	boolean	`-`	2.42.0
max	最大值	number	`Infinity`	-
min	最小值	number	`-Infinity`	-
precision	数字精度。设置精度小于`step`的小数位时，取`step`的小数个数。	number	`-`	-
step	数字变化步长	number	`1`	-
placeholder	默认显示文案	string	`-`	-
mode	`embed` - 按钮内嵌模式，`button` - 左右按钮模式	'embed' \| 'button'	`embed`	-
size	不同尺寸的数字输入框。分别对应 `24px`, `28px`, `32px`, `36px`	'mini' \| 'small' \| 'default' \| 'large'	`-`	-
prefix	显示前缀	ReactNode	`-`	-
suffix	显示后缀	ReactNode	`-`	-
className	节点类名	string \| string[]	`-`	-
defaultValue	初始值	number \| string	`-`	-
icons	配置图标	{up?: ReactNode;down?: ReactNode;plus?: ReactNode;minus?: ReactNode;}	`-`	-
style	节点样式	CSSProperties	`-`	-
value	当前值	undefined \| number \| string	`-`	-
formatter	定义输入框展示值	(value: number \| string, info: { userTyping: boolean; input: string }) => string	`-`	Param `info` in `2.41.0`
onBlur	输入框失去聚焦事件的回调	(e) => void	`-`	-
onChange	变化回调	(value: number, reason?: InputNumberValueChangeReason) => void	`-`	`reason` in 2.61.0
onFocus	输入框聚焦事件的回调	(e) => void	`-`	-
onKeyDown	键盘事件回调	(e: Event) => void	`-`	-
parser	从 formatter 转换为数字，和 formatter 搭配使用。	(value: string) => number \| string	`(input) => input.replace(/[^\w\.-]+/g, '')`	-

InputNumberValueChangeReason

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

方法/Methods

名称	描述
blur()	移除焦点
focus()	获取焦点