When to Use
- Quantity selection (e-commerce: add to cart)
- Small number adjustments (1-10 range)
- Settings with discrete values
- NOT for large number ranges (use slider or text input)
Design
[ - ] 4 [ + ]
- Minus and plus buttons flanking the value
- Value is editable by direct typing
- Min and max boundaries (gray out button at limit)
- Hold button to rapid-increment
- Step size: 1 by default, configurable
Rules
- Minimum touch target: 44x44px per button
- Show current value prominently between buttons
- Disable minus at minimum, plus at maximum
- Allow direct keyboard input for quick jumps
- Debounce rapid clicks to prevent over-counting
Accessibility
role="spinbutton"aria-valuenow,aria-valuemin,aria-valuemax- Arrow keys to increment/decrement
- Type a number directly