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
texttoheading - 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:
idcaptionvisuallyHiddenTextheadingattributes
Labels now also support:
captionvisuallyHiddenTextheading
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
headingandtitleoptions - Card and error summary
descriptionoptions - Details
summaryoption - Footer
metaandcopyrightoptions - Image
captionoption - Input
prefixandsuffixoptions - Summary list
keyandvalueoptions - Task list
statusoption - Table
headandrowsoptions 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: