Numeric field with steppers, min / max clamping, and precision.
A number field with Input's floating-label chrome plus stepper buttons, arrow-key and PageUp / PageDown stepping, min / max clamping, and decimal precision. Error and success states, light / dark / auto themes.
Add the package. Input's floating-label chrome plus stepper buttons and keyboard stepping.
pnpm add @roy-ui/uiimport { NumberInput } from '@roy-ui/ui';
// or just this component:
import { NumberInput } from '@roy-ui/ui/number-input';Steppers in the trailing slot, ArrowUp / ArrowDown to step, PageUp / PageDown to jump by ten, clamped to min and max. precision rounds on blur and step. onChange gives you a number or null.
Step with the buttons or the arrow keys; the value clamps to [1, 200] and the steppers disable at the bounds.
<NumberInput
label="Seats"
defaultValue={5}
min={1}
max={200}
step={1}
onChange={(n) => console.log(n)}
/>precision rounds to two decimals on blur and step; step moves by 0.5.
<NumberInput label="Hourly rate" defaultValue={49.5} step={0.5} precision={2} />Controlled with value (number | null) + onChange, or uncontrolled with defaultValue.
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Required. Floating label. |
value | number | null | — | Controlled value; null means empty. |
defaultValue | number | null | — | Uncontrolled initial value. |
onChange | (value: number | null) => void | — | Fires with the parsed number (or null). |
min / max | number | — | Clamp bounds; steppers disable at the edges. |
step | number | 1 | Increment for steppers and arrow keys. |
precision | number | — | Decimal places to round to on blur / step. |
steppers | boolean | true | Show the +/- buttons. |
error | boolean | string | false | Error state. A string becomes the helper line. |
theme | 'light' | 'dark' | 'auto' | 'auto' | Follow the system or force a side. |