| Status | ||||
|---|---|---|---|---|
|
| Status | ||||
|---|---|---|---|---|
|
When To Use
A Stepper is used when a series of pages are needed to complete a process or connect a series of pages in a specific order. The primary case is in the context of a multi-step form.
Generally for multi-step forms:
A multi-step form does not include the Terms of use step
A multi-step form should show the beginning and the end step; e.g. “Competed or Application Submitted or Submitted for Review”
The first step must include a “cancel” button; e.g. “Cancel” or “Cancel Application” or “Cancel {{Subject}}”
When Not To Use
If you have a scenario that requires additional sub steps and or another multistep form; under a single step. It’s reccomended to rethink using a multistep form for the main flow; or change the overall design pattern to avoid sub-steps.
Component Features
Each step label must be a minimum of 1 word and a maximum of 3 words long
When a step is selected the <title> element should be updated to reflect the current step number and step label
e.g. Step: 1: {{Current Step Label}}
The page or application context should be included
e.g. “Step 1: {{Current Step Label}} - {{Page/Application Context}}”
Desktop (medium and large screen)
When a step is selected the <h1> element must append the current step details
e.g. {{Page/Application Context}} - Step 1: {{Current Step Label}}
The current step must be identified
The selected step must be identified
The completed step must be identified
Mobile (small screen)
On Desktop (medium and large screen)
On Mobile (medium and large screen)
When a step is selected the <h1> element must append the current step details
e.g. {{Page/Application Context}} - Step 1: {{Current Step Label}}
The current step of total steps is identified and the next step is identified