数字输入框
Number Input
初级通用数字输入框（Number Input）是让用户在表单中填写数值的输入控件，常用于数量、时长等字段。它帮助你表达“这里要填数字”，并可配合范围、步长和校验规则减少无效输入。
你可能会说：「我想让用户填写购买数量，只能填合理范围内的数字，填错时能看到提示。」
动手看看购买数量输入框
亚麻收纳盒规格：中号
¥39 / 件
购买数量
可选 2–10 件，每次加减 2 件
当前数量
悬停、按住或用 Tab 聚焦两侧的加减键，看看操作反馈；用「当前数量」模拟调整数值或输入数字。
4 件在允许范围内。下方说明同时交代了范围和步长，让人知道下一次加减会变多少。
要点数字输入框怎样让数值可用？
- 1
先确定数字代表什么
你让用户填购买数量时，数字代表件数，通常只接受整数；填任务预计耗时，可能就要允许小数。先说清字段含义，我们才能决定可填范围、是否允许小数，以及单位写在哪里。
- 2
输入限制不等于校验完成
你可以给数字输入框设最小值、最大值和调整步长，但这些设置不能代替提交时的校验。因为数据也可能从别的入口进入系统，所以前端要提示错误，后端也要检查收到的值。
- 3
空值和零要分开处理
用户还没填写时，字段是空的，不代表他填了零。比如后台设置每日发送上限，零可能表示不发送，空值可能表示尚未设置。和 AI Agent 说清这层区别，保存和报错逻辑才不会混在一起。
容易混淆的地方
数字输入框和普通输入框的区别，不只是键盘上更容易输入数字：它还表达这个字段会按数值理解，例如比较大小或参与计算。但看起来由数字组成的内容不一定是数值。手机号、邮编、订单号是标识，可能有前导零，也不拿来计算；这类内容用普通输入框更合适。
什么时候用
适合用
- 做电商购物车时填写购买件数，需要按库存设置可选范围，并在提交前检查。
- 做项目管理工具时填写任务预计工时，允许用户输入约定精度的小数。
- 做后台配置页时填写重试次数，让用户知道零次和未填写分别代表什么。
不适合用
- 填写手机号或邮编时，数字只是标识的一部分，用普通输入框更合适。
- 让用户在“低、中、高”三个固定等级中选一个时，用单选框或选择器更直接。
- 只想在页面上展示订单金额、不需要用户修改时，用普通文本展示即可。
练一练选一个答案，看看解释
你在做活动报名表：报名人数用于计算剩余名额，联系电话用于联系报名者。该怎么选输入控件？
让 AI 帮你做复制给 AI Agent 直接用
请在报名表中为报名人数使用数字输入框：只接受整数，范围为 1 到剩余名额；空值与 0 分别处理，并在字段旁显示可理解的错误提示。提交时前后端都校验。联系电话改用普通输入框，不按数值解析。