NumberInput

NumberInput 组件,源码位于 components/ui/number-input.tsx。以下示例为组件库源码的构建期真实渲染。

样式变体

数字Number

纯数字输入框,无步进按钮,适合直接键入的数值字段。

金额Amount

金额态:左侧展示前置货币符号 ¥,precision=2 保留两位小数。

¥

百分比Percent

百分比态:右侧展示后置百分号 %,min/max 锁在 0-100 区间。

%

状态变体

默认Default

默认态:可交互、边框为 control-default。

禁用Disabled

禁用态走 --color-disabled-*,不可交互。

错误Invalid

错误态用 aria-invalid,边框转 destructive,供表单校验失败时使用。

形态变体

数字增减Number stepper

数字态加左右步进按钮,各自 ±step 并受 min/max 夹取。

金额增减Amount stepper

金额态加步进按钮:¥ 与输入区连成一组,¥ 右侧分割线移除。

¥

百分比增减Percent stepper

百分比态加步进按钮:输入区与 % 连成一组,% 左侧分割线移除。

%