Whenever you design a form, you should start by splitting it across multiple pages with each page containing just one thing, for example:
one piece of information you’re telling a user
one decision they have to make
one question they have to answer
This helps users focus and understand what’s being asked of them.
When you’re asking just one question on a page, you can make the question the page’s heading. Your page heading will then most likely be the same as the <label> or <legend> for the input.
For example, on a page that only asks users for their postcode, the question ‘What is your postcode’ would be both the page heading and the most logical <label> for your text input.
To avoid repetition, one option is to use a visually hidden <label> or <legend>.
However, this option only removes visual duplication and will not help users of screen readers. They will still hear both the page heading and the visually hidden <label> or <legend>.
To prevent this, set the contents of the <label> or <legend> as the page heading (except if you're asking more than one question on the page).
Labels as page headings
To set the contents of a label as the page heading, you need to put the <label> tag inside the <h1> tag. You can either do this in HTML, or by using the Nunjucks macro and setting isPageHeading: true.
You then need to apply classes to the <label> to make it look like a heading.
<div class="app-example app-example--tabs">
<div class="app-example__toolbar">
<a href="/get-started/labels-legends-headings/label-h1/index.html" class="app-example__new-window" target="_blank">
Open this
<span class="govuk-visually-hidden">labels as page headings - making labels and legends headings</span>
example in a new tab
</a>
</div>
<iframe title="Labels as page headings - Making labels and legends headings example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/get-started/labels-legends-headings/label-h1/index.html" frameBorder="0" loading="lazy"></iframe>
</div>
<span id="options-labels-as-page-headings-making-labels-and-legends-headings-example"></span>
<ul class="app-tabs" role="tablist">
<li class="app-tabs__item js-tabs__item" role="presentation"><a href="#labels-as-page-headings-making-labels-and-legends-headings-example-html" role="tab" aria-controls="labels-as-page-headings-making-labels-and-legends-headings-example-html" data-track="tab-html">HTML</a></li>
<li class="app-tabs__item js-tabs__item" role="presentation"><a href="#labels-as-page-headings-making-labels-and-legends-headings-example-nunjucks" role="tab" aria-controls="labels-as-page-headings-making-labels-and-legends-headings-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
</ul>
<div class="app-tabs__heading js-tabs__heading"><a href="#labels-as-page-headings-making-labels-and-legends-headings-example-html" aria-controls="labels-as-page-headings-making-labels-and-legends-headings-example-html" data-track="tab-html">HTML</a></div>
<div class="app-tabs__container js-tabs__container" id="labels-as-page-headings-making-labels-and-legends-headings-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-form-group"</span>></span>
<h1class="govuk-label-wrapper"><labelclass="govuk-label govuk-label--l"for="example">
govuk-label--l
</label></h1><divid="example-hint"class="govuk-hint">
This example shows an <h1> around a <label> with the class of govuk-label--l
</div><inputclass="govuk-input"id="example"name="example"type="text"aria-describedby="example-hint"></div>
{{ govukInput({
label: {
text: "govuk-label--l",
classes: "govuk-label--l",
isPageHeading: true
},
hint: {
text: "This example shows an <h1> around a <label> with the class of govuk-label--l"
},
id: "example",
name: "example"
}) }}
Legends as page headings
To set the contents of a legend as the page heading, you need to put the <legend> tag outside the <h1> tag. You can either do this in HTML, or by using the Nunjucks macro and setting isPageHeading: true.
As with labels, you also need to apply classes to the <legend> to make it look like a heading.
<div class="app-example app-example--tabs">
<div class="app-example__toolbar">
<a href="/get-started/labels-legends-headings/legend-h1/index.html" class="app-example__new-window" target="_blank">
Open this
<span class="govuk-visually-hidden">legends as page headings - making labels and legends headings</span>
example in a new tab
</a>
</div>
<iframe title="Legends as page headings - Making labels and legends headings example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/get-started/labels-legends-headings/legend-h1/index.html" frameBorder="0" loading="lazy"></iframe>
</div>
<span id="options-legends-as-page-headings-making-labels-and-legends-headings-example"></span>
<ul class="app-tabs" role="tablist">
<li class="app-tabs__item js-tabs__item" role="presentation"><a href="#legends-as-page-headings-making-labels-and-legends-headings-example-html" role="tab" aria-controls="legends-as-page-headings-making-labels-and-legends-headings-example-html" data-track="tab-html">HTML</a></li>
<li class="app-tabs__item js-tabs__item" role="presentation"><a href="#legends-as-page-headings-making-labels-and-legends-headings-example-nunjucks" role="tab" aria-controls="legends-as-page-headings-making-labels-and-legends-headings-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
</ul>
<div class="app-tabs__heading js-tabs__heading"><a href="#legends-as-page-headings-making-labels-and-legends-headings-example-html" aria-controls="legends-as-page-headings-making-labels-and-legends-headings-example-html" data-track="tab-html">HTML</a></div>
<div class="app-tabs__container js-tabs__container" id="legends-as-page-headings-making-labels-and-legends-headings-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-form-group"</span>></span>
<fieldsetclass="govuk-fieldset"aria-describedby="checkbox-hint"><legendclass="govuk-fieldset__legend govuk-fieldset__legend--l"><h1class="govuk-fieldset__heading">
govuk-fieldset__legend--l
</h1></legend><divid="checkbox-hint"class="govuk-hint">
This example shows an <h1> inside a <legend> with the class of govuk-fieldset__legend--l.
</div><divclass="govuk-checkboxes"data-module="govuk-checkboxes"><divclass="govuk-checkboxes__item"><inputclass="govuk-checkboxes__input"id="checkbox"name="checkbox"type="checkbox"value="checkbox"><labelclass="govuk-label govuk-checkboxes__label"for="checkbox">
Checkbox 1
</label></div><divclass="govuk-checkboxes__item"><inputclass="govuk-checkboxes__input"id="checkbox-2"name="checkbox"type="checkbox"value="checkbox"><labelclass="govuk-label govuk-checkboxes__label"for="checkbox-2">
Checkbox 2
</label></div><divclass="govuk-checkboxes__item"><inputclass="govuk-checkboxes__input"id="checkbox-3"name="checkbox"type="checkbox"value="checkbox"><labelclass="govuk-label govuk-checkboxes__label"for="checkbox-3">
Checkbox 3
</label></div></div></fieldset></div>
{{ govukCheckboxes({
name: "checkbox",
fieldset: {
legend: {
text: "govuk-fieldset__legend--l",
isPageHeading: true,
classes: "govuk-fieldset__legend--l"
}
},
hint: {
text: "This example shows an <h1> inside a <legend> with the class of govuk-fieldset__legend--l."
},
items: [
{
value: "checkbox",
text: "Checkbox 1"
},
{
value: "checkbox",
text: "Checkbox 2"
},
{
value: "checkbox",
text: "Checkbox 3"
}
]
}) }}
Styling options for labels and legends
Instead of styling them as page headings, you can apply other classes to legends and labels to make them larger and bolder than the default.
Styling labels
<div class="app-example app-example--tabs">
<div class="app-example__toolbar">
<a href="/get-started/labels-legends-headings/label-m-s/index.html" class="app-example__new-window" target="_blank">
Open this
<span class="govuk-visually-hidden">styling labels - making labels and legends headings</span>
example in a new tab
</a>
</div>
<iframe title="Styling labels - Making labels and legends headings example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/get-started/labels-legends-headings/label-m-s/index.html" frameBorder="0" loading="lazy"></iframe>
</div>
<span id="options-styling-labels-making-labels-and-legends-headings-example"></span>
<ul class="app-tabs" role="tablist">
<li class="app-tabs__item js-tabs__item" role="presentation"><a href="#styling-labels-making-labels-and-legends-headings-example-html" role="tab" aria-controls="styling-labels-making-labels-and-legends-headings-example-html" data-track="tab-html">HTML</a></li>
<li class="app-tabs__item js-tabs__item" role="presentation"><a href="#styling-labels-making-labels-and-legends-headings-example-nunjucks" role="tab" aria-controls="styling-labels-making-labels-and-legends-headings-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
</ul>
<div class="app-tabs__heading js-tabs__heading"><a href="#styling-labels-making-labels-and-legends-headings-example-html" aria-controls="styling-labels-making-labels-and-legends-headings-example-html" data-track="tab-html">HTML</a></div>
<div class="app-tabs__container js-tabs__container" id="styling-labels-making-labels-and-legends-headings-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-form-group"</span>></span>
<labelclass="govuk-label govuk-label--m"for="example">
govuk-label--m
</label><divid="example-hint"class="govuk-hint">
This example shows a <label> with the class of govuk-label--m
</div><inputclass="govuk-input"id="example"name="example"type="text"aria-describedby="example-hint"></div><divclass="govuk-form-group"><labelclass="govuk-label govuk-label--s"for="example-2">
govuk-label--s
</label><divid="example-2-hint"class="govuk-hint">
This example shows a <label> with the class of govuk-label--s
</div><inputclass="govuk-input"id="example-2"name="example-2"type="text"aria-describedby="example-2-hint"></div>
{{ govukInput({
label: {
text: "govuk-label--m",
classes: "govuk-label--m"
},
hint: {
text: "This example shows a <label> with the class of govuk-label--m"
},
id: "example",
name: "example"
}) }}
{{ govukInput({
label: {
text: "govuk-label--s",
classes: "govuk-label--s"
},
hint: {
text: "This example shows a <label> with the class of govuk-label--s"
},
id: "example-2",
name: "example-2"
}) }}
Styling legends
<div class="app-example app-example--tabs">
<div class="app-example__toolbar">
<a href="/get-started/labels-legends-headings/legend-m-s/index.html" class="app-example__new-window" target="_blank">
Open this
<span class="govuk-visually-hidden">styling legends - making labels and legends headings</span>
example in a new tab
</a>
</div>
<iframe title="Styling legends - Making labels and legends headings example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/get-started/labels-legends-headings/legend-m-s/index.html" frameBorder="0" loading="lazy"></iframe>
</div>
<span id="options-styling-legends-making-labels-and-legends-headings-example"></span>
<ul class="app-tabs" role="tablist">
<li class="app-tabs__item js-tabs__item" role="presentation"><a href="#styling-legends-making-labels-and-legends-headings-example-html" role="tab" aria-controls="styling-legends-making-labels-and-legends-headings-example-html" data-track="tab-html">HTML</a></li>
<li class="app-tabs__item js-tabs__item" role="presentation"><a href="#styling-legends-making-labels-and-legends-headings-example-nunjucks" role="tab" aria-controls="styling-legends-making-labels-and-legends-headings-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
</ul>
<div class="app-tabs__heading js-tabs__heading"><a href="#styling-legends-making-labels-and-legends-headings-example-html" aria-controls="styling-legends-making-labels-and-legends-headings-example-html" data-track="tab-html">HTML</a></div>
<div class="app-tabs__container js-tabs__container" id="styling-legends-making-labels-and-legends-headings-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-form-group"</span>></span>
<fieldsetclass="govuk-fieldset"aria-describedby="checkbox-hint"><legendclass="govuk-fieldset__legend govuk-fieldset__legend--m">
govuk-fieldset__legend--m
</legend><divid="checkbox-hint"class="govuk-hint">
This example shows a <legend> with the class of govuk-fieldset__legend--m.
</div><divclass="govuk-checkboxes"data-module="govuk-checkboxes"><divclass="govuk-checkboxes__item"><inputclass="govuk-checkboxes__input"id="checkbox"name="checkbox"type="checkbox"value="checkbox"><labelclass="govuk-label govuk-checkboxes__label"for="checkbox">
Checkbox 1
</label></div><divclass="govuk-checkboxes__item"><inputclass="govuk-checkboxes__input"id="checkbox-2"name="checkbox"type="checkbox"value="checkbox"><labelclass="govuk-label govuk-checkboxes__label"for="checkbox-2">
Checkbox 2
</label></div><divclass="govuk-checkboxes__item"><inputclass="govuk-checkboxes__input"id="checkbox-3"name="checkbox"type="checkbox"value="checkbox"><labelclass="govuk-label govuk-checkboxes__label"for="checkbox-3">
Checkbox 3
</label></div></div></fieldset></div><divclass="govuk-form-group"><fieldsetclass="govuk-fieldset"aria-describedby="checkbox-2-hint"><legendclass="govuk-fieldset__legend govuk-fieldset__legend--s">
govuk-fieldset__legend--s
</legend><divid="checkbox-2-hint"class="govuk-hint">
This example shows a <legend> with the class of govuk-fieldset__legend--s.
</div><divclass="govuk-checkboxes"data-module="govuk-checkboxes"><divclass="govuk-checkboxes__item"><inputclass="govuk-checkboxes__input"id="checkbox-2"name="checkbox-2"type="checkbox"value="checkbox"><labelclass="govuk-label govuk-checkboxes__label"for="checkbox-2">
Checkbox 1
</label></div><divclass="govuk-checkboxes__item"><inputclass="govuk-checkboxes__input"id="checkbox-2-2"name="checkbox-2"type="checkbox"value="checkbox"><labelclass="govuk-label govuk-checkboxes__label"for="checkbox-2-2">
Checkbox 2
</label></div><divclass="govuk-checkboxes__item"><inputclass="govuk-checkboxes__input"id="checkbox-2-3"name="checkbox-2"type="checkbox"value="checkbox"><labelclass="govuk-label govuk-checkboxes__label"for="checkbox-2-3">
Checkbox 3
</label></div></div></fieldset></div>