Quantity stepper
A number field with minus and plus buttons for decreasing or increasing the value one step at a time.
See it
What it is
A quantity stepper is a numeric input with a minus button on one side and a plus button on the other. Each press changes the value by a fixed step, which makes the common adjustment faster and less error-prone than typing a number from scratch.
Reach for one when values are small, bounded, and adjusted one unit at a time, such as cart quantity, guest count, or ticket count. Keep the number editable for people who need to jump from 1 to 20 instead of pressing plus nineteen times.
Gotcha: the icon buttons still need names, and the limits must be visible in behavior. Disable minus at the minimum and plus at the maximum, validate typed values, and do not silently wrap from one end to the other. A trash action may be clearer than letting a cart quantity fall to zero.
Ask AI for it
Build a quantity stepper for a shopping cart with a minus button, an editable input type number, and a plus button in one compact control. Set min=1, max=99, and step=1, and use the HTMLInputElement stepDown() and stepUp() methods so button presses follow the input constraints. Give the buttons aria-label="Decrease quantity" and aria-label="Increase quantity", select the input text on focus, clamp typed values on blur, and dispatch an input event after each button change. Disable each button at its corresponding limit and include clear hover, active, disabled, and :focus-visible states.