Renders a semantic nav element to encapsulate the step links. Given this is a Landmark Region, in order to comply with the General Principles of Landmark Design it is neccessary for it to have an aria-label.
Translation hint The aria-label can be customised by providing the label prop.
Implements the roving tabindex pattern when the steps are interactive (see below).
When used in linear mode (default), the progressbar role is implemented, providing the additional context of progression within the defined flow to screen readers.
By default the mode is set to linear, requiring a step number be passed to the progress prop indicating how far through the process the user is.
For cases where the steps are not necessarily sequential, the mode can be set to non-linear.
In this mode, the activeStep prop is required and the completion of an individual step can be controlled by providing the complete prop to the Step itself.
Steps can be made interactive by providing a handler via the onStepClick prop. This function receives the stepNumber and the id (as provided to the Step component itself).
Click on a step to toggle its completion status:
In linear mode, the step number passed to the progress prop will also be the active step. Any previous step can be made active using the activeStep prop.
In non-linear mode, the activeStep prop is required to set the starting point.
Click on a step to set it as the active step:
The Stepper can be de-emphasized by setting the tone to neutral.
This makes the highlight colour follow the default text colour, including inverting on dark surfaces to improve contrast.