Skip to content

v10.6.1

Latest

Choose a tag to compare

@github-actions github-actions released this 25 Aug 15:24
ee96515

10.6.1 - 25 August 2026

Note: This release was created from the support/10.x branch.

🗑️ Deprecated features

Rename the label and legend isPageHeading option

We've deprecated the isPageHeading Nunjucks option for labels and legends and added the heading option.

If you're using any form component Nunjucks macro with the isPageHeading option, you should:

  • rename text to heading
  • remove isPageHeading: true
  {{ characterCount({
    label: {
-     text: "Can you provide more detail?",
+     heading: "Can you provide more detail?",
-     isPageHeading: true,
      size: "l"
    },
    name: "more-detail",
    maxlength: 350,
    countType: "characters"
  }) }}

Other heading options can be configured if necessary. For example, using heading.id and heading.level when a label acts as an <h2> heading for a landmark:

- <aside>
+ <aside aria-labelledby="search-heading">
    {{ searchInput({
      label: {
        text: "Search",
-       size: "s"
+       size: "s",
+       heading: {
+         id: "search-heading",
+         level: 2
+       }
      }
    }) }}

    <!-- // … -->
  </aside>

For consistency with other components, legends now support the following Nunjucks options:

  • id
  • caption
  • visuallyHiddenText
  • heading
  • attributes

Labels now also support:

  • caption
  • visuallyHiddenText
  • heading

This change was introduced in pull request #1670: Add label and legend caption, headingLevel and other options.

Rename title and heading HTML classes

HTML classes for the error summary, panel and tabs component headings have been renamed from __title to __heading to match their corresponding Nunjucks option.

If you are not using Nunjucks macros, change the classes as follows:

  • Rename the <h2 class="nhsuk-error-summary__title" class attribute to match <h2 class="nhsuk-error-summary__heading".
  • Rename the <h1 class="nhsuk-panel__title" class attribute to match <h1 class="nhsuk-panel__heading".
  • Rename the <h2 class="nhsuk-tabs__title" class attribute to match <h2 class="nhsuk-tabs__heading".

The previous class names are deprecated and will be removed in a future release.

This change was introduced in pull request #2059: Rename title and heading HTML classes.

♻️ Changes

Use more Nunjucks options as strings

We added support for alternative string values for labels, legends, hints and error messages in version 10.6.0.

The following component options now support alternative string values:

  • Component heading and title options
  • Card and error summary description options
  • Details summary option
  • Footer meta and copyright options
  • Image caption option
  • Input prefix and suffix options
  • Summary list key and value options
  • Task list status option
  • Table head and rows options items

For example, using the table component:

  {{ table ({
    caption: "Appointments",
    firstCellIsHeader: true,
-   head: [
-     {
-       text: "Time"
-     },
-     {
-       text: "Name"
-     },
-     {
-       text: "Date of birth"
-     }
-   ],
+   head: ["Time", "Name", "Date of birth"],
-   rows: [
-     [
-       {
-         text: "11:00"
-       },
-       {
-         text: "Laura Stone"
-       },
-       {
-         text: "4 January 1986"
-       }
-     ],
-     [
-       {
-         text: "11:30"
-       },
-       {
-         text: "Emma Katie-Brown"
-       },
-       {
-         text: "7 February 1976"
-       }
-     ],
-     [
-       {
-         text: "13:10"
-       },
-       {
-         text: "David Chen"
-       },
-       {
-         text: "19 March 1981"
-       }
-     ],
-     [
-       {
-         text: "13:40"
-       },
-       {
-         text: "Michael Thompson"
-       },
-       {
-         text: "6 December 1964"
-       }
-     ],
-     [
-       {
-         text: "14:20"
-       },
-       {
-         text: "Juan Martinez"
-       },
-       {
-         text: "18 April 1975"
-       }
-     ]
-   ]
+   rows: [
+     ["11:00", "Laura Stone", "4 January 1986"],
+     ["11:30", "Emma Katie-Brown", "7 February 1976"],
+     ["13:10", "David Chen", "19 March 1981"],
+     ["13:40", "Michael Thompson", "6 December 1964"],
+     ["14:20", "Juan Martinez", "18 April 1975"]
+   ]
  }) }}

With card and summary list actions also supporting arrays of actions items:

  {{ summaryList({
    rows: [
-     {
-       key: {
-         text: "Name"
-       },
-       value: {
-         text: "Karen Francis"
-       },
-       actions: {
-         items: [
-           {
-             href: "#/change",
-             text: "Change",
-             visuallyHiddenText: "name"
-           }
-         ]
-       }
-     },
-     {
-       key: {
-         text: "Date of birth"
-       },
-       value: {
-         text: "15 March 1984"
-       },
-       actions: {
-         items: [
-           {
-             href: "#/change",
-             text: "Change",
-             visuallyHiddenText: "date of birth"
-           }
-         ]
-       }
-     }
+     {
+       key: "Name",
+       value: "Karen Francis",
+       actions: [
+         {
+           href: "#/change",
+           text: "Change",
+           visuallyHiddenText: "name"
+         }
+       ]
+     },
+     {
+       key: "Date of birth",
+       value: "15 March 1984",
+       actions: [
+         {
+           href: "#/change",
+           text: "Change",
+           visuallyHiddenText: "date of birth"
+         }
+       ]
+     }
    ]
  }) }}

This change was introduced in pull request #1670: Add label and legend caption, headingLevel and other options.

🔧 Fixes

We've made fixes to NHS.UK frontend in the following pull requests: