Stepper

Use stepper to increase or decrease a value in a counter field.

---

Best practices

• Make it clear what you’re increasing and decreasing the value of by placing it in close context of the value it’s changing.
• Eliminate merchants’ need to remember values by using a numerical indicator outside of the stepper that shows the maximum value.

---

Content guidelines

Avoid truncating the value.

Avoid abbreviating values (10k, 1m), instead, make the text smaller to fit the space.

---

Related components

• If values need to change dramatically, use text field with number field
• If values shouldn’t change or won’t be changing, use disabled text field