/
Stepper
  • Ready for review

    • Stepper

    Owned by Sara Greenwood
    Last updated: Jan 31, 2024 by Uni (Hwa Young) Oh
    3 min read

    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:

    • Terms of Use page is not included on the Stepper

    • A Review page should be included

    • The Confirmation page should be included as part of the Stepper

    • The maximum number of steps is ideally 7

    • Step pages 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 recommended 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}}

    • Steps:

      • Current: FontAwesome Circle-dot, 32px, black #000000

      • Not Started: FontAwesome Circle (thin), 32px, black #000000

      • Completed: - FontAwesome Circle-check, 32 px, black #000000

    • Bar:

      • Completed: 5px, black #000000

      • Upcoming: 5px, dark grey #6e757c

    Stepper - Desktop - proposed

    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

    • Steps:

      • Current: FontAwesome Circle-dot, 20px, black #000000

      • Next step: FontAwesome Circle (thin), 20px, black #000000

    • Bar:

      • 2px, dark grey #6e757c

    Stepper - Mobile - proposed

     

     

    Current stepper (remove when published)

     

     

    Version 2.02 . March 2024 . City of Toronto Web Standards