Step indicator

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

  • Content:
    @use 'sass:math';
    @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
    @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
    @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;
    
    $ontario-icon-size: 24px;
    
    .ontario-step-indicator .ontario-step-indicator--without-back-button,
    .ontario-step-indicator .ontario-step-indicator--with-back-button {
    	display: flex;
    	align-items: center;
    }
    
    .ontario-step-indicator .ontario-step-indicator--without-back-button {
    	justify-content: flex-end;
    }
    
    .ontario-step-indicator .ontario-step-indicator--with-back-button {
    	justify-content: space-between;
    }
    
    .ontario-step-indicator .ontario-h4 {
    	margin: (spacing.$spacing-4 + math.div(spacing.$spacing-1, 2)) 0;
    
    	@media screen and (max-width: breakpoints.$small-breakpoint) {
    		margin: spacing.$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-step-indicator .ontario-button.ontario-button--tertiary {
    	display: flex;
    	align-items: center;
    	margin: spacing.$spacing-3 spacing.$spacing-0;
    	padding-left: spacing.$spacing-2;
    	padding-right: spacing.$spacing-4;
    	min-width: spacing.$spacing-8;
    
    	@media screen and (max-width: breakpoints.$small-breakpoint) {
    		width: unset;
    	}
    
    	.ontario-icon {
    		margin: spacing.$spacing-0 math.div(spacing.$spacing-3, 2) spacing.$spacing-0 spacing.$spacing-0;
    		padding: spacing.$spacing-0;
    		min-width: $ontario-icon-size;
    		min-height: $ontario-icon-size;
    	}
    }
    
    .ontario-step-indicator hr {
    	padding: spacing.$spacing-0;
    	margin: spacing.$spacing-0;
    }
    
    .ontario-step-indicator p {
    	max-width: globalVariables.$standard-width;
    }
    
  • URL: /components/raw/step-indicator/step-indicator.scss
  • Filesystem Path: fractal/components/components/form/step-indicator/step-indicator.scss
  • Size: 2.1 KB
  • Content:
    .ontario-step-indicator .ontario-step-indicator--without-back-button,.ontario-step-indicator .ontario-step-indicator--with-back-button{display:flex;align-items:center}.ontario-step-indicator .ontario-step-indicator--without-back-button{justify-content:flex-end}.ontario-step-indicator .ontario-step-indicator--with-back-button{justify-content:space-between}.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{display:flex;align-items:center;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{width:unset}}.ontario-step-indicator .ontario-button.ontario-button--tertiary .ontario-icon{margin:0 .375rem 0 0;padding:0;min-width:24px;min-height:24px}.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: 1 KB

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

Example


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.

Don’t:

  • 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

Don't do this


Screenshot of a step indicator that shows four steps, crossed out to indicate that this is not a recommended approach.

If you have any questions or feedback, please get in touch.