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