NumberInput

数值输入框（NumberInput）用于精确输入数值，内置递增/递减按钮，支持步进、范围限制、居中布局和自定义图标。

import { NumberInput } from '@skyroc/web-ui';
import type { NumberInputProps, NumberInputClassNames, NumberInputControlProps } from '@skyroc/web-ui';

何时使用

默认模式下，递增和递减按钮显示在输入框右侧。

Preview

Code

<NumberInput placeholder="请输入数字" />

设置 center 后，减号按钮移至左侧、加号按钮在右侧，输入值居中显示。

Preview

Code

<NumberInput center />

通过 decrementIcon 和 incrementIcon 替换默认的加减号图标。

Preview

Code

<NumberInput
  decrementIcon={<Icon icon="lucide:dollar-sign" />}
  incrementIcon={<Icon icon="lucide:percent" />}
/>

设置 clearable 后，hover 时显示清除按钮，点击可清空输入值。

Preview

Code

<NumberInput clearable />

通过 min、max 限制输入范围，step 设置每次递增/递减的步进值。到达边界时对应按钮自动禁用。

<NumberInput min={0} max={100} step={5} />

通过 value + onValueChange 实现受控模式；非受控模式使用 defaultValue。

const [count, setCount] = useState(0);

<NumberInput value={count} onValueChange={setCount} />

属性	说明	类型	默认值
value	受控模式的当前值	number \| string	-
defaultValue	非受控模式的默认值	number \| string	-
onValueChange	值变化时的回调	(value: number \| string \| undefined) => void	-
min	允许的最小值，到达后递减按钮自动禁用	number	-
max	允许的最大值，到达后递增按钮自动禁用	number	-
step	每次递增/递减的步进值	number	1
center	居中布局，减号在左、加号在右、输入居中	boolean	false
clearable	是否显示清除按钮（hover 时出现）	boolean	false
disabled	禁用状态	boolean	-
readOnly	只读状态	boolean	-
placeholder	输入框占位文本	string	-
decrementIcon	自定义递减按钮图标	ReactNode	-
incrementIcon	自定义递增按钮图标	ReactNode	-
leading	输入框前置插槽内容	ReactNode	-
trailing	输入框后置插槽内容（位于清除按钮和操作按钮之前）	ReactNode	-
controlProps	透传给内部 input 控件的属性	NumberInputControlProps	-
size	尺寸，影响高度、内边距和字号	'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'	'md'
className	根容器 class	ClassValue	-
classNames	各 slot 的自定义 class	NumberInputClassNames	-

NumberInput 各 slot 的自定义 class 配置。

内部输入控件的属性。继承原生 input 属性（排除 value / defaultValue / min / max），并增加以下字段。

CSS 类名类型

string | null | undefined | Record<string, boolean> | ClassValue[]