Stepper

Stepper is a field allowing users to enter a numeric value and incrementally adjust it.

Anatomy

Stepper / Style

Item

Name

Description

Component

Optional

1

Label

Indicates to the user the context for the requested data.

 

Yes

2

Help icon with Tooltip

Provides non-essential additional information that can help the user enter correct data.

Icon

Tooltip

Yes

3

Minus Button

Decreases the value by a defined increment.

Bare Icon Button

 

4

Value

The numerical value that the user can edit.
Minimum and maximum values can be set. An increment step is set by default to 1 but can be adjusted to any number, including decimals.

 

 

5

Plus Button

Increases the value by a defined increment.

Bare Icon Button

 

6

Hint text

Provides additional information that can help the user enter the data correctly.

 

Yes

Do

Do

The label should be placed on top of the field.

Don't

Don't

Don't alter the position of the label. If your design would benefit from a different layout, please reach out to the Deisgn system team.