Back to all examples

Show a simple progress indicator on a question page with multiple questions

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

      <GoabText as="h3" size="body-m" mt="xl" mb="none" color="secondary">Step 1 of 5</GoabText>
      <GoabText as="h2" mt="xs" mb="xl">Personal information</GoabText>

      <GoabFormItem label="What is your name?">
        <GoabInput onChange={() => {}} name="name" ariaLabel="what is your name?" width="50ch" />
      </GoabFormItem>

      <GoabFormItem label="What is your phone number?" mt="l">
        <GoabInput
          onChange={() => {}}
          name="phone-number"
          ariaLabel="what is your phone number?"
          leadingContent="+1"
        />
      </GoabFormItem>

      <GoabFormItem label="What is your home postal code?" mt="l">
        <GoabInput
          onChange={() => {}}
          name="postal-code"
          width="14ch"
          ariaLabel="what is your home postal code"
        />
      </GoabFormItem>

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

Show a simple progress indicator on a question page when grouping multiple related questions together.

When to use

Use this pattern when:

  • Grouping multiple related questions on a single page improves the user experience
  • The questions form a logical unit (e.g., personal information fields)
  • Users benefit from progress tracking across the form
  • A step-based indicator shows progress through form sections

Considerations

  • Display progress as “Step X of Y” when grouping questions into sections
  • Include a clear section heading that describes the group of questions
  • Use a subdued text color for the progress indicator
  • Include a back link for navigation to previous sections
  • Position related questions close together with consistent spacing
  • The leadingContent prop on inputs can add prefixes like country codes