Stepper
A numeric stepper with debounced commit, for "rapid clicks" inputs like quantity or percentage.
70%
Usage
import { Stepper } from '@epilot/spark-ui/stepper'const [value, setValue] = useState(70)
<Stepper
value={value}
onValueChange={setValue}
min={0}
max={100}
step={5}
formatValue={(v) => `${v}%`}
/>onValueChange fires on every click for instant UI feedback. onValueCommit fires once after the user stops clicking (default: 400ms after the last click), so rapid clicks don't fan out into one network request per click.
Examples
Debounced commit
Wire onValueCommit to your persistence call.
3
Committed (debounced 400ms): 3API Reference
| Prop | Type | Default |
|---|---|---|
value | number | — |
onValueChange | (value: number) => void | — |
onValueCommit | (value: number) => void | — |
min | number | 0 |
max | number | 100 |
step | number | 1 |
formatValue | (value: number) => string | String |
commitDelayMs | number | 400 |
disabled | boolean | false |
aria-label | string | — |
decreaseLabel | string | "Decrease" |
increaseLabel | string | "Increase" |