数字输入框Number Input
你可能会说
数量那里只能填数字，最好能直接按加减。
数字输入框是用于填写数值并按设定步长增减的表单控件购买数量、库存和价格可在这里直接输入或点加减号调整。它只能限制格式和范围，库存是否足够等业务规则仍要在提交时校验。
先知道
也常被叫作InputNumber数字步进器Numeric Stepper
你可以这样告诉 AI Agent
请把购物车数量做成可直接输入、也可按 1 加减的数字输入框，范围为 1–20 且只接受整数。前端显示范围错误，提交时仍以后端实时库存为准，并验证库存变化时会给出可重试提示。
容易混淆？这样区分
数字输入框Number Input≠步骤条 Steps
有些设计系统也把加减数字的控件叫 Stepper，因此单独说 Stepper 容易产生歧义。数字输入框 Number Input 用来增减一个数值；步骤条 Steps 用来展示流程包含几个阶段。
什么时候用
- 购物车改数量：点加减比敲键盘快机械键盘−2＋
- 设置库存、限购：整数且有业务含义库存−50＋
- 有明确上下限：超出范围自动拦下−1＋最小 1、最大 99，超出会被拦下
- 价格、金额：需要固定小数位价格19.90元自动保留两位小数
什么时候不用
- 手机号、身份证号属于数字字符串：使用 输入框 Input手机−138****6688＋手机号又不能加减
- 只需近似选择数值：使用 滑块 Slider预算≈ 450
- 需要选择日期或年份：使用 日期选择器 Date Picker2026-07-21 📅日期有专门的选择器
- 数值范围很大：支持直接键盘输入，不只依赖加减按钮−12,800＋
组成结构 · Anatomy
输入框和加减按钮组成一个控件，也常叫数字步进器（Numeric Stepper）
点一下减一个步长
也可以直接键盘输入
到上限后置灰
常见变体 · Variants
默认Default
数量、库存等常规纯数字输入
带单位With Unit
件
价格、件数等需要标清计量单位
小尺寸Small
卡片、行内等空间紧张的地方
禁用Disabled
这个数值当前不允许改动
典型使用场景
购物车数量
无线机械键盘 · 茶轴
87 键 / 蓝牙双模
¥ 329.00
共 2 件，合计 ¥ 658.00
商品库存设置
库存管理 · 无线机械键盘
现货库存件
库存预警件
低于预警值时，会在工作台提醒你补货
限购份数
手冲咖啡体验课
每人限购 5 份 · 7 月 26 日开课
购买份数
价格录入
商品定价
售价元
会员价元
自动保留两位小数，最低不低于 0.01 元
延伸阅读 · 权威出处
快速练习