Stepper

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

Default stepper

The stepper has two buttons, a minus and a plus button. It’s possible to tap into the text field as well.

Default stepper with enabled decrease and increase button

Disabled stepper

If you reach the bottom or top value, the appropriate button becomes disabled.

Disabled stepper

Default stepper

The stepper has two buttons, a minus and a plus button. It’s possible to tap into the text field as well.

Default stepper with enabled decrease and increase button

Disabled stepper

If you reach the bottom or top value, the appropriate button becomes disabled.

Disabled stepper

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.

  • 7,820

  • 78...

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

  • 52,834

  • 52k