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" />
.