COMPONENT 24 · Text & File Inputs
数字微调框
Spinbutton / Number Input
也叫Number InputStepper FieldNumeric StepperNSStepper
输入数字并可通过增减按钮或方向键调整。
Accepts a numeric value and supports incrementing or decrementing it.
ANATOMY & USAGE
结构与使用建议
组成部分
- 数值输入
- 增减控制
- 单位或范围提示
适合使用
- 数值有明确步长、最小值和最大值时。
不建议使用
- 精确输入不重要且更适合直接拖动范围时。
键盘与无障碍
- 暴露当前值、最小最大值和单位；键盘支持方向键且错误信息可被读出。
DESCRIBE IT TO AI
这样告诉编程助手
实现数字微调框（Spinbutton / Number Input）：输入数字并可通过增减按钮或方向键调整。
MINIMAL RUNNABLE CODE
可复制代码
原生与 React 两套实现，不依赖第三方组件库。
READ ONLY · SAFE TO COPY
<label class="demo stack" for="quantity">
<span>数量</span>
<input id="quantity" type="number" min="1" max="10" step="1" value="1">
</label>