BRAID
Braid Logo
 

Stepper

A progress indicator that guides users through multi-step tasks by displaying position and completion status.
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 necessary 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.

Alignment

The Stepper is center-aligned by default, positioning it at the center of its container with step labels center-aligned to their corresponding steps.
Default alignment (center)
Open in Playroom
To align the Stepper to the left of its container, set the align prop to left. This will also left-align step labels to their corresponding steps.
Left aligned
Open in Playroom

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

Linear mode

The default mode is linear, which requires each step be completed before advancing. This mode requires a step number be passed to the progress prop to indicate the user’s progress.
Use the buttons to move between steps and update their completion status
Open in Playroom

Non-linear mode

For non-sequential steps, the mode can be set to non-linear. This allows users to navigate between steps regardless of completion.In this mode, the activeStep prop is required and individual step completion can be controlled via the complete prop on the Step itself.
Use the buttons to move between steps without changing their completion status
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

Providing user controls

We recommend providing "Back" and "Continue" buttons for the user to navigate through the steps. When relevant, you may also want to provide a "Save" button so the user can return to their progress later.Regardless of the actions you provide, consider which are most important and apply an appropriate visual hierarchy using variants solid, ghost, soft and transparent.
Content
Open in Playroom
When designing in a language other than english, the button word lengths may become too long to fit side by side on mobile. If this is the case, you can stack buttons vertically with “Continue” on the top followed by “Back” then “Save”.

When to use

Use a Stepper:
  • to guide users through complex, multi-step tasks or processes.
Don’t use a Stepper:
  • if the task only requires one or two straightforward actions.

Data attributes

Braid components are very explicit about the properties they accept, which makes providing arbitrary data attributes not possible. Instead, a data prop can be provided as a single collection of data attributes.
<Stepper
  data={{ testid: 'stepper-1' }}
  // => data-testid="stepper-1"
>
  ...
</Stepper>
Open in Playroom