NumberInput 数字输入NumberInput
输入一个可以加减的数字:数量、人数、间距。范围很大或者不需要逐步加减的数字(金额、电话)用 Input;要在一个范围里大致选个值用 Slider。
基本用法
两侧按钮加减一步,按住连发;也可以直接输入,失焦或按 Enter 时落成数值。到达上下限时数字朝该方向轻推一下表示“不行”。
步长、精度与格式
precision 默认取步长的小数位。format 只影响失焦时的显示,同时用作读屏的 aria-valuetext;聚焦后恢复成纯数字方便编辑。
步长 0.05
步长 2,PageUp 一次加 8
尺寸
状态
最少 2 人成团
受控用法
onChange 的参数是已经按精度取整、并限制在 min / max 之间的数值。
小计:¥78.00
规格
- 步进
- 旧值滑出,新值 spring 滑入,方向随加减而定
- 越界
- 数值朝该方向轻推 6px 再弹回
- 连发
- 按住 400ms 后每 60ms 走一步,到头自动停
API
属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
value | number | — | 当前值(受控)。 |
defaultValue | number | 0 | 初始值(非受控),会先限制到范围内。 |
onChange | (value: number) => void | — | 值变化时触发,参数是新值。 |
min | number | -Infinity | 下限。 |
max | number | Infinity | 上限。 |
step | number | 1 | 步长。 |
largeStep | number | step × 10 | PageUp / PageDown 的步长。 |
precision | number | 步长的小数位 | 保留的小数位。 |
format | (value: number) => string | — | 失焦时的显示格式,同时用作 aria-valuetext。 |
size | 'sm' | 'md' | 'lg' | 'md' | 尺寸。 |
invalid | boolean | — | 校验失败。在 Field 里默认跟随 Field。 |
decrementLabel | string | '减少' | 减号按钮的可读名称。 |
incrementLabel | string | '增加' | 加号按钮的可读名称。 |
rootClassName / rootStyle | string / CSSProperties | — | 外框的类名与样式。className / style 同样落在外框上。 |
…rest | InputHTMLAttributes | — | 其余原生属性(disabled、readOnly、name…)和 ref 落在 <input role="spinbutton"> 上。 |
无障碍
- 输入框是
role="spinbutton",带aria-valuenow/aria-valuemin/aria-valuemax;有 format 时读屏读格式化后的文字。 - ↑ / ↓ 加减一步;PageUp / PageDown 加减一大步;设置了 min / max 时 Home / End 跳到两端;Enter 把输入的文字落成数值。
- 加减按钮不在 Tab 顺序里(键盘用方向键即可),但有可读名称,读屏的虚拟光标可以点到;到头时为
aria-disabled。 - 输入的不是数字时,失焦后退回原值,不会报错。
- 必须有可读名称:放进带 label 的 Field,或给
aria-label。