Quantity Stepper

Plus and minus with the number rolling in the direction it moved, and remove instead of zero.

2

2 in cart

Build a cart quantity stepper. Structure: a pill with a minus button, a fixed-width digit slot, and a plus button, plus a status line underneath. The rule most steppers get wrong: AT ONE, MINUS BECOMES REMOVE. Change the glyph, change the aria-label to "Remove item", and colour it with your destructive token. A stepper that parks a line at zero leaves a row sitting in the cart that is not in the order, and nobody notices until checkout. The number must ROLL IN THE DIRECTION IT MOVED: up on increase, down on decrease. Track the last direction in state and drive the enter and exit offsets from it. A number that always enters from the same side makes plus and minus feel like the same button. The digit slot is a FIXED-WIDTH box with overflow hidden and tabular numerals, so the control does not resize when the count reaches double digits. At the maximum, disable and fade the plus AND say "max" in the status line. A button that silently stops working reads as a bug. Keep it at about 200ms per roll. This control gets pressed repeatedly, and anything slower turns a held button into a queue of animations. Accessibility: real aria-labels on both buttons that change with state, and aria-live="polite" on the status line, since the rolling digit is a visual effect a screen reader never sees. Under prefers-reduced-motion, change the digit with no roll and no direction. The remove state and the maximum behave exactly the same. Colors as tokens: primary ink for the number, destructive for the remove state, surface and border for the pill. Build the component, not this demo of it. - Ambient motion that IS the component may loop: a drifting background, a marquee, a spinner while something is genuinely loading. - Do not add any timer, interval, loop or script that performs a person's action by itself. No auto-hover, no auto-click, no cycling through states, no pretend submitting, no replaying the interaction on a schedule. - Every state that answers a person waits for a real event from that person. - Placeholder copy and sample content are welcome. Simulated behaviour is not.

Rate it
0
0

We'd like to measure how the site gets used, with Google Analytics. It sets cookies. Everything the site needs to work runs either way. How we handle data