跳到主要内容

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

属性

属性类型默认值说明
valuenumber—当前值(受控)。
defaultValuenumber0初始值(非受控),会先限制到范围内。
onChange(value: number) => void—值变化时触发,参数是新值。
minnumber-Infinity下限。
maxnumberInfinity上限。
stepnumber1步长。
largeStepnumberstep × 10PageUp / PageDown 的步长。
precisionnumber步长的小数位保留的小数位。
format(value: number) => string—失焦时的显示格式,同时用作 aria-valuetext。
size'sm' | 'md' | 'lg''md'尺寸。
invalidboolean—校验失败。在 Field 里默认跟随 Field。
decrementLabelstring'减少'减号按钮的可读名称。
incrementLabelstring'增加'加号按钮的可读名称。
rootClassName / rootStylestring / CSSProperties—外框的类名与样式。className / style 同样落在外框上。
…restInputHTMLAttributes—其余原生属性(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。