Back to all examples

Review page

<GoabText size="heading-l" mt="none" mb="none">Review your answers</GoabText>
      <GoabText size="heading-s" color="secondary" mt="l" mb="none">Your situation</GoabText>
      <GoabxTable mt="l">
        <tbody>
          <tr>
            <td>
              <strong>What was your (the applicant's) relationship to the deceased?</strong>
            </td>
            <td>Other</td>
            <td>
              <GoabxLink>Change</GoabxLink>
            </td>
          </tr>
          <tr>
            <td>
              <strong>My relationship to the deceased was</strong>
            </td>
            <td>Manager</td>
            <td>
              <GoabxLink>Change</GoabxLink>
            </td>
          </tr>
          <tr>
            <td>
              <strong>
                Was the deceased part of a household that was receiving Assured Income for the
                Severely Handicapped (AISH) or Income Support?
              </strong>
            </td>
            <td>No</td>
            <td>
              <GoabxLink>Change</GoabxLink>
            </td>
          </tr>
          <tr>
            <td>
              <strong>Was the deceased a minor?</strong>
            </td>
            <td>No</td>
            <td>
              <GoabxLink>Change</GoabxLink>
            </td>
          </tr>
          <tr>
            <td>
              <strong>What was the deceased's marital status at time of death?</strong>
            </td>
            <td>Married</td>
            <td>
              <GoabxLink>Change</GoabxLink>
            </td>
          </tr>
          <tr>
            <td>
              <strong>Did the deceased have any dependents?</strong>
            </td>
            <td>No</td>
            <td>
              <GoabxLink>Change</GoabxLink>
            </td>
          </tr>
          <tr>
            <td>
              <strong>Was the deceased a sponsored immigrant?</strong>
            </td>
            <td>Yes</td>
            <td>
              <GoabxLink>Change</GoabxLink>
            </td>
          </tr>
        </tbody>
      </GoabxTable>
      <GoabButtonGroup alignment="start" mt="2xl">
        <GoabxButton type="primary">Confirm and continue</GoabxButton>
        <GoabxButton type="tertiary">Back to application overview</GoabxButton>
      </GoabButtonGroup>
  );
}
onChangeClick(): void {
    console.log("Change clicked");
  }

  onConfirmClick(): void {
    console.log("Confirm clicked");
  }

  onBackClick(): void {
    console.log("Back clicked");
  }
<goab-text size="heading-l" mt="none" mb="none">Review your answers</goab-text>
<goab-text size="heading-s" color="secondary" mt="l" mb="none">Your situation</goab-text>
<goabx-table mt="l">
  <tbody>
    <tr>
      <td><strong>What was your (the applicant's) relationship to the deceased?</strong></td>
      <td>Other</td>
      <td><goabx-link>Change</goabx-link></td>
    </tr>
    <tr>
      <td><strong>My relationship to the deceased was</strong></td>
      <td>Manager</td>
      <td><goabx-link>Change</goabx-link></td>
    </tr>
    <tr>
      <td><strong>Was the deceased part of a household that was receiving Assured Income for the Severely Handicapped (AISH) or Income Support?</strong></td>
      <td>No</td>
      <td><goabx-link>Change</goabx-link></td>
    </tr>
    <tr>
      <td><strong>Was the deceased a minor?</strong></td>
      <td>No</td>
      <td><goabx-link>Change</goabx-link></td>
    </tr>
    <tr>
      <td><strong>What was the deceased's marital status at time of death?</strong></td>
      <td>Married</td>
      <td><goabx-link>Change</goabx-link></td>
    </tr>
    <tr>
      <td><strong>Did the deceased have any dependents?</strong></td>
      <td>No</td>
      <td><goabx-link>Change</goabx-link></td>
    </tr>
    <tr>
      <td><strong>Was the deceased a sponsored immigrant?</strong></td>
      <td>Yes</td>
      <td><goabx-link>Change</goabx-link></td>
    </tr>
  </tbody>
</goabx-table>
<goab-button-group alignment="start" mt="2xl">
  <goabx-button type="primary" (onClick)="onConfirmClick()">Confirm and continue</goabx-button>
  <goabx-button type="tertiary" (onClick)="onBackClick()">Back to application overview</goabx-button>
</goab-button-group>
document.getElementById("confirm-btn").addEventListener("_click", () => {
  console.log("Confirm clicked");
});
<goa-text size="heading-l" mt="none" mb="none">Review your answers</goa-text>
<goa-text size="heading-s" color="secondary" mt="l" mb="none">Your situation</goa-text>
<goa-table version="2" mt="l">
  <table>
    <tbody>
    <tr>
      <td><strong>What was your (the applicant's) relationship to the deceased?</strong></td>
      <td>Other</td>
      <td><goa-link>Change</goa-link></td>
    </tr>
    <tr>
      <td><strong>My relationship to the deceased was</strong></td>
      <td>Manager</td>
      <td><goa-link>Change</goa-link></td>
    </tr>
    <tr>
      <td><strong>Was the deceased part of a household that was receiving Assured Income for the Severely Handicapped (AISH) or Income Support?</strong></td>
      <td>No</td>
      <td><goa-link>Change</goa-link></td>
    </tr>
    <tr>
      <td><strong>Was the deceased a minor?</strong></td>
      <td>No</td>
      <td><goa-link>Change</goa-link></td>
    </tr>
    <tr>
      <td><strong>What was the deceased's marital status at time of death?</strong></td>
      <td>Married</td>
      <td><goa-link>Change</goa-link></td>
    </tr>
    <tr>
      <td><strong>Did the deceased have any dependents?</strong></td>
      <td>No</td>
      <td><goa-link>Change</goa-link></td>
    </tr>
    <tr>
      <td><strong>Was the deceased a sponsored immigrant?</strong></td>
      <td>Yes</td>
      <td><goa-link>Change</goa-link></td>
    </tr>
    </tbody>
  </table>
</goa-table>
<goa-button-group alignment="start" mt="2xl">
  <goa-button version="2" type="primary" id="confirm-btn">Confirm and continue</goa-button>
  <goa-button version="2" type="tertiary" id="back-btn">Back to application overview</goa-button>
</goa-button-group>

A review page where users can check their answers before submitting a form, with options to change individual responses.

When to use

Use this pattern when:

  • Users need to review their form answers before submission
  • At the end of a multi-step form or wizard
  • Before finalizing applications or important submissions
  • When accuracy of submitted information is critical

Considerations

  • Display all answered questions with current values
  • Provide “Change” links for each answer
  • Show “Not provided” for skipped optional questions
  • Include visually hidden text in change links for accessibility
  • Consider grouping related answers under section headings
  • For large forms, consider review pages at the end of each section