Support HTML in legend, label and error props, prepare beta release (#294)

* Update FormTypes.ts

This will hopefully fix that the hint text can be string as well as an element (which is supported).

* review update

* Update src/components/form-elements/error-message/ErrorMessage.tsx

Co-authored-by: Colin Rotherham <[email protected]>

* Update stories/Form Elements/Fieldset.stories.tsx

Co-authored-by: Colin Rotherham <[email protected]>

* review update

* Update stories/Form Elements/Fieldset.stories.tsx

Co-authored-by: Colin Rotherham <[email protected]>

* Update stories/Form Elements/ErrorMessage.stories.tsx

Co-authored-by: Colin Rotherham <[email protected]>

* review update

* Lint

* review change

* lint

* bumping

* snapshot

* review updates

* failed conflict fix (I do not think I will use GitHub in the future to fix merge conflicts)

* Remove HTML examples

* Prefer `string | ReactElement` to avoid null, boolean etc

* Add simple snapshot tests for new types

* Add examples with captions

* Make sure `headingLevel` automatically assumes `isPageHeading`

* Prepare beta release

---------

Co-authored-by: Colin Rotherham <[email protected]>

Author: Peter-Hudson-G

CHANGELOG.md

@@ -1,5 +1,14 @@
 # NHS.UK React components
 
+## 6.0.0-beta.4 - 5 November 2025
+
+This version provides support for NHS.UK frontend v10.1 and includes:
+
+- Support for HTML in legend, label and error props
+- Default legend and label to `isPageHeading: true` when `headingLevel` is set
+
+For a full list of changes in this release please refer to the [migration doc](https://github.com/NHSDigital/nhsuk-react-components/blob/main/docs/upgrade-to-6.0.md).
+
 ## 6.0.0-beta.3 - 27 October 2025
 
 This version provides support for NHS.UK frontend v10.1 and includes:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nhsuk-react-components",
-  "version": "6.0.0-beta.3",
+  "version": "6.0.0-beta.4",
   "license": "MIT",
   "author": {
     "name": "NHS England"

src/components/form-elements/checkboxes/__tests__/Checkboxes.test.tsx

@@ -7,7 +7,13 @@ import { renderClient, renderServer } from '#util/components';
 describe('Checkboxes', () => {
   it('matches snapshot', async () => {
     const { container } = await renderClient(
-      <Checkboxes id="example" name="example">
+      <Checkboxes
+        legend="What types of waste do you transport regularly?"
+        legendProps={{ size: 'l' }}
+        hint="Select all that apply"
+        id="example"
+        name="example"
+      >
         <Checkboxes.Item value="animal">Waste from animal carcasses</Checkboxes.Item>
         <Checkboxes.Item value="mines">Waste from mines or quarries</Checkboxes.Item>
         <Checkboxes.Item value="farm">Farm or agricultural waste</Checkboxes.Item>
@@ -20,7 +26,59 @@ describe('Checkboxes', () => {
 
   it('matches snapshot with error message', async () => {
     const { container } = await renderClient(
-      <Checkboxes id="example" name="example" error="Example error">
+      <Checkboxes
+        legend="What types of waste do you transport regularly?"
+        legendProps={{ size: 'l' }}
+        hint="Select all that apply"
+        error="Example error"
+        id="example"
+        name="example"
+      >
+        <Checkboxes.Item value="animal">Waste from animal carcasses</Checkboxes.Item>
+        <Checkboxes.Item value="mines">Waste from mines or quarries</Checkboxes.Item>
+        <Checkboxes.Item value="farm">Farm or agricultural waste</Checkboxes.Item>
+      </Checkboxes>,
+      { moduleName: 'nhsuk-checkboxes' },
+    );
+
+    expect(container).toMatchSnapshot();
+  });
+
+  it('matches snapshot with HTML in props', async () => {
+    const { container } = await renderClient(
+      <Checkboxes
+        legend={
+          <>
+            <span className="nhsuk-caption-l">Example</span> Legend text
+          </>
+        }
+        legendProps={{
+          isPageHeading: true,
+          size: 'l',
+        }}
+        hint={
+          <>
+            Hint text <em>with HTML</em>
+          </>
+        }
+        error={
+          <>
+            Error text <em>with HTML</em>
+          </>
+        }
+        id="example"
+        name="example"
+      >
+        <Checkboxes.Item
+          value="animal"
+          hint={
+            <>
+              Item hint text <em>with HTML</em>
+            </>
+          }
+        >
+          Waste from animal carcasses
+        </Checkboxes.Item>
         <Checkboxes.Item value="animal">Waste from animal carcasses</Checkboxes.Item>
         <Checkboxes.Item value="mines">Waste from mines or quarries</Checkboxes.Item>
         <Checkboxes.Item value="farm">Farm or agricultural waste</Checkboxes.Item>
@@ -33,7 +91,13 @@ describe('Checkboxes', () => {
 
   it('matches snapshot with an exclusive checkbox', async () => {
     const { container } = await renderClient(
-      <Checkboxes id="example" name="example">
+      <Checkboxes
+        legend="What types of waste do you transport regularly?"
+        legendProps={{ size: 'l' }}
+        hint="Select all that apply"
+        id="example"
+        name="example"
+      >
         <Checkboxes.Item value="animal">Waste from animal carcasses</Checkboxes.Item>
         <Checkboxes.Item value="mines">Waste from mines or quarries</Checkboxes.Item>
         <Checkboxes.Item value="farm">Farm or agricultural waste</Checkboxes.Item>
@@ -50,7 +114,13 @@ describe('Checkboxes', () => {
 
   it('matches snapshot (via server)', async () => {
     const { container, element } = await renderServer(
-      <Checkboxes id="example" name="example">
+      <Checkboxes
+        legend="What types of waste do you transport regularly?"
+        legendProps={{ size: 'l' }}
+        hint="Select all that apply"
+        id="example"
+        name="example"
+      >
         <Checkboxes.Item value="animal">Waste from animal carcasses</Checkboxes.Item>
         <Checkboxes.Item value="mines">Waste from mines or quarries</Checkboxes.Item>
         <Checkboxes.Item value="farm">Farm or agricultural waste</Checkboxes.Item>