Use counter to increase or decrease a value in a counter field. You may use the buttons to add or subtract units from the value, or use directly the input where the number is display to set an specific quantity

When to use

Add product units

Used when you can add product units quantity from catalogue or product view, you can add individually allowing to increase or decrease a numerical value.

Add customization option

Used when you can select more than one (1) unit per option (row), you can add individually allowing to increase or decrease a numerical value until complete the allowed number of options.

If complete the mandatory number of options, the rest of options (counters) turning off, and appear a check signal the list title.

When don't use

If a user can select multiple items in a set but no more than one (1) per option (row), checkboxes should be used instead of counters.

Main elements

Number field

  • Make it clear what you’re increasing and decreasing the value of by placing it in close context of the value it’s changing.
  • If values need to change dramatically, use text field with number field.

Plus & less buttons

  • Allows a user to increase or decrease a numerical value.
  • When value is zero is not possible to reduce, use disabled counter.
  • If values shouldn’t change or won’t be changing, use disabled counter.



The counter input have two versions depending of use case (add product units or add customization options)

And allows for a two states: default & disabled.

Did this page help you?