forms
Stepper
Example
3
Import
import { Stepper } from '@connor-adams/designsystem'Usage
A compact numeric input for small bounded quantities (split count, reminder days, statement months back).
<Stepper defaultValue={3} min={1} max={12} format={(v) => `${v} mo`} onValueChange={setMonths} />
Variants: min/max/step, size="sm|default", format, disabled. For wide ranges use Slider; for free numeric entry use Input.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | undefined | — | |
| defaultValue | number | undefined | 0 | |
| onValueChange | ((value: number) => void) | undefined | — | |
| min | number | undefined | -Infinity | |
| max | number | undefined | — | |
| step | number | undefined | 1 | |
| disabled | boolean | undefined | — | |
| size | "sm" | "default" | undefined | default | |
| format | ((value: number) => ReactNode) | undefined | — |