Quantity Stepper
WAI-ARIA spinbutton stepper with hold-to-repeat, per-digit rolling value, boundary shake, sizes and a remove-at-minimum trash state.
Preview
Your cart
6 items- Stoneware mugAsh · 350 ml$36.00
- Pour-over kettleMatte ink$64.00
- Single-origin beans250 g bag$43.50
SmallDense lists
MediumDefault
LargeTouch, max 10
WeightStep 0.5 kg
DisabledOut of stock
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| value / defaultValue | number | min | Controlled or initial value; pair value with onValueChange. |
| onValueChange | (value: number) => void | — | Called with the clamped, snapped value. |
| min / max | number | 0 / 99 | Range; the matching key disables at each edge. |
| step | number | 1 | Arrow and button step; decimals snap to the step grid. |
| largeStep | number | step × 10 | PageUp / PageDown step. |
| size | "sm" | "md" | "lg" | "md" | 32, 36 or 44 px tall. |
| label | string | "Quantity" | Accessible name of the group and spinbutton. |
| formatValue | (value: number) => string | String | Display text and aria-valuetext; changed digits still roll. |
| onRemove | () => void | — | At the minimum the minus key becomes a trash key; Delete also calls it. |
| removeLabel | string | "Remove" | Accessible name of the trash key. |
| disabled | boolean | false | Dims the control and removes it from the tab order. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.