| 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.
Component Features
Desktop (medium and large screen)
Mobile (small screen)
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