示例
直接操作示例，查看组件在具体任务中的状态与反馈。
本地数量编辑
使用建议
同时保存原始字符串与解析结果
value 使用字符串以保留空值、负号和小数点等编辑中间态；onValueChange 的数值可能为 null，宿主应使用 details.rawValue 回传显示值。
把步进和最终校验分开
方向键和显式按钮按 min、max 与 step 步进，但普通输入不会自动裁剪；宿主应在提交或业务约定的时机处理越界值。
只把内部按钮文案交给 Provider
增减按钮默认读取 MonkeysProvider 的 numberInput 消息；字段标签、单位、格式说明和校验错误仍由宿主业务 i18n 提供。
引入方式
从已验证的公开子路径导入组件；全局样式接入方式见安装指南。
import { BaseNumberInput } from '@inf-monkeys-tech/monkeys-design/components/base';当前限制
- NumberInput 只解析普通十进制字符串，不支持科学计数、千分位、货币或地区格式、表达式解析与滚轮改值。
- T17 尚缺 manual keyboard/focus、deterministic visual 与 packed React 18/19 证据；编辑中间态、步进边界和移动端输入尚未完成最终人工闭环。
- Manual keyboard/focus review, deterministic visual evidence, and packed React 18/19 checks are pending T17/T23.
API
查看组件源码export interface BaseNumberInputProps
extends Omit<
InputHTMLAttributes<HTMLInputElement>,
| 'aria-valuemax'
| 'aria-valuemin'
| 'aria-valuenow'
| 'aria-valuetext'
| 'className'
| 'defaultValue'
| 'disabled'
| 'inputMode'
| 'max'
| 'min'
| 'onChange'
| 'onKeyDown'
| 'readOnly'
| 'role'
| 'step'
| 'style'
| 'type'
| 'value'
> {
value?: string;
defaultValue?: string;
min?: number;
max?: number;
step?: number;
showStepControls?: boolean;
incrementLabel?: string;
decrementLabel?: string;
invalid?: boolean;
disabled?: boolean;
readOnly?: boolean;
appearance?: BaseAppearance;
className?: string;
classNames?: BaseNumberInputClassNames;
style?: CSSProperties;
onChange?: InputHTMLAttributes<HTMLInputElement>['onChange'];
onKeyDown?: InputHTMLAttributes<HTMLInputElement>['onKeyDown'];
onValueChange?: (
value: number | null,
details: BaseNumberInputValueChangeDetails,
) => void;
}| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
value | 数值输入框当前的受控数值；空值使用 null。 | string | — |
defaultValue | 非受控模式下使用的初始值。 | string | '' |
min | 允许的最小数值。 | number | — |
max | 允许的最大数值。 | number | — |
step | 数值每次增加或减少的步长。 | number | 1 |
showStepControls | 是否显示数值增加和减少按钮。 | boolean | false |
incrementLabel | 增加数值按钮的可访问名称。 | string | — |
decrementLabel | 减少数值按钮的可访问名称。 | string | — |
invalid | 是否进入无效状态并应用相应的校验样式与语义。 | boolean | false |
disabled | 是否禁用该组件及其可交互行为。 | boolean | false |
readOnly | 是否将控件设为只读，同时保留聚焦与内容读取能力。 | boolean | false |
appearance | 覆盖组件使用的外观令牌或局部样式配置。 | BaseAppearance | — |
className | 追加到组件根元素的 CSS 类名。 | string | — |
classNames | 按组件公开的结构插槽分别追加 CSS 类名。 | BaseNumberInputClassNames | — |
style | 追加到组件根元素的内联样式。 | CSSProperties | — |
onChange | 底层输入事件发生时调用的原生变更回调。 | InputHTMLAttributes<HTMLInputElement>['onChange'] | — |
onKeyDown | 输入框收到键盘事件时调用的回调。 | InputHTMLAttributes<HTMLInputElement>['onKeyDown'] | — |
onValueChange | 值变化时调用的回调；参数结构以当前组件的 Props 类型为准。 | (
value: number | null,
details: BaseNumberInputValueChangeDetails,
) => void | — |