Numeric input with optional stepper buttons for increment/decrement operations. Supports min/max bounds, custom step values, and formatted display.
The stepper buttons can be positioned on the right (default) or on both sides of the input.
Use formatValue and parseValue to display formatted numbers like currency or percentages.
Arrow UpArrow Down| Prop | Type | Default | Description |
|---|---|---|---|
value | number | - | Controlled value |
defaultValue | number | 0 | Uncontrolled default value |
onChange | (value: number) => void | - | Change callback |
min | number | - | Minimum allowed value |
max | number | - | Maximum allowed value |
step | number | 1 | Increment/decrement step |
showStepper | boolean | true | Show stepper buttons |
formatValue | (value: number) => string | - | Format display value |
label | string | - | Label text |
helperText | string | - | Helper/error text |
variant | 'default' | 'success' | 'error' | 'default' | Visual variant styling |
disabled | boolean | false | Disabled state |
placeholder | string | - | Placeholder text |