Leaf UI
  • 简体中文

      • InputNumber 数字输入框

      输入数量、金额等数字内容。

      基础用法

      交互预览基础用法

      当前数量：3

      basic.tsx
      import { InputNumber } from '@sudden3/leaf-ui';
import { useState } from 'react';
export function InputNumberBasic() {
  const [value, setValue] = useState<number | null>(3);
  return (
    <div className="leaf-demo-stack">
      <div className="leaf-demo-field">
        <label htmlFor="number-quantity">数量</label>
        <InputNumber
          id="number-quantity"
          name="quantity"
          min={0}
          max={20}
          value={value}
          onChange={setValue}
        />
      </div>
      <div className="leaf-demo-field">
        <label htmlFor="number-price">金额</label>
        <InputNumber
          id="number-price"
          min={0}
          step={0.1}
          precision={2}
          defaultValue={19.9}
          prefix="¥"
        />
      </div>
      <InputNumber
        aria-label="百分比"
        defaultValue={50}
        min={0}
        max={100}
        suffix="%"
        controls={false}
      />
      <div className="leaf-demo-row">
        <InputNumber aria-label="只读" defaultValue={12} readOnly />
        <InputNumber aria-label="禁用" defaultValue={8} disabled />
      </div>
      <p className="leaf-demo-note">当前数量：{value ?? '未填写'}</p>
    </div>
  );
}

      InputNumber API

      属性类型默认值说明
      value / defaultValuenumber | nullnull受控值 / 初始值，空值为 null
      onChange(value: number | null) => void—有效数字变化或清空时触发
      min / maxnumber无限制可输入数字的范围
      stepnumber1增减步长
      precisionnumber—小数精度，范围 0–15
      controlsbooleantrue展示增减按钮
      keyboardbooleantrue支持上下方向键增减
      size'sm' | 'md' | 'lg''md'控件尺寸
      status'error' | 'warning'—校验状态
      prefix / suffixReactNode—前后装饰内容
      disabled / readOnlybooleanfalse禁用 / 只读
      refRef<HTMLInputElement>—输入框引用

      类型

      定义组件属性或组装列表时可导入相关类型。

      import type { InputNumberProps } from '@sudden3/leaf-ui';

      使用说明

      输入中的负号或小数点会暂时保留。失焦或回车时校正范围和精度；增减操作避免常见的小数累加误差。设置 name 可通过 FormData 提交，required、form、autoComplete 等属性传给输入元素，并支持表单 reset。className 与 style 作用于外层容器。