切换·Esc 返回

数字输入框InputNumber

填写与选择
输入数字,并限制最小值、最大值和每次增减量
也常被叫作Number Input数字步进器Numeric Stepper

数量、库存和价格可以用数字输入框填写,也可以按固定步长加减。它能限制格式、最小值和最大值,但库存是否足够、价格是否有效等业务规则仍要在提交时重新校验。

容易混淆?这样区分
数字输入框InputNumber步骤条Steps

有些设计系统也把加减数字的控件叫 Stepper,因此单独说 Stepper 容易产生歧义。数字输入框 InputNumber 用来增减一个数值;步骤条 Steps 用来展示流程包含几个阶段。

什么时候用

  • 购物车改数量:点加减比敲键盘快
    机械键盘2
  • 设置库存、限购:整数且有业务含义
    库存50
  • 有明确上下限:超出范围自动拦下
    1
    最小 1、最大 99,超出会被拦下
  • 价格、金额:需要固定小数位
    价格19.90
    自动保留两位小数

什么时候不用

  • 手机号、身份证号是“数字字符串” → 用 输入框 Input
    手机138****6688
    手机号又不能加减
  • 只要大概挑个值滑块 Slider 更顺手
    预算≈ 450
  • 日期、年份 → 用 日期选择器 DatePicker
    2026-07-21 📅
    日期有专门的选择器
  • 很大的数值靠加减调不到 → 直接键盘输入
    12,800
    靠点加号攒到这个数?
组成结构 · Anatomy
1数字输入控件InputNumber输入框和加减按钮组成一个控件,也常叫数字步进器(Numeric Stepper)
2减少按钮Minus点一下减一个步长
3数值输入框Input也可以直接键盘输入
4增加按钮Plus到上限后置灰
常见变体 · Variants
默认Default
数量、库存等常规纯数字输入
带单位With Unit
价格、件数等需要标清计量单位
小尺寸Small
卡片、行内等空间紧张的地方
禁用Disabled
这个数值当前不允许改动
典型使用场景
购物车数量
无线机械键盘 · 茶轴
87 键 / 蓝牙双模
¥ 329.00
共 2 件,合计 ¥ 658.00
商品库存设置
库存管理 · 无线机械键盘
现货库存
库存预警
低于预警值时,会在工作台提醒你补货
限购份数
手冲咖啡体验课
每人限购 5 份 · 7 月 26 日开课
限时
购买份数
价格录入
商品定价
售价
会员价
自动保留两位小数,最低不低于 0.01 元