BRAID
Braid Logo
 

Stepper

Open in Playroom

Accessibility

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.

Linear mode

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.
Open in Playroom

Non-linear mode

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.
Open in Playroom

Step interactions

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:
Open in Playroom

Setting the active step

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:
Open in Playroom

De-emphasizing the tone

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.
Open in Playroom

Alignment

The Stepper is center-aligned by default, but this can be customised via the align prop.
Open in Playroom