diff --git a/packages/govuk-frontend/src/govuk/components/label/label.yaml b/packages/govuk-frontend/src/govuk/components/label/label.yaml
index 567150ce7f..6e15535d08 100644
--- a/packages/govuk-frontend/src/govuk/components/label/label.yaml
+++ b/packages/govuk-frontend/src/govuk/components/label/label.yaml
@@ -72,6 +72,11 @@ examples:
options:
text: National Insurance number
isPageHeading: true
+ - name: as page heading with defined heading level
+ options:
+ text: National Insurance number
+ isPageHeading: true
+ headingLevel: 2
# Hidden examples are not shown in the review app, but are used for tests and HTML fixtures
- name: empty
diff --git a/packages/govuk-frontend/src/govuk/components/label/template.njk b/packages/govuk-frontend/src/govuk/components/label/template.njk
index 49a8985e08..02824a2428 100644
--- a/packages/govuk-frontend/src/govuk/components/label/template.njk
+++ b/packages/govuk-frontend/src/govuk/components/label/template.njk
@@ -10,9 +10,12 @@
{% endset -%}
{% if params.isPageHeading %}
-
+{#- Optional. The page heading level(1-6) to be used with ``isPageHeading` defaults to heading level 1-#}
+{% set headingLevel = params.headingLevel if params.headingLevel else 1 %}
+
+
{{ labelHtml | safe | trim | indent(2) }}
-
+
{% else %}
{{ labelHtml | safe | trim }}
{% endif %}
diff --git a/packages/govuk-frontend/src/govuk/components/label/template.test.js b/packages/govuk-frontend/src/govuk/components/label/template.test.js
index 0abf76bf9f..370c9f6115 100644
--- a/packages/govuk-frontend/src/govuk/components/label/template.test.js
+++ b/packages/govuk-frontend/src/govuk/components/label/template.test.js
@@ -68,6 +68,13 @@ describe('Label', () => {
expect($selector.length).toBeTruthy()
})
+ it('can be nested inside an heading tag using isPageHeading and headingLevel', () => {
+ const $ = render('label', examples['as page heading with defined level'])
+
+ const $selector = $('h2 > .govuk-label')
+ expect($selector.length).toBeTruthy()
+ })
+
it('allows additional attributes to be added to the component', () => {
const $ = render('label', examples.attributes)