IN PROGRESS DRAFT
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)
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}}”
On 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
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