GOV.UK Frontend v6.4.0

To install this version with npm, run npm install govuk-frontend@6.4.0. You can also find more information about how to stay up to date in our documentation.

New features

You can now use the Interruption panel to pause the user’s journey and give important information

We’ve introduced an interruption variant of the Panel component.

You can use Interruption panels within Interruption pages to warn users before they:

• do something unusual that’s probably a mistake
• do something that cannot be undone (so you can ask the user “Are you sure?”)
• give an answer that conflicts with existing information

See the guidance on the Design System website for more information on how to use the Interruption panel in your service.

We made this change in pull request #6636: Add interruption panel - thanks to @frankieroberto and the NHS Design System team for contributing this change.

You can now pass day, month, year, error and values options to the Date input component

We've updated the Date input component to add the following Nunjucks options:

• day, month and year options to customise individual items
• an error boolean option to set the error state on individual items
• a values option to set individual item values using a single object

For consistency with other components, the Date input component's error state is now set automatically when errorMessage is provided.

For example, you no longer need to set the "govuk-input--error" class on every item:

  {{ govukDateInput({
    fieldset: {
      legend: {
        text: "What is your date of birth?"
      }
    },
    errorMessage: {
      text: "Enter your date of birth"
-   },
-   items: [
-     {
-       name: "day",
-       label: "Day",
-       classes: "govuk-input--width-2 govuk-input--error"
-     },
-     {
-       name: "month",
-       label: "Month",
-       classes: "govuk-input--width-2 govuk-input--error"
-     },
-     {
-       name: "year",
-       label: "Year",
-       classes: "govuk-input--width-4 govuk-input--error"
-     }
-   ]
+   }
  }) }}

If only one field has an error, use the new day, month or year options to set error: true for that field only:

  {{ govukDateInput({
    fieldset: {
      legend: {
        text: "What is your date of birth?"
      }
    },
    errorMessage: {
      text: "Date of birth must include a year"
    },
-   items: [
-     {
-       name: "day",
-       label: "Day",
-       classes: "govuk-input--width-2"
-     },
-     {
-       name: "month",
-       label: "Month",
-       classes: "govuk-input--width-2"
-     },
-     {
-       name: "year",
-       label: "Year",
-       classes: "govuk-input--width-4 govuk-input--error"
-     }
-   ]
+   year: {
+     error: true
+   }
  }) }}

When using the GOV.UK Prototype Kit, given the following data object:

{
  "dob-day": "31",
  "dob-month": "3",
  "dob-year": "1980"
}

You can now pass in values: data to automatically set item values:

  {{ govukDateInput({
    fieldset: {
      legend: {
        text: "What is your date of birth?"
      }
    },
    namePrefix: "dob",
    values: data
  }) }}

We made this change in pull request #6971: Add date input day, month, year and values options - thanks to @colinrotherham for contributing this change.

Recommended changes

Use inverse-text instead of govuk-colour("white") for text on dark backgrounds that use functional colours

We've introduced a new inverse-text functional colour for text on dark backgrounds that use functional colours such as brand, success and error.

If you're using govuk-colour("white") as a text colour on dark backgrounds that use functional colours, replace govuk-colour("white") with govuk-functional-colour(inverse-text).

However, if you're using a dark background that does not use a functional colour, keep using govuk-colour("white").

In both cases, make sure your text has a minimum contrast of 4.5:1 with the background to meet the 'Contrast (minimum)' criterion of the Web Content Accessibility Guidelines.

We made this change in pull request #7178: Add inverse-text functional colour for white text on solid colour.

Add a <span> element to start buttons containing HTML

We've updated the Button component's Nunjucks macro to add a <span> element around HTML content within start buttons.

This fixes a bug that caused whitespace around inline HTML elements to collapse and button content to wrap incorrectly on narrow screens.

If you're not using our Nunjucks macros, or have fixed this bug in a different way, you can update your code to add a <span> element instead.

You only need to make this change for start buttons containing HTML content, as the bug did not affect other Button component styles or start buttons containing plain text.

We made this change in pull request #7188: Add Nunjucks logic to insert <span> element around HTML in start buttons.

Fixes

We've made fixes to GOV.UK Frontend in the following pull requests:

• #7183: Update exit this page overlay colour to use system colours
• #7197: Improve source spacing for header
• #7268: Stop file upload component from throwing errors when hidden inputs are present - thanks to @peteryates for reporting and fixing this issue.