Stepper

IN PROGRESS DRAFT

Open

Open

 

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}}”

•  

• 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