数字输入框InputNumber
填写与选择输入数字,并限制最小值、最大值和每次增减量
也常被叫作Number Input数字步进器Numeric Stepper
先知道
数量、库存和价格可以用数字输入框填写,也可以按固定步长加减。它能限制格式、最小值和最大值,但库存是否足够、价格是否有效等业务规则仍要在提交时重新校验。
元
容易混淆?这样区分
数字输入框InputNumber≠步骤条Steps
有些设计系统也把加减数字的控件叫 Stepper,因此单独说 Stepper 容易产生歧义。数字输入框 InputNumber 用来增减一个数值;步骤条 Steps 用来展示流程包含几个阶段。
什么时候用
- 购物车改数量:点加减比敲键盘快机械键盘−2+
- 设置库存、限购:整数且有业务含义库存−50+
- 有明确上下限:超出范围自动拦下−1+最小 1、最大 99,超出会被拦下
- 价格、金额:需要固定小数位价格19.90元自动保留两位小数
什么时候不用
- 手机号、身份证号是“数字字符串” → 用 输入框 Input手机−138****6688+手机号又不能加减
- 只要大概挑个值 → 滑块 Slider 更顺手预算≈ 450
- 日期、年份 → 用 日期选择器 DatePicker2026-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 元