How to guides

Making labels and legends headings

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 won’t 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.

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="govuk-form-group">
  <h1 class="govuk-label-wrapper">
    <label class="govuk-label govuk-label--xl" for="example">
      govuk-label--xl
    </label>

  </h1>
  <span id="example-hint" class="govuk-hint">
    This example shows an &lt;h1&gt; around a &lt;label&gt; with the class of govuk-label--xl
  </span>
  <input class="govuk-input" id="example" name="example" type="text" aria-describedby="example-hint">
</div>

<div class="govuk-form-group">
  <h1 class="govuk-label-wrapper">
    <label class="govuk-label govuk-label--l" for="example">
      govuk-label--l
    </label>

  </h1>
  <span id="example-hint" class="govuk-hint">
    This example shows an &lt;h1&gt; around a &lt;label&gt; with the class of govuk-label--l
  </span>
  <input class="govuk-input" id="example" name="example" type="text" aria-describedby="example-hint">
</div>
{% from "input/macro.njk" import govukInput %}

{{ govukInput({
  label: {
    text: "govuk-label--xl",
    classes: "govuk-label--xl",
    isPageHeading: true
  },
  hint: {
    text: "This example shows an <h1> around a <label> with the class of govuk-label--xl"
  },
  id: "example",
  name: "example"
}) }}

{{ 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="govuk-form-group">
  <fieldset class="govuk-fieldset" aria-describedby="checkbox-hint">
    <legend class="govuk-fieldset__legend govuk-fieldset__legend--xl">
      <h1 class="govuk-fieldset__heading">
        govuk-fieldset__legend--xl
      </h1>
    </legend>
    <span id="checkbox-hint" class="govuk-hint">
      This example shows an &lt;h1&gt; inside a &lt;legend&gt; with the class of govuk-fieldset__legend--xl.
    </span>
    <div class="govuk-checkboxes">
      <div class="govuk-checkboxes__item">
        <input class="govuk-checkboxes__input" id="checkbox-1" name="checkbox" type="checkbox" value="checkbox">
        <label class="govuk-label govuk-checkboxes__label" for="checkbox-1">
          Checkbox 1
        </label>
      </div>
      <div class="govuk-checkboxes__item">
        <input class="govuk-checkboxes__input" id="checkbox-2" name="checkbox" type="checkbox" value="checkbox">
        <label class="govuk-label govuk-checkboxes__label" for="checkbox-2">
          Checkbox 2
        </label>
      </div>
      <div class="govuk-checkboxes__item">
        <input class="govuk-checkboxes__input" id="checkbox-3" name="checkbox" type="checkbox" value="checkbox">
        <label class="govuk-label govuk-checkboxes__label" for="checkbox-3">
          Checkbox 3
        </label>
      </div>
    </div>
  </fieldset>
</div>

<div class="govuk-form-group">
  <fieldset class="govuk-fieldset" aria-describedby="checkbox-hint">
    <legend class="govuk-fieldset__legend govuk-fieldset__legend--l">
      <h1 class="govuk-fieldset__heading">
        govuk-fieldset__legend--l
      </h1>
    </legend>
    <span id="checkbox-hint" class="govuk-hint">
      This example shows an &lt;h1&gt; inside a &lt;legend&gt; with the class of govuk-fieldset__legend--l.
    </span>
    <div class="govuk-checkboxes">
      <div class="govuk-checkboxes__item">
        <input class="govuk-checkboxes__input" id="checkbox-1" name="checkbox" type="checkbox" value="checkbox">
        <label class="govuk-label govuk-checkboxes__label" for="checkbox-1">
          Checkbox 1
        </label>
      </div>
      <div class="govuk-checkboxes__item">
        <input class="govuk-checkboxes__input" id="checkbox-2" name="checkbox" type="checkbox" value="checkbox">
        <label class="govuk-label govuk-checkboxes__label" for="checkbox-2">
          Checkbox 2
        </label>
      </div>
      <div class="govuk-checkboxes__item">
        <input class="govuk-checkboxes__input" id="checkbox-3" name="checkbox" type="checkbox" value="checkbox">
        <label class="govuk-label govuk-checkboxes__label" for="checkbox-3">
          Checkbox 3
        </label>
      </div>
    </div>
  </fieldset>
</div>
{% from "input/macro.njk" import govukInput %}

{% from "checkboxes/macro.njk" import govukCheckboxes %}

{{ govukCheckboxes({
  idPrefix: "checkbox",
  name: "checkbox",
  fieldset: {
    legend: {
      text: "govuk-fieldset__legend--xl",
      isPageHeading: true,
      classes: "govuk-fieldset__legend--xl"
    }
  },
  hint: {
    text: "This example shows an <h1> inside a <legend> with the class of govuk-fieldset__legend--xl."
  },
  items: [
    {
      value: "checkbox",
      text: "Checkbox 1"
    },
    {
      value: "checkbox",
      text: "Checkbox 2"
    },
    {
      value: "checkbox",
      text: "Checkbox 3"
    }
  ]
}) }}

{{ govukCheckboxes({
  idPrefix: "checkbox",
  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

As well as 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="govuk-form-group">
  <label class="govuk-label govuk-label--m" for="example">
    govuk-label--m
  </label>
  <span id="example-hint" class="govuk-hint">
    This example shows a &lt;label&gt; with the class of govuk-label--m
  </span>
  <input class="govuk-input" id="example" name="example" type="text" aria-describedby="example-hint">
</div>

<div class="govuk-form-group">
  <label class="govuk-label govuk-label--s" for="example">
    govuk-label--s
  </label>
  <span id="example-hint" class="govuk-hint">
    This example shows a &lt;label&gt; with the class of govuk-label--s
  </span>
  <input class="govuk-input" id="example" name="example" type="text" aria-describedby="example-hint">
</div>
{% from "input/macro.njk" import govukInput %}

{{ 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",
  name: "example"
}) }}

Styling legends

<div class="govuk-form-group">
  <fieldset class="govuk-fieldset" aria-describedby="checkbox-hint">
    <legend class="govuk-fieldset__legend govuk-fieldset__legend--m"> govuk-fieldset__legend--m
    </legend>
    <span id="checkbox-hint" class="govuk-hint">
      This example shows a &lt;legend&gt; with the class of govuk-fieldset__legend--m.
    </span>
    <div class="govuk-checkboxes">
      <div class="govuk-checkboxes__item">
        <input class="govuk-checkboxes__input" id="checkbox-1" name="checkbox" type="checkbox" value="checkbox">
        <label class="govuk-label govuk-checkboxes__label" for="checkbox-1">
          Checkbox 1
        </label>
      </div>
      <div class="govuk-checkboxes__item">
        <input class="govuk-checkboxes__input" id="checkbox-2" name="checkbox" type="checkbox" value="checkbox">
        <label class="govuk-label govuk-checkboxes__label" for="checkbox-2">
          Checkbox 2
        </label>
      </div>
      <div class="govuk-checkboxes__item">
        <input class="govuk-checkboxes__input" id="checkbox-3" name="checkbox" type="checkbox" value="checkbox">
        <label class="govuk-label govuk-checkboxes__label" for="checkbox-3">
          Checkbox 3
        </label>
      </div>
    </div>
  </fieldset>
</div>

<div class="govuk-form-group">
  <fieldset class="govuk-fieldset" aria-describedby="checkbox-hint">
    <legend class="govuk-fieldset__legend govuk-fieldset__legend--s"> govuk-fieldset__legend--s
    </legend>
    <span id="checkbox-hint" class="govuk-hint">
      This example shows a &lt;legend&gt; with the class of govuk-fieldset__legend--s.
    </span>
    <div class="govuk-checkboxes">
      <div class="govuk-checkboxes__item">
        <input class="govuk-checkboxes__input" id="checkbox-1" name="checkbox" type="checkbox" value="checkbox">
        <label class="govuk-label govuk-checkboxes__label" for="checkbox-1">
          Checkbox 1
        </label>
      </div>
      <div class="govuk-checkboxes__item">
        <input class="govuk-checkboxes__input" id="checkbox-2" name="checkbox" type="checkbox" value="checkbox">
        <label class="govuk-label govuk-checkboxes__label" for="checkbox-2">
          Checkbox 2
        </label>
      </div>
      <div class="govuk-checkboxes__item">
        <input class="govuk-checkboxes__input" id="checkbox-3" name="checkbox" type="checkbox" value="checkbox">
        <label class="govuk-label govuk-checkboxes__label" for="checkbox-3">
          Checkbox 3
        </label>
      </div>
    </div>
  </fieldset>
</div>
{% from "input/macro.njk" import govukInput %}

{% from "checkboxes/macro.njk" import govukCheckboxes %}

{{ govukCheckboxes({
  idPrefix: "checkbox",
  name: "checkbox",
  fieldset: {
    legend: {
      text: "govuk-fieldset__legend--m",
      classes: "govuk-fieldset__legend--m"
    }
  },
  hint: {
    text: "This example shows a <legend> with the class of govuk-fieldset__legend--m."
  },
  items: [
    {
      value: "checkbox",
      text: "Checkbox 1"
    },
    {
      value: "checkbox",
      text: "Checkbox 2"
    },
    {
      value: "checkbox",
      text: "Checkbox 3"
    }
  ]
}) }}

{{ govukCheckboxes({
  idPrefix: "checkbox",
  name: "checkbox",
  fieldset: {
    legend: {
      text: "govuk-fieldset__legend--s",
      classes: "govuk-fieldset__legend--s"
    }
  },
  hint: {
    text: "This example shows a <legend> with the class of govuk-fieldset__legend--s."
  },
  items: [
    {
      value: "checkbox",
      text: "Checkbox 1"
    },
    {
      value: "checkbox",
      text: "Checkbox 2"
    },
    {
      value: "checkbox",
      text: "Checkbox 3"
    }
  ]
}) }}

Get in touch

If you’ve got a question, idea or suggestion share it in #govuk-design-system on cross-government Slack (open in app) or email the Design System team on govuk-design-system-support@digital.cabinet-office.gov.uk