Stepper form

Overview

Stepper should be used:

• For standard, sequenced experiences

• For complex item creation

Stepper should not be used:

• For onboarding experiences. Use the Onboarding form instead.

Guidelines

One topic at a time

Do not confuse users with mixed topics within a single step; keep one idea per screen.

Fields must be easy to fill

Use standard form components such as fields, select options, checkboxes, etc.

Provide enough context and guidance

Users need to understand why we're asking for specific information and how we will use that information. Add context and guidance to make the user feel confident.

Structure

Page Title

Unlike other forms where Back link on Page Title uses "Back to..." structure, here we use "Exit". It helps users understand this link will leave the form, not going back to the previous step.

Therefore, you must not add an "Exit" option in the Save Bar : it will unnecessary duplicate the option and confuse users or make the interface appear cluttered.

Progress steps

• Keep labels short and consistent (nouns for all steps, actions for all steps).

• Steps are not clickable. Users must complete each step before going to the next one.

Summary (Optional Layout)

To help users complete forms, a summary can be added to the right side.

Adding a summary to a stepper form can be useful in the following use cases :

• Provide additional informations related to the form to help users fill in the form (ex : add context to help create a new object)

• Remind users of informations filled in previous steps of current form

For this layout, Form panel is 640px, Summary panel is 360px with 24px separation.

Savebar

Savebar actions are standardized.

• One button group with Back + Continue actions

• A third action "Save as draft" can be added depending on needs. It will save informations as it is and exit the form.

When the user clicks the Primary button on the last step of the Stepper, the Async button gets a Loading status.

Save Bar sticks to the bottom of the page to be always accessible in case of scrolling page. If your page isn't scrollable, Save Bar will stick to Panel Content as following :

Behaviors

Last steps

For the last step, Primary Button content changes to "Save" : it indicate it's the final action on the stepper form. When clicked, the Primary Button changes its state to 'Loading' before saving and exiting the form.

Returning on form

If a user exits a stepper form without submitting it, and the form is saved as a draft, when they return, they will start from the first step of the form.

This is because adding a Summary is optional. Therefore, users might not remember the initial steps of the form.

Error management

Users are aware of errors when the color of the relevant progress steps changes.

• If there are errors within one step of the stepper, the user is automatically redirected to the relevant step.

• If there are errors within several steps of the stepper, the user is redirected to the first step where there’s an error. The user can then navigate between the steps to solve their errors.

An alert appears at the top of the page, displaying all the errors from the current step.

Once the errors are resolved, the user must save the step. If they fail to do so and click on the progress steps component, they will trigger a 'prompt before you leave' modal.

If an input is in an error state, but content is already filled in the Summary panel:

• The input field remains in an error state until the user makes changes.

• The content of the input in error is not erased.

• The content in the Summary panel does not change until the user makes changes.