A purpose-built counter replacing the native number input. 44px targets either side of a large monospaced figure, the whole control tinted by the exception colour it represents, capped at the quantity ordered, and typeable for large counts.
Also called: quantity stepper · count on a phone · plus minus counter
- 1Values clamp between 0 and the quantity ordered
- 2The control tints and outlines in its colour once the value is above zero
- 3The number field selects on focus so a value can be replaced by typing
- 4Buttons disable at the bounds
In the component: 'The native number input's spinners are ~10px, only appear on hover, and sit inside a wide empty box that wastes the row. On a phone at a lumber yard that is unusable… So: a big minus, the number, a big plus. The number stays typeable for "we got 113 of them" — tapping 113 times is not a workflow — but the common case, nudging by one, is a target you can hit with a glove on.'
- A desktop control is unusable in a yard on a phone
- Hover-only affordances do not exist on touch
See it on your own jobs
Twenty minutes, your numbers, no slide deck. We’ll build one of your real buildings in front of you and send you the estimate link at the end — yours to keep either way.
or keep browsing features →