NumberField
number-field数字步进 · Base UI ±按钮 + 键盘步进 + min/max
用法
基础用法
±按钮步进，输入框可直接键入，支持键盘 ↑↓。
tsx
<NumberField aria-label="数量" defaultValue={3} />范围限制
min/max 约束取值，到达边界对应按钮自动禁用。
tsx
<NumberField aria-label="数量" defaultValue={0} min={0} max={5} />步长
step 设置每次增减量，这里每步 5。
tsx
<NumberField aria-label="步长5" defaultValue={10} step={5} />禁用
disabled 锁定整个控件。
tsx
<NumberField aria-label="数量" defaultValue={3} disabled />何时用
需精确录入数字并带 ± 步进按钮、min/max 边界（数量、份数、阈值）时用。只需大致量级、拖动选值用 Slider；非数字的任意文本录入用 Input。
导入
ts
import { NumberField } from "@hulianui/ui"Props
| 名称 | 类型 | 默认 | 说明 |
|---|---|---|---|
| value | number｜null | — | 受控值（null=空） |
| defaultValue | number | — | 非受控初始值 |
| min | number | — | 最小值 |
| max | number | — | 最大值 |
| step | number | 1 | 步进量 |
| disabled | boolean | false | 禁用 |
| readOnly | boolean | false | 只读 |
| required | boolean | — | 表单必填 |
| name | string | — | 原生表单 name |
| id | string | — | — |
| className | string | — | — |
| aria-label | string | — | 无可见标题时提供 |
Events
| 事件 | 类型 | 说明 |
|---|---|---|
| onValueChange | (value: number｜null) => void | 变化回调（瑚琏收敛签名，丢 Base UI eventDetails） |
禁忌 / 坑
- 受控值类型是
number | null——清空时回调拿到null，state 须用useState<number | null>，别假设永远是 number。 - 用
value/onValueChange即受控，须自管 state；非受控只给defaultValue。 - 无可见标题时给
aria-label，否则读屏无名。
相关
Input · Textarea · Select · Checkbox · CheckboxGroup · Radio
Playground
<NumberField defaultValue={3} />