@ug666/react 文档演示

NumberInput 数字步进输入框

NumberInput 在文本框两侧提供 − / + 步进按钮，适合购物车数量、分页大小、精度参数等整数或小数录入场景。

导入方式

所有示例均直接使用 @ug666/react 中的真实组件导出。

import { NumberInput } from '@ug666/react'

基础整数

最简用法，无 min/max 限制的整数步进。

带边界限制

设置 min=1、max=10，到达边界时对应按钮自动禁用。

范围 1–10，当前：5

小数精度

precision=2、step=0.1 时，每次步进 0.1 并保留两位小数。

当前：1.50

三种尺寸

sm / default / lg 三种尺寸满足不同密度的表单布局。

default

禁用状态

disabled=true 时所有交互被锁定，视觉上呈现半透明。

代码示例

在业务中受控绑定购物车数量的完整用法。

import { useState } from 'react'
import { NumberInput } from '@ug666/react'

export function QuantitySelector() {
  const [qty, setQty] = useState(1)

  return (
    <div className="space-y-2">
      <label className="text-sm font-medium text-text-primary">购买数量</label>
      <NumberInput
        value={qty}
        onValueChange={setQty}
        min={1}
        max={99}
        step={1}
      />
    </div>
  )
}

Props 说明

属性	类型	默认值	说明
value	number	—	当前值（受控模式）。
defaultValue	number	0	初始值（非受控模式）。
min	number	—	最小值，达到边界时禁用减号按钮。
max	number	—	最大值，达到边界时禁用加号按钮。
step	number	1	每次 +/- 按钮的步进量。
precision	number	0	小数位数，输出值会自动保留对应精度。
disabled	boolean	false	禁用所有交互。
placeholder	string	—	输入框占位文本。
size	'sm' \| 'default' \| 'lg'	'default'	控件整体尺寸。
onValueChange	(value: number) => void	—	值变化时触发的回调。