Stepper

Stepper is a visual way to increase or decrease a numerical value. The illustration on the left dynamically changes based on the selected value.

Configurations

Basic example

Note: The set of images provided to the imageSources prop are indexed as 1 - value where the value refers to the value of the Stepper passed to value prop.

Customised buttons

Implementation

Props

value

Sets the value of the Stepper.

counterLabel

The label for the counter. Does not handle pluralisation.

onChange

Callback for when the number is incremented or decremented.

imageSources

Array of image paths for each step, its lenght determines the max value for the Stepper.

id

HTML id.

incrementLabel (optional)

How to describe the incrementation.
Defaults to 'add one'.

decrementLabel (optional)

How to describe the decrementation.
Defaults to 'remove one'.

incrementIcon (optional)

The icon for incrementation.
Defaults to <SvgIcon name="plus" title="add one" />.

decrementIcon (optional)

The icon for decrementation.
Defaults to <SvgIcon name="minus" title="remove one" />.