NumberInput
Numeric field with stepper buttons. Steps, clamps, and accelerates with Shift.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | null | — | Controlled value. |
defaultValue | number | null | — | Initial uncontrolled value. |
onChange | (value: number | null) => void | — | Change handler. |
min | number | — | Minimum value, clamped on blur and enter. |
max | number | — | Maximum value, clamped on blur and enter. |
step | number | 1 | Amount to increment or decrement per click. |
shiftStep | number | 10 | Multiplier applied to step while Shift is held. |
prefix | ReactNode | — | Static text inside the field, before the number (e.g. '$'). |
suffix | ReactNode | — | Static text inside the field, after the number (e.g. '%', 'ms'). |
hideStepper | boolean | — | Hide the spinner buttons and keep only arrow-key/scroll stepping. |
size | "sm" | "md" | "md" | Control height. |
disabled | boolean | — | Prevents interaction. |
invalid | boolean | — | Invalid styling. Defaults to the enclosing Field error state. |
containerClassName | string | — | Class applied to the Control wrapper. className applies to the input element. |
Usage
NumberInput changes values through step buttons, arrow keys, and press-and-hold repeat. Shift multiplies the step by shiftStep. Values are clamped to min and max on blur or Enter. Draft text is not clamped on each keystroke.
Basic with min/max/step
With suffix
With prefix
Hide stepper
import { NumberInput } from "@solarius/onset";
import type { NumberInputProps } from "@solarius/onset";
<NumberInput min={0} max={100} step={5} />
<NumberInput suffix="%" defaultValue={42} />
<NumberInput prefix="$" defaultValue={29.99} step={0.01} />
<NumberInput hideStepper defaultValue={7} />