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

Matthew James Cowlishaw, Matthew David Smith and Daniel Francis Butters, each Insolvency Practitioners of Teneo Restructuring Ltd, were appointed Joint Energy Administrators of Bulb Energy Limited on 24 November 2021. The affairs, business and property of the Company are managed by the Joint Energy Administrators. The Joint Energy Administrators act as agents of the Company and contract without personal liability.