表单组件版本 0.1.0

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 · boolean

API 参考

属性类型默认值说明
valuenumber | nullnull受控提供当前数值,空输入时使用空值。

组合结构

  1. 01NumberInput

键盘约定

  • 原生数值输入支持上下方向键,Tab 按顺序访问减号、输入框与加号。

可访问性契约

  • 增加与减少操作需要由使用方提供可访问名称。
  • 达到最小值或最大值时禁用不可能的步进操作。