ElyriNumberInput
数字输入：内置加减步进按钮，支持 min / max / step 与小数精度处理，键盘上下键步进，可直接参与原生表单提交。
安装
添加组件
pnpm dlx @elyri/cli@latest add number-input示例
基础用法
通过 defaultValue 指定初始值，点击步进按钮或按上下方向键调整。
import { NumberInput } from './components/elyri/NumberInput';
export function Example() {
return <NumberInput defaultValue={1} aria-label="Quantity" />;
}范围与步长
用 min / max / step 约束取值，到达边界时对应按钮自动禁用。
import { NumberInput } from './components/elyri/NumberInput';
export function Example() {
return <NumberInput defaultValue={3} min={0} max={5} aria-label="Quantity" />;
}小数精度
step 为小数时按步长的小数位取整，避免浮点误差。
import { NumberInput } from './components/elyri/NumberInput';
export function Example() {
return <NumberInput defaultValue={0} step={0.1} aria-label="Amount" />;
}前缀与后缀
prefix / suffix 可放货币符号、单位或图标，后缀位于数字与步进按钮之间。
¥
kg
$USD
import { NumberInput } from './components/elyri/NumberInput';
export function Example() {
return (
<div>
<NumberInput prefix="¥" defaultValue={99} step={0.01} aria-label="Price" />
<NumberInput suffix="kg" defaultValue={5} min={0} aria-label="Weight" />
<NumberInput prefix="$" suffix="USD" defaultValue={20} aria-label="Amount" />
</div>
);
}尺寸
三档尺寸与 Input 对齐：sm / md / lg。
import { NumberInput } from './components/elyri/NumberInput';
export function Example() {
return (
<div>
<NumberInput size="sm" defaultValue={1} aria-label="Small" />
<NumberInput size="lg" defaultValue={3} aria-label="Large" />
</div>
);
}禁用与校验失败
禁用不可交互；invalid 标记 aria-invalid 并显示红框。
import { NumberInput } from './components/elyri/NumberInput';
export function Example() {
return (
<div>
<NumberInput disabled defaultValue={1} aria-label="Disabled" />
<NumberInput invalid defaultValue={1} aria-label="Invalid" />
</div>
);
}属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
value | number | null | — | 受控值，null 表示空；不传则为非受控 |
defaultValue | number | null | null | 非受控初始值，默认 null |
onValueChange | (value: number | null) => void | — | 值变化回调，清空且 allowEmpty 时回传 null |
min | number | — | 最小值 |
max | number | — | 最大值 |
step | number | 1 | 步长（含键盘与按钮），默认 1 |
allowEmpty | boolean | false | 是否允许清空为 null，默认 false（失焦回落为上一个有效值） |
size | 'sm' | 'md' | 'lg' | 'md' | 尺寸：sm / md / lg |
invalid | boolean | — | 校验失败态：红框并标记 aria-invalid |
prefix | ReactNode | — | 前缀内容，渲染在输入框左侧 |
suffix | ReactNode | — | 后缀内容，渲染在数字与步进按钮之间 |
name | string | — | 表单字段名，随原生表单提交 |
...rest | InputHTMLAttributes | — | 其余属性透传给原生 input |