数字输入框

Input Number

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

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

详细解释

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

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

灰度线框示意，只表达结构，不代表具体视觉风格。

可以直接贴给 Cursor、Claude Code 等工具，把里面的业务内容换成你自己的。

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

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

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