Step indicator

Use a step indicator to show a user’s progress as they move through a multi-step form.

  • Content:
    @use "sass:math";
    @import "../../../../theme/assets/styles/sass/variables-import";
    
    .ontario-step-indicator {
        .ontario-step-indicator--without-back-button {
            display: flex;
            justify-content: flex-end;
            align-items: center;
        }
    
        .ontario-step-indicator--with-back-button {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
    
        .ontario-h4 {
            margin: ($spacing-4 + math.div($spacing-1, 2)) 0;
    
            @media screen and (max-width: $small-breakpoint) {
                margin: $spacing-4 0;
                text-align: right;
            }
        }
    
        /**
        * Tertiary button defaults are overridden to achieve the mini-button specifications
        * width is unset in small screen size to remove unnecessary space being added to the button
        * min-width and max-width are set for small screen size to ensure the "back" button doesn't break and protrude into the text to the right
        */
        .ontario-button.ontario-button--tertiary {
            margin: $spacing-3 0;
            padding-left: $spacing-2;
            padding-right: $spacing-4;
            min-width: $spacing-8;
    
            @media screen and (max-width: $small-breakpoint) {
                margin: ($spacing-2 - math.div($spacing-1, 2)) 0;
                width: unset;
                min-width: 7.5rem;
                max-width: 8rem;
            }
    
            .ontario-icon {
                margin: 0 math.div($spacing-3, 2) 0 0;
                padding: 0;
            }
        }
    
        hr {
            padding: 0;
            margin: 0;
        }
    
        p {
            max-width: $standard-width;
        }
    }
    
  • URL: /components/raw/step-indicator/step-indicator.scss
  • Filesystem Path: fractal/components/components/form/step-indicator/step-indicator.scss
  • Size: 1.6 KB
  • Content:
    .ontario-step-indicator .ontario-step-indicator--without-back-button{display:flex;justify-content:flex-end;align-items:center}.ontario-step-indicator .ontario-step-indicator--with-back-button{display:flex;justify-content:space-between;align-items:center}.ontario-step-indicator .ontario-h4{margin:1.125rem 0}@media screen and (max-width: 40em){.ontario-step-indicator .ontario-h4{margin:1rem 0;text-align:right}}.ontario-step-indicator .ontario-button.ontario-button--tertiary{margin:.75rem 0;padding-left:.5rem;padding-right:1rem;min-width:3rem}@media screen and (max-width: 40em){.ontario-step-indicator .ontario-button.ontario-button--tertiary{margin:.375rem 0;width:unset;min-width:7.5rem;max-width:8rem}}.ontario-step-indicator .ontario-button.ontario-button--tertiary .ontario-icon{margin:0 .375rem 0 0;padding:0}.ontario-step-indicator hr{padding:0;margin:0}.ontario-step-indicator p{max-width:48rem}
  • URL: /components/raw/step-indicator/step-indicator.css
  • Filesystem Path: fractal/components/components/form/step-indicator/step-indicator.css
  • Size: 907 Bytes

Guiding principle: Start simple.

When to use this component

Form step indicators are used to show progress. They are used in multi-step forms that span multiple pages.

Use them when a form is linear and does not involve conditional logic.


Best practices

Do:

  • balance the number of questions and the length of each page in the form
    • limit the number of questions on any individual page to avoid overwhelming users
    • group related questions together to avoid having a form with too many steps
    • conduct usability testing to ensure the flow of questions and steps makes sense to your users
  • include ‘back’ and ‘continue’ buttons for navigation between steps
  • ensure that the browser back button takes the user to the previous step, unless the user is completing a step that can only be done once (for example, submitting a payment)
  • assign a unique h1 heading for each page in the form. The heading should relate to the information being asked for on the current page
  • label primary buttons so it’s clear where the buttons are taking the user (for example, “Continue”)
Diagram of a form page showing the placement of the header, step label, back button, H1 heading, form content, and primary button to move forward.

Do not:

  • include additional indicators of progress as percentage or time
  • create nested step indicators — individual sections within a multi-step form do not need their own progress indicators
  • use accordions or other show/hide components as containers for steps or questions
  • create long single-page forms
  • include ‘cancel’ buttons on form pages
  • Include a form stepper on pages where users are not inputting data (for example, introductory or confirmation pages)

Do not use older-style step indicators

Horizontal step indicators showing steps with labels were popular in an earlier era of web design.

These kinds of indicators are no longer recommended because they:

  • take up too much space
  • do not scale well on small screens
  • can distract and confuse some users
Screenshot of a step indicator that shows four steps, crossed out to indicate that this is not a recommended approach.

Help improve this page

If you have suggestions, advice or any questions about step indicator, the design system team would love to hear from you.