NumberInput 数字输入框
输入数值并通过递增、递减按钮按合法步长调整结果。
使用概览
适合使用
- 席位数、数量或阈值需要键盘输入与步进微调时。
不建议使用
- 值是连续范围且拖动比较更直观,或输入并非真正数值时。
真实示例
席位数量输入
在一到二十之间输入或逐步调整席位数。
正在加载示例…
安装
本地候选警告Registry 地址仅指向当前本地文档站;npm 包也只用于本地候选验证,尚未公开发布。
pnpm dlx shadcn@4.16.0 add http://127.0.0.1:3000/r/number-input.json基础用法
导入
import { NumberInput } from "@richardqiu/quartz/number-input";JSX
<NumberInput aria-label="席位数" defaultValue={4} min={1} max={20} incrementLabel="增加席位" decrementLabel="减少席位" />状态与控制摘要
默认
键盘焦点可见
已禁用
只读
无效
label · textactive · booleanAPI 参考
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
value | number | null | null | 受控提供当前数值,空输入时使用空值。 |
组合结构
- 01
NumberInput
键盘约定
- 原生数值输入支持上下方向键,Tab 按顺序访问减号、输入框与加号。
可访问性契约
- 增加与减少操作需要由使用方提供可访问名称。
- 达到最小值或最大值时禁用不可能的步进操作。