NumberInput

Numeric input with +/- stepper buttons, keyboard arrow control (Shift = large step), PageUp/Down, Home/End to clamp, and optional mouse-wheel adjust.

Quantity

Price

No steppers

Usage

import { NumberInput } from '@bwo-ui/react';

const [qty, setQty] = useState<number | null>(1);

<NumberInput value={qty} onValueChange={setQty} min={0} max={99} step={1} />

<NumberInput defaultValue={19.99} step={0.01} precision={2} prefix="$" />

Props

Prop	Type	Default	Description
`value`	`number \| null`	—	Controlled value.
`defaultValue`	`number \| null`	—	Initial uncontrolled value.
`onValueChange`	`(value: number \| null) => void`	—	Change handler.
`min / max`	`number`	—	Bounds for stepping and clamping.
`step`	`number`	`1`	Increment for ArrowUp/Down and the stepper buttons.
`largeStep`	`number`	—	Step applied with Shift / PageUp / PageDown. Default: step × 10.
`precision`	`number`	—	Decimal places. Default: derived from step.
`showSteppers`	`boolean`	`true`	Render the +/- stepper buttons.
`clampOnBlur`	`boolean`	`true`	Clamp to [min, max] on blur.
`prefix / suffix`	`string`	—	Adornments rendered inside the field.
`disableWheel`	`boolean`	—	Disable mouse-wheel value changes.