Stepper
Adjust a small number with − and + buttons instead of summoning a keyboard. The value display is a spinbutton carrying aria-valuenow/min/max, and the buttons disable at the bounds.
Example
3
<Stepper aria-label="Guests" value={value} onValueChange={setValue} min={1} max={9} />Formatted value
$5k
<Stepper aria-label="Budget" defaultValue={5} step={5} min={0} max={50} format={(n) => `$${n}k`} />Props
| Prop | Type | Default | Notes |
|---|---|---|---|
value / defaultValue | number | — | Controlled or uncontrolled. |
onValueChange | (value: number) => void | — | Called on change. |
min / max / step | number | ± ∞ / 1 | Bounds and increment. |
format | (value: number) => ReactNode | — | Format the displayed value. |
aria-label | string | — | Required — names the spinbutton. |