NumberInput
Numeric input with − / + stepper buttons. Long-press to repeat. Use for
small integer or decimal tweaks — guest count, nights, replicas, retry limit.
Default#
Loading…
Clamped to a range#
Loading…
Sizes#
Loading…
Props#
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | undefined | — | Current value (controlled). |
| defaultValue | number | undefined | — | Default value (uncontrolled). |
| onValueChange | ((value: number) => void) | undefined | — | Fires when the value changes via input or stepper. |
| min | number | undefined | 0 | Minimum allowed value. Default `0`. |
| max | number | undefined | — | Maximum allowed value. Default `Infinity`. |
| step | number | undefined | 1 | Step increment. Default `1`. |
| size | enum | md | Visual size. Default `'md'`. |
| aria-label | string | undefined | — | Accessible label. |
Accessibility#
- Input is
role="spinbutton"witharia-valuenow / valuemin / valuemax. - Stepper buttons are labelled "Increment" / "Decrement" and reference the
input via
aria-controls. - Keyboard: Arrow Up / Down step by
step(default 1). The input itself accepts free typing; the value is clamped on commit. - Always pass
aria-labeldescribing what the number represents.