Help users to Check answers
Let users check their answers before submitting information to a service.
<div class="app-example app-example--tabs">
<div class="app-example__toolbar">
<a href="/patterns/check-answers/default/index.html" class="app-example__new-window" target="_blank">
Open this
<span class="govuk-visually-hidden">check answers</span>
example in a new tab
</a>
</div>
<iframe title="Check answers example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable app-example__frame--xl" src="/patterns/check-answers/default/index.html" frameBorder="0" loading="lazy"></iframe>
</div>
<span id="options-check-answers-example"></span>
<ul class="app-tabs" role="tablist">
<li class="app-tabs__item js-tabs__item" role="presentation"><a href="#check-answers-example-html" role="tab" aria-controls="check-answers-example-html" data-track="tab-html">HTML</a></li>
<li class="app-tabs__item js-tabs__item" role="presentation"><a href="#check-answers-example-nunjucks" role="tab" aria-controls="check-answers-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
</ul>
<div class="app-tabs__heading js-tabs__heading"><a href="#check-answers-example-html" aria-controls="check-answers-example-html" data-track="tab-html">HTML</a></div>
<div class="app-tabs__container js-tabs__container" id="check-answers-example-html" role="tabpanel">
<div class="app-example__code">
<pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-width-container"</span>></span>
<a href="#" class="govuk-back-link">Back</a> <main class="govuk-main-wrapper " id="main-content" role="main"> <div class="govuk-grid-row"> <div class="govuk-grid-column-two-thirds-from-desktop"> <h1 class="govuk-heading-l">Check your answers before sending your application</h1> <h2 class="govuk-heading-m">Personal details</h2> <dl class="govuk-summary-list govuk-!-margin-bottom-9"> <div class="govuk-summary-list__row"> <dt class="govuk-summary-list__key"> Name </dt> <dd class="govuk-summary-list__value"> Sarah Philips </dd> <dd class="govuk-summary-list__actions"> <a class="govuk-link" href="#"> Change<span class="govuk-visually-hidden"> name</span> </a> </dd> </div> <div class="govuk-summary-list__row"> <dt class="govuk-summary-list__key"> Date of birth </dt> <dd class="govuk-summary-list__value"> 5 January 1978 </dd> <dd class="govuk-summary-list__actions"> <a class="govuk-link" href="#"> Change<span class="govuk-visually-hidden"> date of birth</span> </a> </dd> </div> <div class="govuk-summary-list__row"> <dt class="govuk-summary-list__key"> Address </dt> <dd class="govuk-summary-list__value"> 72 Guild Street<br>London<br>SE23 6FH </dd> <dd class="govuk-summary-list__actions"> <a class="govuk-link" href="#"> Change<span class="govuk-visually-hidden"> address</span> </a> </dd> </div> <div class="govuk-summary-list__row"> <dt class="govuk-summary-list__key"> Contact details </dt> <dd class="govuk-summary-list__value"> <p class="govuk-body">07700 900457</p> <p class="govuk-body">sarah.phillips@example.com</p> </dd> <dd class="govuk-summary-list__actions"> <a class="govuk-link" href="#"> Change<span class="govuk-visually-hidden"> contact details</span> </a> </dd> </div> </dl> <h2 class="govuk-heading-m">Application details</h2> <dl class="govuk-summary-list govuk-!-margin-bottom-9"> <div class="govuk-summary-list__row"> <dt class="govuk-summary-list__key"> Previous application number </dt> <dd class="govuk-summary-list__value"> 502135326 </dd> <dd class="govuk-summary-list__actions"> <a class="govuk-link" href="#"> Change<span class="govuk-visually-hidden"> previous application number</span> </a> </dd> </div> <div class="govuk-summary-list__row"> <dt class="govuk-summary-list__key"> Licence type </dt> <dd class="govuk-summary-list__value"> For personal use </dd> <dd class="govuk-summary-list__actions"> <a class="govuk-link" href="#"> Change<span class="govuk-visually-hidden"> licence type</span> </a> </dd> </div> <div class="govuk-summary-list__row"> <dt class="govuk-summary-list__key"> Home address </dt> <dd class="govuk-summary-list__value"> 72 Guild Street<br>London<br>SE23 6FH </dd> <dd class="govuk-summary-list__actions"> <a class="govuk-link" href="#"> Change<span class="govuk-visually-hidden"> home address</span> </a> </dd> </div> <div class="govuk-summary-list__row"> <dt class="govuk-summary-list__key"> Licence period </dt> <dd class="govuk-summary-list__value"> Valid for 6 months </dd> <dd class="govuk-summary-list__actions"> <a class="govuk-link" href="#"> Change<span class="govuk-visually-hidden"> licence period</span> </a> </dd> </div> </dl> <h2 class="govuk-heading-m">Now send your application</h2> <p class="govuk-body">By submitting this application you are confirming that, to the best of your knowledge, the details you are providing are correct.</p> <form action="/form-handler" method="post" novalidate> <input type="hidden" name="answers-checked" value="true"> <button class="govuk-button" data-module="govuk-button"> Accept and send </button> </form> </div> </div> </main> </div>
<div class="app-tabs__heading js-tabs__heading"><a class="app-tabs__heading-link" href="#check-answers-example-nunjucks" aria-controls="check-answers-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></div>
<div class="app-tabs__container js-tabs__container" id="check-answers-example-nunjucks" role="tabpanel"><div class="app-example__code">
<pre data-module="app-copy" tabindex="0"><code class="hljs js">{% <span class="hljs-keyword">from</span> <span class="hljs-string">"govuk/components/back-link/macro.njk"</span> <span class="hljs-keyword">import</span> govukBackLink %}
{% from "govuk/components/summary-list/macro.njk" import govukSummaryList %} {% from "govuk/components/button/macro.njk" import govukButton %} {% block beforeContent %} {{ govukBackLink({ text: "Back", href: "#" }) }} {% endblock %} {% block content %} <div class="govuk-grid-row"> <div class="govuk-grid-column-two-thirds-from-desktop"> <h1 class="govuk-heading-l">Check your answers before sending your application</h1> <h2 class="govuk-heading-m">Personal details</h2> {{ govukSummaryList({ classes: 'govuk-!-margin-bottom-9', rows: [ { key: { text: "Name" }, value: { text: "Sarah Philips" }, actions: { items: [ { href: "#", text: "Change", visuallyHiddenText: "name" } ] } }, { key: { text: "Date of birth" }, value: { text: "5 January 1978" }, actions: { items: [ { href: "#", text: "Change", visuallyHiddenText: "date of birth" } ] } }, { key: { text: "Address" }, value: { html: "72 Guild Street<br>London<br>SE23 6FH" }, actions: { items: [ { href: "#", text: "Change", visuallyHiddenText: "address" } ] } }, { key: { text: "Contact details" }, value: { html: '<p class="govuk-body">07700 900457</p><p class="govuk-body">sarah.phillips@example.com</p>' }, actions: { items: [ { href: "#", text: "Change", visuallyHiddenText: "contact details" } ] } } ] }) }} <h2 class="govuk-heading-m">Application details</h2> {{ govukSummaryList({ classes: 'govuk-!-margin-bottom-9', rows: [ { key: { text: "Previous application number" }, value: { text: "502135326" }, actions: { items: [ { href: "#", text: "Change", visuallyHiddenText: "previous application number" } ] } }, { key: { text: "Licence type" }, value: { text: "For personal use" }, actions: { items: [ { href: "#", text: "Change", visuallyHiddenText: "licence type" } ] } }, { key: { text: "Home address" }, value: { html: "72 Guild Street<br>London<br>SE23 6FH" }, actions: { items: [ { href: "#", text: "Change", visuallyHiddenText: "home address" } ] } }, { key: { text: "Licence period" }, value: { text: "Valid for 6 months" }, actions: { items: [ { href: "#", text: "Change", visuallyHiddenText: "licence period" } ] } } ] }) }} <h2 class="govuk-heading-m">Now send your application</h2> <p class="govuk-body">By submitting this application you are confirming that, to the best of your knowledge, the details you are providing are correct.</p> <form action="/form-handler" method="post" novalidate> <input type="hidden" name="answers-checked" value="true"> {{ govukButton({ text: "Accept and send" }) }} </form> </div> </div> {% endblock %}