Show a simple progress indicator on a question page

React

Angular

Web Components

<GoabLink leadingIcon="arrow-back" size="small" mb="none">
        Back
      </GoabLink>

      <GoabText as="h3" size="body-m" mt="xl" mb="m" color="secondary">Question 3 of 9</GoabText>

      <GoabFormItem label="Do you currently live in Canada?" labelSize="large">
        <GoabRadioGroup
          name="canada"
          ariaLabel="Do you currently live in Canada?"
          onChange={() => {}}>
          <GoabRadioItem value="yes" label="Yes" />
          <GoabRadioItem value="no" label="No" />
        </GoabRadioGroup>
      </GoabFormItem>

      <GoabButton type="submit" mt="2xl">
        Save and continue
      </GoabButton>

Show a simple progress indicator on a question page to help users understand their progress through the form.

When to use

Use this pattern when:

Building a multi-question form where progress tracking helps users
Users benefit from knowing how many questions remain
The form has a linear flow with a known number of questions
Following the one-question-per-page pattern for government services

Considerations

Display progress as “Question X of Y” for clarity
Use a subdued text color for the progress indicator
Include a back link for navigation to previous questions
Position the progress indicator above the question
Keep the format consistent throughout the form