Stepper form
Stepper is designed to help users fill a complex or long form. By deviding forms into smaller steps, we reduce users mental load and clarifies information structure.
Last updated
Stepper is designed to help users fill a complex or long form. By deviding forms into smaller steps, we reduce users mental load and clarifies information structure.
Last updated
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.
Never add an illustration to a stepper. Use the Onboarding form instead.
Do not confuse users with mixed topics within a single step; keep one idea per screen.
Use standard form components such as fields, select options, checkboxes, etc.
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.
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.
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.
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.
Responsive : The summary is not necessary for the mobile display. ROMA handle this automatically.
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 :
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.
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.
Errors are managed automatically by Roma.
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.
