Bump nhsuk-frontend from 8.3.0 to 10.1.0

[dependabot]

Bumps nhsuk-frontend from 8.3.0 to 10.1.0.

Release notes

Sourced from nhsuk-frontend's releases.

v10.1.0

10.1.0 - 15 October 2025

🆕 New features

Localise character count component

You can now translate the text used by the character count component to:

• show when the maximum number of characters or words is reached
• show the number of characters or words over or under the allowed maximum
• update the textarea description if JavaScript is not available
• announce to screen readers when the textarea is focused

The Nunjucks macro accepts new options so you can customise each message. You can:

• Use charactersAtLimitText or wordsAtLimitText to provide the text that shows when users have reached the limit.
• Use charactersUnderLimitText or wordsUnderLimitText to provide the text that shows when users are under the limit. The component will pluralise the message according to the configured locale and the number of characters or words remaining.
• Use charactersOverLimitText or wordsOverLimitText to provide the text that shows when users are over the limit. The component will pluralise the message according to the configured locale and the number of characters or words remaining.
• Use textareaDescriptionText to provide the textarea description for assistive technologies. It is visible on the page when JavaScript is unavailable.

The component will replace %{count} with the number of characters over or under the limit.

If you're not using Nunjucks macros, you can use data-* attributes to provide these translations. Within the attribute value, any quotation marks or other characters reserved by HTML needs to be converted into their HTML entity equivalents.

You can:

• use data-i18n.characters-at-limit or data-i18n.words-at-limit for when users are at the limit
• configure the text that informs the end user they are under the character or word limit, by using data-i18n.characters-under-limit.{other,many,few,two,one,zero} or data-i18n.words-under-limit.{other,many,few,two,one,zero}, with one suffix for each plural form required by your locale
• configure the text that informs the end user they are over the character or word limit, by using data-i18n.characters-over-limit.{other,many,few,two,one,zero} or data-i18n.words-over-limit.{other,many,few,two,one,zero}, with one suffix for each plural form required by your locale
• configure the description provided to assistive technologies when users focus the input, by using data-i18n.textarea-description.{other,many,few,two,one,zero} to provide the text to set as the description

You can also provide these messages using a JavaScript configuration object when creating an instance of the component or initialising all components. See our guidance on localising NHS.UK frontend for how to do this.

This was added in [pull request #1565: Add character count localisation](nhsuk/nhsuk-frontend#1565).

Smaller versions of radio buttons and checkboxes

You can now use smaller versions of the radios and checkboxes components by adding the nhsuk-radios--small or nhsuk-checkboxes--small class.

This was added in [pull request #1567: Uplift GOV.UK Frontend form field components](nhsuk/nhsuk-frontend#1567).

Updated Nunjucks macro options for components

For consistency with other components, we’ve added new Nunjucks macro options:

• Back link visuallyHiddenText option
• Breadcrumbs nested backLink component option
• Contents list landmarkLabel and visuallyHiddenTitle options
• Do and Don't list prefixText option, with nested item text and html options

... (truncated)

Changelog

Sourced from nhsuk-frontend's changelog.

10.1.0 - 15 October 2025

🆕 New features

Localise character count component

You can now translate the text used by the character count component to:

• show when the maximum number of characters or words is reached
• show the number of characters or words over or under the allowed maximum
• update the textarea description if JavaScript is not available
• announce to screen readers when the textarea is focused

The Nunjucks macro accepts new options so you can customise each message. You can:

• Use charactersAtLimitText or wordsAtLimitText to provide the text that shows when users have reached the limit.
• Use charactersUnderLimitText or wordsUnderLimitText to provide the text that shows when users are under the limit. The component will pluralise the message according to the configured locale and the number of characters or words remaining.
• Use charactersOverLimitText or wordsOverLimitText to provide the text that shows when users are over the limit. The component will pluralise the message according to the configured locale and the number of characters or words remaining.
• Use textareaDescriptionText to provide the textarea description for assistive technologies. It is visible on the page when JavaScript is unavailable.

The component will replace %{count} with the number of characters over or under the limit.

If you're not using Nunjucks macros, you can use data-* attributes to provide these translations. Within the attribute value, any quotation marks or other characters reserved by HTML needs to be converted into their HTML entity equivalents.

You can:

• use data-i18n.characters-at-limit or data-i18n.words-at-limit for when users are at the limit
• configure the text that informs the end user they are under the character or word limit, by using data-i18n.characters-under-limit.{other,many,few,two,one,zero} or data-i18n.words-under-limit.{other,many,few,two,one,zero}, with one suffix for each plural form required by your locale
• configure the text that informs the end user they are over the character or word limit, by using data-i18n.characters-over-limit.{other,many,few,two,one,zero} or data-i18n.words-over-limit.{other,many,few,two,one,zero}, with one suffix for each plural form required by your locale
• configure the description provided to assistive technologies when users focus the input, by using data-i18n.textarea-description.{other,many,few,two,one,zero} to provide the text to set as the description

You can also provide these messages using a JavaScript configuration object when creating an instance of the component or initialising all components. See our guidance on localising NHS.UK frontend for how to do this.

This was added in [pull request #1565: Add character count localisation](nhsuk/nhsuk-frontend#1565).

Smaller versions of radio buttons and checkboxes

You can now use smaller versions of the radios and checkboxes components by adding the nhsuk-radios--small or nhsuk-checkboxes--small class.

This was added in [pull request #1567: Uplift GOV.UK Frontend form field components](nhsuk/nhsuk-frontend#1567).

Updated Nunjucks macro options for components

For consistency with other components, we’ve added new Nunjucks macro options:

• Back link visuallyHiddenText option
• Breadcrumbs nested backLink component option
• Contents list landmarkLabel and visuallyHiddenTitle options
• Do and Don't list prefixText option, with nested item text and html options
• Fieldset html and role options

... (truncated)

Commits

• 8ddb5c4 Merge pull request #1629 from nhsuk/release-v10.1
• 91383df Update package version to v10.1.0
• c1b5aab Merge pull request #1628 from nhsuk/window-undefined
• db31136 Add changelog entry
• ff8834c Fix Node.js ReferenceError: HTMLElement is not defined
• 6afdf2b Add numbered pagination (#1026)
• e19f61b Merge pull request #1621 from nhsuk/small-form-controls-hover
• 6bc3d71 Merge pull request #1622 from nhsuk/pagination-typo
• db512b5 Fix stray comma
• 127e758 Fix pagination typo from #1620
• Additional commits viewable in compare view

Maintainer changes

This version was pushed to npm by colinrotherham, a new releaser for nhsuk-frontend since your current version.

You can trigger a rebase of this PR by commenting @dependabot rebase.

---

Dependabot commands and options

You can trigger Dependabot actions by commenting on this PR:

• @dependabot rebase will rebase this PR
• @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
• @dependabot merge will merge this PR after your CI passes on it
• @dependabot squash and merge will squash and merge this PR after your CI passes on it
• @dependabot cancel merge will cancel a previously requested merge and block automerging
• @dependabot reopen will reopen this PR if it is closed
• @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
• @dependabot show <dependency name> ignore conditions will show all of the ignore conditions of the specified dependency
• @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
• @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
• @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)

Note
Automatic rebases have been disabled on this pull request as it has been open for over 30 days.