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 '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
    @use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
    @use '@ontario-digital-service/ontario-design-system-global-styles/dist/styles/scss/1-variables/breakpoints.variables' as breakpoints;
    .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.$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-button.ontario-button--tertiary {
    		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) {
    			margin: (spacing.$spacing-2 - math.div(spacing.$spacing-1, 2)) spacing.$spacing-0;
    			width: unset;
    			min-width: 7.5rem;
    			max-width: 8rem;
    		.ontario-icon {
    			margin: spacing.$spacing-0 math.div(spacing.$spacing-3, 2) spacing.$spacing-0 spacing.$spacing-0;
    			padding: spacing.$spacing-0;
    	hr {
    		padding: spacing.$spacing-0;
    		margin: spacing.$spacing-0;
    	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: 1.9 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


  • 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.

Contact us

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