Number stepper
Tabular numeric input with affordances for nudging by step. Used for thresholds, retry counts, and budgets where typing is precise but small adjustments dominate.
Included in the single kansho full pack. Components are not offered as separate installs.
Variants
Component documentation
Number Stepper
components/inputs/number-stepper.tsxPurpose
Edits a numeric value with a native input and increment or decrement buttons.
Appropriate use
Use for bounded numeric settings where stepwise adjustment is common and direct typing remains useful.
Example
components/inputs/number-stepper.tsx has a representative live example in the "Variants" section on /components/number-stepper.
States
Supports sm and md sizes, minimum and maximum boundaries, custom step, unit suffix, disabled buttons at limits, and field status.
API and props
NumberStepper accepts value, onChange, min, max, step, unit, status, size, id, aria-describedby, aria-invalid, aria-label, and className.
Dependencies
React, Lucide icons, Field, and the Kansho cn utility.
Accessibility
Uses a native number input, names increment and decrement buttons, and forwards description and invalid-state relationships.
Limitations
The component clamps button changes but leaves locale formatting and non-numeric typed-input recovery to the browser and caller; its disabled field status is visual only and does not disable interaction.
Source
Source: components/inputs/number-stepper.tsx.
Full pack
components/inputs/number-stepper.tsx is documented at /components/number-stepper and installs only through the single Kansho full pack; no individual component install is offered.