Counter
Counters allow users to increase or decrease a numerical value, either by typing or using button icons.
On this page
How to use counters
Counters can be used to edit the quanity of a product or item. Users can either increase or decrease the quantity amount with button icons, or add their own amount by typing into the input field.
When using counters:
- They can be used in product cards on listings pages, product display pages and at checkout
- Only use a counter when the input values are likely to be smaller amounts
- They should always have a default amount which is usually '1'
Counters can cause friction for users if the amount they want to input is very different from the default value option. If the user is likely to deviate substantially from the default, use a different input.
Types of counters
Horizontal
The horizontal format is the default option for counters.
Vertical
There are some cases where a vertical counter can be used, but this type of counter isn't available with a label.
Bin icon variant
A variant including a bin icon button is available that, when interacted with, sets the input amount to 0.