Number Field
Numeric stepper with increment and decrement buttons. Enforces min/max boundaries and configurable step increments.
import
{ NumberField } from "@pepulux/ui"Default — controlled value
Value: 1
Custom step
Increment and decrement in steps larger than 1.
Increases in $10 steps
Minimum 5 seats
Min / Max boundaries
Decrement and increment buttons disable automatically at the boundary.
Buttons disable at boundaries 1 and 5
Error state
At least 1 ticket is required
Disabled
Contact sales to change
With hint text
Added before and after each session
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | — | Controlled value |
| onChange | (value: number) => void | — | Called when value changes via buttons or direct input |
| min | number | — | Minimum allowed value — disables decrement at boundary |
| max | number | — | Maximum allowed value — disables increment at boundary |
| step | number | 1 | Amount added or subtracted per click |
| label | string | — | Field label above the control |
| hint | string | — | Helper text below (shown when no error) |
| error | boolean | false | Red border error state |
| errorText | string | — | Error message (shown instead of hint when error=true) |
| disabled | boolean | false | Disables all controls |
| className | string | — | Additional CSS classes on the wrapper |