跳到主要内容
Termlib

UI 组件 · 表单输入

数字输入框

Input Number

也叫：数字框、步进器、计数器、InputNumber、Stepper

只能输入数字的输入框，带加减按钮，可以限制最小值、最大值和每次加减的步长。

点「标注」看每个部分叫什么。

怎么跟 AI 说

改成你的业务内容再发

购物车里每件商品的购买数量用数字输入框，左边「−」、右边「+」，中间可以直接输入。最小值 1、最大值为库存数，步长 1，到达上下限时对应按钮变灰禁用；输入超出范围或非数字时，失去焦点后自动改回最近的合法值。

发给

01判断

你的内容是这样吗？

对照两列，确认数字输入框是不是你要找的。

符合这些情况，用数字输入框

  • 填写购买数量、人数、天数这类需要小幅加减的整数
  • 有明确最小值、最大值或步长要求的数值，比如 0~100 的折扣百分比
  • 金额、重量这类需要精确到固定小数位的数值

是这些情况，换成别的

  • 手机号、身份证号、验证码这类由数字组成但不做计算的编号，应该用普通输入框

    改用输入框

  • 只需要粗略调节、不在乎精确数值的设置，比如音量、亮度

    改用滑块

  • 可选值只有少数几个固定档位时

    改用单选框下拉选择

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    手机号、银行卡号也做成带加减按钮的数字框，开头的 0 还会被吞掉

  2. 02

    没有设最小值，购买数量能被减到 0 甚至负数

  3. 03

    加减按钮太小，手机上很难点中

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

由中间的数字输入区和两侧（或右侧上下排列）的加减按钮组成，可以带单位前后缀。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1输入框两侧有「−」「+」按钮，或右侧有上下两个小箭头
  2. 2框内是居中或右对齐的数字
  3. 3到达上限或下限时，一侧的按钮变灰

04解释

详细解释

数字输入框专门用来填数量、年龄、价格、百分比这类数值。它会拦下非数字字符，带「−」「+」按钮或右侧上下小箭头，每点一次按设定的步长加减，到达最小值或最大值时对应按钮变成禁用。还可以设置小数位数，以及在前后显示单位，比如「¥」「%」「件」。

它和普通 输入框 的区别是有数值约束和加减操作；和 滑块 的区别是能精确填写具体数字，滑块更适合拖动粗调。注意手机号、身份证号、验证码虽然全是数字，但不做加减运算，开头的 0 也不能丢，应该用普通输入框。

开发者信息
术语 ID
component-input-number
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • input[type="number"]
  • input[role="spinbutton"]
  • .ant-input-number
  • .el-input-number
  • .arco-input-number
  • .t-input-number
  • .n-input-number
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • input-number
  • number-input
  • quantity-input
  • qty-input
  • quantity
  • stepper-input
  • counter-input
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • InputNumber
  • NumberInput
  • NumberField
  • QuantityInput
结构特征

根据元素的排列和样式算出来的特征，只用来加分，单独不判定。

  • 含输入控件
优先级
2 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30