From b75c4bf35f372be1e0ab4b55d01817b88b7a34f1 Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Fri, 15 May 2026 14:17:59 +0100
Subject: [PATCH 01/15] Fallback to `name` when `id` (or `idPrefix`) is not
 provided

Form components with missing `id` (or `idPrefix`) now fall back to the `name` prop before generating IDs. This helps prevent hydration mismatch errors with server-side rendering (SSR) HTML

https://react.dev/link/hydration-mismatch
---
 .../form-elements/character-count/CharacterCount.tsx        | 4 ++--
 src/components/form-elements/checkboxes/Checkboxes.tsx      | 4 ++--
 src/components/form-elements/date-input/DateInput.tsx       | 2 +-
 src/components/form-elements/file-upload/FileUpload.tsx     | 4 ++--
 .../form-elements/password-input/PasswordInput.tsx          | 4 ++--
 src/components/form-elements/radios/Radios.tsx              | 4 ++--
 src/components/form-elements/text-input/TextInput.tsx       | 4 ++--
 src/components/form-elements/textarea/Textarea.tsx          | 4 ++--
 src/components/utils/FormGroup.tsx                          | 6 +++++-
 9 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/src/components/form-elements/character-count/CharacterCount.tsx b/src/components/form-elements/character-count/CharacterCount.tsx
index 4067ca4a..6853a548 100644
--- a/src/components/form-elements/character-count/CharacterCount.tsx
+++ b/src/components/form-elements/character-count/CharacterCount.tsx
@@ -64,7 +64,7 @@ export const CharacterCount = forwardRef<HTMLTextAreaElement, CharacterCountProp
         }}
         {...rest}
       >
-        {({ className, id, error, 'aria-describedby': ariaDescribedBy, ...rest }) => (
+        {({ className, id, error, 'aria-describedby': ariaDescribedBy, ...restRenderProps }) => (
           <>
             <textarea
               className={classNames(
@@ -76,7 +76,7 @@ export const CharacterCount = forwardRef<HTMLTextAreaElement, CharacterCountProp
               id={id}
               aria-describedby={ariaDescribedBy ? `${id}-info ${ariaDescribedBy}` : `${id}-info`}
               ref={forwardedRef}
-              {...rest}
+              {...restRenderProps}
             />
             <div className="nhsuk-hint nhsuk-character-count__message" id={`${id}-info`}>
               {maxWords
diff --git a/src/components/form-elements/checkboxes/Checkboxes.tsx b/src/components/form-elements/checkboxes/Checkboxes.tsx
index 7f77450a..479a2b90 100644
--- a/src/components/form-elements/checkboxes/Checkboxes.tsx
+++ b/src/components/form-elements/checkboxes/Checkboxes.tsx
@@ -27,7 +27,7 @@ export type CheckboxesProps = CheckboxesElementProps &
   Omit<FormElementProps, 'label' | 'labelProps'>;
 
 const CheckboxesComponent = forwardRef<HTMLDivElement, CheckboxesProps>((props, forwardedRef) => {
-  const { children, idPrefix, ...rest } = props;
+  const { children, idPrefix = props.name, ...rest } = props;
 
   const moduleRef = useRef<HTMLDivElement>(null);
   const importRef = useRef<Promise<CheckboxesModule | void>>(null);
@@ -101,7 +101,7 @@ const CheckboxesComponent = forwardRef<HTMLDivElement, CheckboxesProps>((props,
               className,
             )}
             data-module="nhsuk-checkboxes"
-            id={id}
+            id={id === rest.id ? id : undefined}
             ref={moduleRef}
             {...restRenderProps}
           >
diff --git a/src/components/form-elements/date-input/DateInput.tsx b/src/components/form-elements/date-input/DateInput.tsx
index cb7bbb90..514f6c52 100644
--- a/src/components/form-elements/date-input/DateInput.tsx
+++ b/src/components/form-elements/date-input/DateInput.tsx
@@ -98,7 +98,7 @@ const DateInputComponent = forwardRef<HTMLDivElement, DateInputProps>(
           return (
             <div
               className={classNames('nhsuk-date-input', className)}
-              id={id}
+              id={id === rest.id ? id : undefined}
               ref={forwardedRef}
               {...restRenderProps}
             >
diff --git a/src/components/form-elements/file-upload/FileUpload.tsx b/src/components/form-elements/file-upload/FileUpload.tsx
index 381a66e5..85120941 100644
--- a/src/components/form-elements/file-upload/FileUpload.tsx
+++ b/src/components/form-elements/file-upload/FileUpload.tsx
@@ -60,12 +60,12 @@ export const FileUpload = forwardRef<HTMLInputElement, FileUploadProps>(
           'ref': moduleRef,
         }}
       >
-        {({ width, className, error, autoComplete, ...rest }) => (
+        {({ width, className, error, autoComplete, ...restRenderProps }) => (
           <input
             className={classNames('nhsuk-file-upload__input', className)}
             ref={forwardedRef}
             type="file"
-            {...rest}
+            {...restRenderProps}
           />
         )}
       </FormGroup>
diff --git a/src/components/form-elements/password-input/PasswordInput.tsx b/src/components/form-elements/password-input/PasswordInput.tsx
index c22592d1..9089e9b2 100644
--- a/src/components/form-elements/password-input/PasswordInput.tsx
+++ b/src/components/form-elements/password-input/PasswordInput.tsx
@@ -84,7 +84,7 @@ export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
           'ref': moduleRef,
         }}
       >
-        {({ width, className, error, autoComplete, ...rest }) => (
+        {({ width, className, error, autoComplete, ...restRenderProps }) => (
           <input
             className={classNames(
               'nhsuk-input',
@@ -98,7 +98,7 @@ export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
             spellCheck="false"
             autoCapitalize="none"
             autoComplete={autoComplete ?? 'current-password'}
-            {...rest}
+            {...restRenderProps}
           />
         )}
         {({ id }) => (
diff --git a/src/components/form-elements/radios/Radios.tsx b/src/components/form-elements/radios/Radios.tsx
index 07ff97cc..093aacb3 100644
--- a/src/components/form-elements/radios/Radios.tsx
+++ b/src/components/form-elements/radios/Radios.tsx
@@ -27,7 +27,7 @@ export interface RadiosElementProps extends ComponentPropsWithoutRef<'div'> {
 export type RadiosProps = RadiosElementProps & Omit<FormElementProps, 'label' | 'labelProps'>;
 
 const RadiosComponent = forwardRef<HTMLDivElement, RadiosProps>((props, forwardedRef) => {
-  const { children, idPrefix, ...rest } = props;
+  const { children, idPrefix = props.name, ...rest } = props;
 
   const moduleRef = useRef<HTMLDivElement>(null);
   const importRef = useRef<Promise<RadiosModule | void>>(null);
@@ -113,7 +113,7 @@ const RadiosComponent = forwardRef<HTMLDivElement, RadiosProps>((props, forwarde
               className,
             )}
             data-module="nhsuk-radios"
-            id={id}
+            id={id === rest.id ? id : undefined}
             ref={moduleRef}
             {...restRenderProps}
           >
diff --git a/src/components/form-elements/text-input/TextInput.tsx b/src/components/form-elements/text-input/TextInput.tsx
index 51cda3d4..326d21f4 100644
--- a/src/components/form-elements/text-input/TextInput.tsx
+++ b/src/components/form-elements/text-input/TextInput.tsx
@@ -55,7 +55,7 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
           ) : undefined,
       }}
     >
-      {({ width, className, code, error, type = 'text', prefix, suffix, ...rest }) => (
+      {({ width, className, code, error, type = 'text', prefix, suffix, ...restRenderProps }) => (
         <input
           className={classNames(
             'nhsuk-input',
@@ -66,7 +66,7 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
           )}
           ref={forwardedRef}
           type={type}
-          {...rest}
+          {...restRenderProps}
         />
       )}
     </FormGroup>
diff --git a/src/components/form-elements/textarea/Textarea.tsx b/src/components/form-elements/textarea/Textarea.tsx
index 0dc14d3c..682cf650 100644
--- a/src/components/form-elements/textarea/Textarea.tsx
+++ b/src/components/form-elements/textarea/Textarea.tsx
@@ -13,12 +13,12 @@ export type TextareaProps = TextareaElementProps &
 
 export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>((props, forwardedRef) => (
   <FormGroup<TextareaProps, 'textarea'> inputType="textarea" {...props}>
-    {({ children, className, error, ...rest }) => (
+    {({ children, className, error, ...restRenderProps }) => (
       <>
         <textarea
           className={classNames('nhsuk-textarea', { 'nhsuk-textarea--error': error }, className)}
           ref={forwardedRef}
-          {...rest}
+          {...restRenderProps}
         />
         {children}
       </>
diff --git a/src/components/utils/FormGroup.tsx b/src/components/utils/FormGroup.tsx
index b3ecd64f..34bf7557 100644
--- a/src/components/utils/FormGroup.tsx
+++ b/src/components/utils/FormGroup.tsx
@@ -55,7 +55,11 @@ export const FormGroup = <P extends ComponentPropsWithoutRef<T>, T extends Eleme
   const { registerComponent, passError } = useContext<IFormGroupContext>(FormGroupContext);
   const { disableErrorFromComponents } = useFormContext();
 
-  const elementID = id ?? generatedID;
+  // Use `name` prop when `id` is missing, otherwise server-side rendered (SSR)
+  // components will use different generated IDs after client-side hydration
+  // https://react.dev/link/hydration-mismatch
+  const elementID = name && !id ? `${name}-${inputType}` : (id ?? generatedID);
+
   const labelID = `${elementID}--label`;
   const errorID = `${elementID}--error-message`;
   const hintID = `${elementID}--hint`;

From ff928d8e320420a309699024f31d7d2280ff4227 Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Fri, 15 May 2026 15:38:24 +0100
Subject: [PATCH 02/15] Fix story typos

---
 stories/Form Elements/CharacterCount.stories.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/stories/Form Elements/CharacterCount.stories.tsx b/stories/Form Elements/CharacterCount.stories.tsx
index 9406ec28..9d52854f 100644
--- a/stories/Form Elements/CharacterCount.stories.tsx	
+++ b/stories/Form Elements/CharacterCount.stories.tsx	
@@ -36,7 +36,7 @@ export const Default: Story = {
  * Sometimes, rather than counting the number of characters, it is useful to count the number of words instead.
  */
 export const WordCountLimit: Story = {
-  name: 'Character count wth maxwords',
+  name: 'Character count with maxwords',
   args: {
     maxWords: 150,
   },
@@ -48,7 +48,7 @@ export const WordCountLimit: Story = {
  * Use the `threshold` prop to only show the count message when users have reached that percentage of the limit.
  */
 export const MessageThreshold: Story = {
-  name: 'Character count wth threshold',
+  name: 'Character count with threshold',
   args: {
     maxLength: 112,
     threshold: 75,
@@ -56,7 +56,7 @@ export const MessageThreshold: Story = {
 };
 
 export const WithTranslations: Story = {
-  name: 'Character count wth translations',
+  name: 'Character count with translations',
   args: {
     label: 'Allwch chi roi mwy o fanylion?',
     hint: 'Peidiwch â chynnwys gwybodaeth bersonol, fel eich enw, dyddiad geni na rhif y GIG',

From 90b7451dcb5040a1ea9b881486c5f1332e0483ae Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Fri, 15 May 2026 15:40:37 +0100
Subject: [PATCH 03/15] Fix unique IDs required for character count

---
 stories/Form Elements/CharacterCount.stories.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/stories/Form Elements/CharacterCount.stories.tsx b/stories/Form Elements/CharacterCount.stories.tsx
index 9d52854f..36dd4119 100644
--- a/stories/Form Elements/CharacterCount.stories.tsx	
+++ b/stories/Form Elements/CharacterCount.stories.tsx	
@@ -38,6 +38,7 @@ export const Default: Story = {
 export const WordCountLimit: Story = {
   name: 'Character count with maxwords',
   args: {
+    id: 'with-word-count',
     maxWords: 150,
   },
 };
@@ -50,6 +51,7 @@ export const WordCountLimit: Story = {
 export const MessageThreshold: Story = {
   name: 'Character count with threshold',
   args: {
+    id: 'with-threshold',
     maxLength: 112,
     threshold: 75,
   },
@@ -60,6 +62,7 @@ export const WithTranslations: Story = {
   args: {
     label: 'Allwch chi roi mwy o fanylion?',
     hint: 'Peidiwch â chynnwys gwybodaeth bersonol, fel eich enw, dyddiad geni na rhif y GIG',
+    id: 'with-translations',
     maxLength: 200,
     i18n: {
       charactersUnderLimit: {

From 0d0df713c884fdf8de61acb5a4a58f910a3b0cad Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Fri, 15 May 2026 13:20:59 +0100
Subject: [PATCH 04/15] Simplify checkbox ID and name stories

---
 stories/Form Elements/Checkboxes.stories.tsx | 526 +++++++------------
 1 file changed, 185 insertions(+), 341 deletions(-)

diff --git a/stories/Form Elements/Checkboxes.stories.tsx b/stories/Form Elements/Checkboxes.stories.tsx
index bd03e0d3..960fc61d 100644
--- a/stories/Form Elements/Checkboxes.stories.tsx	
+++ b/stories/Form Elements/Checkboxes.stories.tsx	
@@ -1,6 +1,7 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import { type ChangeEvent, type InputEvent, useEffect, useRef, useState } from 'react';
+import { type ChangeEvent, useState } from 'react';
 
+import { SummaryList } from '#components/content-presentation/summary-list/index.js';
 import { Checkboxes } from '#components/form-elements/checkboxes/index.js';
 import { Fieldset } from '#components/form-elements/fieldset/Fieldset.js';
 import { BodyText } from '#components/typography/BodyText.js';
@@ -13,8 +14,6 @@ import { ExampleEmail, ExampleMobilePhoneNumber, ExamplePhoneNumber } from './Te
  *
  * ## Implementation notes
  *
- * For details on the new form design pattern, check the documentation for the `Form` component.
- *
  * The `Checkbox` component provides a `CheckboxesContext` context, which the `Checkboxes.Item` components use. When each box initially renders, it will attempt to assign itself an `id` by calling the `getBoxId` method in the context. This will assign each box a sequential ID using either the `idPrefix` or `name` supplied to the Checkbox. If neither are provided, the element will generate it's own unique identifier.
  */
 
@@ -31,12 +30,6 @@ const meta: Meta<typeof Checkboxes> = {
 export default meta;
 type Story = StoryObj<typeof Checkboxes>;
 
-interface CheckboxState {
-  box1: { name?: string; id?: string };
-  box2: { name?: string; id?: string };
-  box3: { name?: string; id?: string };
-}
-
 export const Default: Story = {
   name: 'Checkboxes default',
   args: {
@@ -442,83 +435,51 @@ export const NoIDSupplied: Story = {
     },
   },
   render: function NoIDSuppliedRender() {
-    const checkbox1Ref = useRef<HTMLInputElement>(null);
-    const checkbox2Ref = useRef<HTMLInputElement>(null);
-    const checkbox3Ref = useRef<HTMLInputElement>(null);
-
-    const [checkboxState, setCheckboxState] = useState<CheckboxState>({
-      box1: {
-        name: '',
-        id: '',
-      },
-      box2: {
-        name: '',
-        id: '',
-      },
-      box3: {
-        name: '',
-        id: '',
-      },
-    });
-
-    useEffect(() => {
-      setCheckboxState({
-        box1: {
-          name: checkbox1Ref.current?.name,
-          id: checkbox1Ref.current?.id,
-        },
-        box2: {
-          name: checkbox2Ref.current?.name,
-          id: checkbox2Ref.current?.id,
-        },
-        box3: {
-          name: checkbox3Ref.current?.name,
-          id: checkbox3Ref.current?.id,
-        },
-      });
-    }, []);
+    const [checkbox1, setCheckbox1] = useState<HTMLInputElement | null>(null);
+    const [checkbox2, setCheckbox2] = useState<HTMLInputElement | null>(null);
+    const [checkbox3, setCheckbox3] = useState<HTMLInputElement | null>(null);
 
     return (
       <>
-        <h2>Scenario: No ID Supplied</h2>
-        <h5>Expected Behaviour</h5>
-        <ul className="nhsuk-hint">
-          <li>Boxes are selectable via their labels</li>
-          <li>The Checkboxes are assigned IDs</li>
+        <ul className="nhsuk-list nhsuk-list--bullet">
+          <li>Checkboxes are selectable via their labels</li>
+          <li>Checkboxes are assigned IDs</li>
         </ul>
-        <h5>Results</h5>
-        <ul className="nhsuk-hint">
-          <li>
-            Box 1 ID:
-            {checkboxState.box1.id}
-          </li>
-          <li>
-            Box 2 ID:
-            {checkboxState.box2.id}
-          </li>
-          <li>
-            Box 3 ID:
-            {checkboxState.box3.id}
-          </li>
-          <li>
-            Box 1 Name:
-            {checkboxState.box1.name}
-          </li>
-          <li>
-            Box 2 Name:
-            {checkboxState.box2.name}
-          </li>
-          <li>
-            Box 3 Name:
-            {checkboxState.box3.name}
-          </li>
-        </ul>
-        <h5>Component</h5>
+
+        <hr />
+
         <Checkboxes>
-          <Checkboxes.Item ref={checkbox1Ref}>Box 1</Checkboxes.Item>
-          <Checkboxes.Item ref={checkbox2Ref}>Box 2</Checkboxes.Item>
-          <Checkboxes.Item ref={checkbox3Ref}>Box 3</Checkboxes.Item>
+          <Checkboxes.Item ref={(el) => setCheckbox1(el)}>Box 1</Checkboxes.Item>
+          <Checkboxes.Item ref={(el) => setCheckbox2(el)}>Box 2</Checkboxes.Item>
+          <Checkboxes.Item ref={(el) => setCheckbox3(el)}>Box 3</Checkboxes.Item>
         </Checkboxes>
+
+        {[
+          { name: 'Box 1', el: checkbox1 },
+          { name: 'Box 2', el: checkbox2 },
+          { name: 'Box 3', el: checkbox3 },
+        ].map(({ name, el }) => (
+          <SummaryList key={name}>
+            <SummaryList.Row>
+              <SummaryList.Key>Label</SummaryList.Key>
+              <SummaryList.Value>
+                <samp>{name}</samp>
+              </SummaryList.Value>
+            </SummaryList.Row>
+            <SummaryList.Row>
+              <SummaryList.Key>Name</SummaryList.Key>
+              <SummaryList.Value>
+                <samp>{el?.name}</samp>
+              </SummaryList.Value>
+            </SummaryList.Row>
+            <SummaryList.Row noBorder>
+              <SummaryList.Key>ID</SummaryList.Key>
+              <SummaryList.Value>
+                <samp>{el?.id}</samp>
+              </SummaryList.Value>
+            </SummaryList.Row>
+          </SummaryList>
+        ))}
       </>
     );
   },
@@ -532,83 +493,51 @@ export const NameSupplied: Story = {
     },
   },
   render: function NameSuppliedRender() {
-    const checkbox1Ref = useRef<HTMLInputElement>(null);
-    const checkbox2Ref = useRef<HTMLInputElement>(null);
-    const checkbox3Ref = useRef<HTMLInputElement>(null);
-
-    const [checkboxState, setCheckboxState] = useState<CheckboxState>({
-      box1: {
-        name: '',
-        id: '',
-      },
-      box2: {
-        name: '',
-        id: '',
-      },
-      box3: {
-        name: '',
-        id: '',
-      },
-    });
-
-    useEffect(() => {
-      setCheckboxState({
-        box1: {
-          name: checkbox1Ref.current?.name,
-          id: checkbox1Ref.current?.id,
-        },
-        box2: {
-          name: checkbox2Ref.current?.name,
-          id: checkbox2Ref.current?.id,
-        },
-        box3: {
-          name: checkbox3Ref.current?.name,
-          id: checkbox3Ref.current?.id,
-        },
-      });
-    }, []);
+    const [checkbox1, setCheckbox1] = useState<HTMLInputElement | null>(null);
+    const [checkbox2, setCheckbox2] = useState<HTMLInputElement | null>(null);
+    const [checkbox3, setCheckbox3] = useState<HTMLInputElement | null>(null);
 
     return (
       <>
-        <h2>Scenario: Name Supplied</h2>
-        <h5>Expected Behaviour</h5>
-        <ul className="nhsuk-hint">
-          <li>Boxes are selectable via their labels</li>
-          <li>The Checkboxes are assigned IDs according to the Checkboxes Name</li>
-        </ul>
-        <h5>Results</h5>
-        <ul className="nhsuk-hint">
-          <li>
-            Box 1 ID:
-            {checkboxState.box1.id}
-          </li>
-          <li>
-            Box 2 ID:
-            {checkboxState.box2.id}
-          </li>
-          <li>
-            Box 3 ID:
-            {checkboxState.box3.id}
-          </li>
-          <li>
-            Box 1 Name:
-            {checkboxState.box1.name}
-          </li>
-          <li>
-            Box 2 Name:
-            {checkboxState.box2.name}
-          </li>
-          <li>
-            Box 3 Name:
-            {checkboxState.box3.name}
-          </li>
+        <ul className="nhsuk-list nhsuk-list--bullet">
+          <li>Checkboxes are selectable via their labels</li>
+          <li>Checkboxes have the same name as the checkboxes component</li>
         </ul>
-        <h5>Component</h5>
+
+        <hr />
+
         <Checkboxes name="name-supplied">
-          <Checkboxes.Item ref={checkbox1Ref}>Box 1</Checkboxes.Item>
-          <Checkboxes.Item ref={checkbox2Ref}>Box 2</Checkboxes.Item>
-          <Checkboxes.Item ref={checkbox3Ref}>Box 3</Checkboxes.Item>
+          <Checkboxes.Item ref={(el) => setCheckbox1(el)}>Box 1</Checkboxes.Item>
+          <Checkboxes.Item ref={(el) => setCheckbox2(el)}>Box 2</Checkboxes.Item>
+          <Checkboxes.Item ref={(el) => setCheckbox3(el)}>Box 3</Checkboxes.Item>
         </Checkboxes>
+
+        {[
+          { name: 'Box 1', el: checkbox1 },
+          { name: 'Box 2', el: checkbox2 },
+          { name: 'Box 3', el: checkbox3 },
+        ].map(({ name, el }) => (
+          <SummaryList key={name}>
+            <SummaryList.Row>
+              <SummaryList.Key>Label</SummaryList.Key>
+              <SummaryList.Value>
+                <samp>{name}</samp>
+              </SummaryList.Value>
+            </SummaryList.Row>
+            <SummaryList.Row>
+              <SummaryList.Key>Name</SummaryList.Key>
+              <SummaryList.Value>
+                <samp>{el?.name}</samp>
+              </SummaryList.Value>
+            </SummaryList.Row>
+            <SummaryList.Row noBorder>
+              <SummaryList.Key>ID</SummaryList.Key>
+              <SummaryList.Value>
+                <samp>{el?.id}</samp>
+              </SummaryList.Value>
+            </SummaryList.Row>
+          </SummaryList>
+        ))}
       </>
     );
   },
@@ -622,84 +551,52 @@ export const IDPrefixSupplied: Story = {
     },
   },
   render: function IDPrefixSuppliedRender() {
-    const checkbox1Ref = useRef<HTMLInputElement>(null);
-    const checkbox2Ref = useRef<HTMLInputElement>(null);
-    const checkbox3Ref = useRef<HTMLInputElement>(null);
-
-    const [checkboxState, setCheckboxState] = useState<CheckboxState>({
-      box1: {
-        name: '',
-        id: '',
-      },
-      box2: {
-        name: '',
-        id: '',
-      },
-      box3: {
-        name: '',
-        id: '',
-      },
-    });
-
-    useEffect(() => {
-      setCheckboxState({
-        box1: {
-          name: checkbox1Ref.current?.name,
-          id: checkbox1Ref.current?.id,
-        },
-        box2: {
-          name: checkbox2Ref.current?.name,
-          id: checkbox2Ref.current?.id,
-        },
-        box3: {
-          name: checkbox3Ref.current?.name,
-          id: checkbox3Ref.current?.id,
-        },
-      });
-    }, []);
+    const [checkbox1, setCheckbox1] = useState<HTMLInputElement | null>(null);
+    const [checkbox2, setCheckbox2] = useState<HTMLInputElement | null>(null);
+    const [checkbox3, setCheckbox3] = useState<HTMLInputElement | null>(null);
 
     return (
       <>
-        <h2>Scenario: ID Prefix Supplied</h2>
-        <h5>Expected Behaviour</h5>
-        <ul className="nhsuk-hint">
-          <li>Boxes are selectable via their labels</li>
-          <li>The Checkboxes are assigned IDs according to the ID prefix</li>
-          <li>The Checkboxes are assigned randomly generated names</li>
-        </ul>
-        <h5>Results</h5>
-        <ul className="nhsuk-hint">
-          <li>
-            Box 1 ID:
-            {checkboxState.box1.id}
-          </li>
-          <li>
-            Box 2 ID:
-            {checkboxState.box2.id}
-          </li>
-          <li>
-            Box 3 ID:
-            {checkboxState.box3.id}
-          </li>
-          <li>
-            Box 1 Name:
-            {checkboxState.box1.name}
-          </li>
-          <li>
-            Box 2 Name:
-            {checkboxState.box2.name}
-          </li>
-          <li>
-            Box 3 Name:
-            {checkboxState.box3.name}
-          </li>
+        <ul className="nhsuk-list nhsuk-list--bullet">
+          <li>Checkboxes are selectable via their labels</li>
+          <li>Checkboxes are assigned IDs according to the ID prefix</li>
+          <li>Checkboxes are assigned randomly generated names</li>
         </ul>
-        <h5>Component</h5>
+
+        <hr />
+
         <Checkboxes idPrefix="idprefix">
-          <Checkboxes.Item ref={checkbox1Ref}>Box 1</Checkboxes.Item>
-          <Checkboxes.Item ref={checkbox2Ref}>Box 2</Checkboxes.Item>
-          <Checkboxes.Item ref={checkbox3Ref}>Box 3</Checkboxes.Item>
+          <Checkboxes.Item ref={(el) => setCheckbox1(el)}>Box 1</Checkboxes.Item>
+          <Checkboxes.Item ref={(el) => setCheckbox2(el)}>Box 2</Checkboxes.Item>
+          <Checkboxes.Item ref={(el) => setCheckbox3(el)}>Box 3</Checkboxes.Item>
         </Checkboxes>
+
+        {[
+          { name: 'Box 1', el: checkbox1 },
+          { name: 'Box 2', el: checkbox2 },
+          { name: 'Box 3', el: checkbox3 },
+        ].map(({ name, el }) => (
+          <SummaryList key={name}>
+            <SummaryList.Row>
+              <SummaryList.Key>Label</SummaryList.Key>
+              <SummaryList.Value>
+                <samp>{name}</samp>
+              </SummaryList.Value>
+            </SummaryList.Row>
+            <SummaryList.Row>
+              <SummaryList.Key>Name</SummaryList.Key>
+              <SummaryList.Value>
+                <samp>{el?.name}</samp>
+              </SummaryList.Value>
+            </SummaryList.Row>
+            <SummaryList.Row noBorder>
+              <SummaryList.Key>ID</SummaryList.Key>
+              <SummaryList.Value>
+                <samp>{el?.id}</samp>
+              </SummaryList.Value>
+            </SummaryList.Row>
+          </SummaryList>
+        ))}
       </>
     );
   },
@@ -713,151 +610,98 @@ export const IDPrefixAndNameSupplied: Story = {
     },
   },
   render: function IDPrefixAndNameSuppliedRender() {
-    const checkbox1Ref = useRef<HTMLInputElement>(null);
-    const checkbox2Ref = useRef<HTMLInputElement>(null);
-    const checkbox3Ref = useRef<HTMLInputElement>(null);
-
-    const [checkboxState, setCheckboxState] = useState<CheckboxState>({
-      box1: {
-        name: '',
-        id: '',
-      },
-      box2: {
-        name: '',
-        id: '',
-      },
-      box3: {
-        name: '',
-        id: '',
-      },
-    });
-
-    useEffect(() => {
-      setCheckboxState({
-        box1: {
-          name: checkbox1Ref.current?.name,
-          id: checkbox1Ref.current?.id,
-        },
-        box2: {
-          name: checkbox2Ref.current?.name,
-          id: checkbox2Ref.current?.id,
-        },
-        box3: {
-          name: checkbox3Ref.current?.name,
-          id: checkbox3Ref.current?.id,
-        },
-      });
-    }, []);
+    const [checkbox1, setCheckbox1] = useState<HTMLInputElement | null>(null);
+    const [checkbox2, setCheckbox2] = useState<HTMLInputElement | null>(null);
+    const [checkbox3, setCheckbox3] = useState<HTMLInputElement | null>(null);
 
     return (
       <>
-        <h2>Scenario: ID Prefix and Name Supplied</h2>
-        <h5>Expected Behaviour</h5>
-        <ul className="nhsuk-hint">
-          <li>Boxes are selectable via their labels</li>
-          <li>The Checkboxes are assigned IDs according to the ID prefix</li>
-          <li>The Checkboxes have the same name as the Checkboxes component</li>
+        <ul className="nhsuk-list nhsuk-list--bullet">
+          <li>Checkboxes are selectable via their labels</li>
+          <li>Checkboxes are assigned IDs according to the ID prefix</li>
+          <li>Checkboxes have the same name as the checkboxes component</li>
         </ul>
-        <h5>Results</h5>
-        <ul className="nhsuk-hint">
-          <li>
-            Box 1 ID:
-            {checkboxState.box1.id}
-          </li>
-          <li>
-            Box 2 ID:
-            {checkboxState.box2.id}
-          </li>
-          <li>
-            Box 3 ID:
-            {checkboxState.box3.id}
-          </li>
-          <li>
-            Box 1 Name:
-            {checkboxState.box1.name}
-          </li>
-          <li>
-            Box 2 Name:
-            {checkboxState.box2.name}
-          </li>
-          <li>
-            Box 3 Name:
-            {checkboxState.box3.name}
-          </li>
-        </ul>
-        <h5>Component</h5>
+
+        <hr />
+
         <Checkboxes idPrefix="idprefix-name" name="testname">
-          <Checkboxes.Item ref={checkbox1Ref}>Box 1</Checkboxes.Item>
-          <Checkboxes.Item ref={checkbox2Ref}>Box 2</Checkboxes.Item>
-          <Checkboxes.Item ref={checkbox3Ref}>Box 3</Checkboxes.Item>
+          <Checkboxes.Item ref={(el) => setCheckbox1(el)}>Box 1</Checkboxes.Item>
+          <Checkboxes.Item ref={(el) => setCheckbox2(el)}>Box 2</Checkboxes.Item>
+          <Checkboxes.Item ref={(el) => setCheckbox3(el)}>Box 3</Checkboxes.Item>
         </Checkboxes>
+
+        {[
+          { name: 'Box 1', el: checkbox1 },
+          { name: 'Box 2', el: checkbox2 },
+          { name: 'Box 3', el: checkbox3 },
+        ].map(({ name, el }) => (
+          <SummaryList key={name}>
+            <SummaryList.Row>
+              <SummaryList.Key>Label</SummaryList.Key>
+              <SummaryList.Value>
+                <samp>{name}</samp>
+              </SummaryList.Value>
+            </SummaryList.Row>
+            <SummaryList.Row>
+              <SummaryList.Key>Name</SummaryList.Key>
+              <SummaryList.Value>
+                <samp>{el?.name}</samp>
+              </SummaryList.Value>
+            </SummaryList.Row>
+            <SummaryList.Row noBorder>
+              <SummaryList.Key>ID</SummaryList.Key>
+              <SummaryList.Value>
+                <samp>{el?.id}</samp>
+              </SummaryList.Value>
+            </SummaryList.Row>
+          </SummaryList>
+        ))}
       </>
     );
   },
 };
 
-export const OnChangeAndOnInputHandlers: Story = {
-  name: 'Checkboxes change and input handlers',
+export const OnChangeHandler: Story = {
+  name: 'Checkboxes change handler',
+  args: {
+    name: 'change-handler',
+  },
   parameters: {
     chromatic: {
       disableSnapshot: true,
     },
   },
-  render: function OnChangeAndOnInputHandlersRender() {
-    const [changeEventLog, setChangeEventLog] = useState<string[]>([]);
-    const [inputEventLog, setInputEventLog] = useState<string[]>([]);
-    const [currentValue, setCurrentValue] = useState<string[]>([]);
-
-    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
-      const target = e.target as HTMLInputElement;
-      setChangeEventLog([
-        ...changeEventLog,
-        `[${target.id}] Value: ${target.value}, Checked: ${target.checked}`,
-      ]);
-      if (currentValue.includes(target.value)) {
-        setCurrentValue(currentValue.filter((x) => x !== target.value));
+  render: function OnChangeHandlerRender(args) {
+    const [values, setValues] = useState<Set<string>>(new Set());
+
+    const handleChange = ({ target }: ChangeEvent<HTMLInputElement>) => {
+      const updated = new Set(values);
+
+      if (target.checked) {
+        updated.add(target.value);
       } else {
-        setCurrentValue([...currentValue, target.value]);
+        updated.delete(target.value);
       }
-    };
 
-    const handleInput = (e: InputEvent<HTMLInputElement>) => {
-      const target = e.target as HTMLInputElement;
-      setInputEventLog([
-        ...inputEventLog,
-        `[${target.id}] Value: ${target.value}, Checked: ${target.checked}`,
-      ]);
+      setValues(updated);
     };
 
     return (
       <>
-        <h2>Scenario: onChange and onInput handlers are bound without any other props</h2>
-        <h5>Expected Behaviour</h5>
-        <ul className="nhsuk-hint">
-          <li>OnChange Handlers are fired using the generated IDs and Names</li>
-          <li>The value is passed through</li>
-        </ul>
-        <h5>Component</h5>
-        <Checkboxes onChange={handleChange} onInput={handleInput}>
+        <Checkboxes onChange={handleChange} {...args}>
           <Checkboxes.Item value="1">Box 1</Checkboxes.Item>
           <Checkboxes.Item value="2">Box 2</Checkboxes.Item>
           <Checkboxes.Item value="3">Box 3</Checkboxes.Item>
         </Checkboxes>
-        <br />
-        <h5>Current Value</h5>
-        <pre>{JSON.stringify(currentValue, null, 2)}</pre>
-        <h5>Change Events</h5>
-        <ul className="nhsuk-hint">
-          {changeEventLog.map((event, index) => (
-            <li key={index}>{event}</li>
-          ))}
-        </ul>
-        <h5>Input Events</h5>
-        <ul className="nhsuk-hint">
-          {inputEventLog.map((event, index) => (
-            <li key={index}>{event}</li>
-          ))}
-        </ul>
+
+        <SummaryList>
+          <SummaryList.Row>
+            <SummaryList.Key>Values</SummaryList.Key>
+            <SummaryList.Value>
+              <samp>{values.size ? [...values].join(', ') : 'None'}</samp>
+            </SummaryList.Value>
+          </SummaryList.Row>
+        </SummaryList>
       </>
     );
   },

From 9b6861ab28445dd6008d8d81440da84c6765a063 Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Fri, 15 May 2026 12:57:53 +0100
Subject: [PATCH 05/15] Populate conditional content text input values

---
 stories/Form Elements/Checkboxes.stories.tsx | 12 ++++++++++--
 stories/Form Elements/Radios.stories.tsx     |  6 +++++-
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/stories/Form Elements/Checkboxes.stories.tsx b/stories/Form Elements/Checkboxes.stories.tsx
index 960fc61d..2c2059d7 100644
--- a/stories/Form Elements/Checkboxes.stories.tsx	
+++ b/stories/Form Elements/Checkboxes.stories.tsx	
@@ -257,13 +257,21 @@ export const WithConditionalContentValues: Story = {
   },
   render: (args) => (
     <Checkboxes {...args}>
-      <Checkboxes.Item value="email" conditional={<ExampleEmail />} defaultChecked>
+      <Checkboxes.Item
+        value="email"
+        conditional={<ExampleEmail defaultValue="karen.francis@example.com" />}
+        defaultChecked
+      >
         Email
       </Checkboxes.Item>
       <Checkboxes.Item value="phone" conditional={<ExamplePhoneNumber />}>
         Phone
       </Checkboxes.Item>
-      <Checkboxes.Item value="text" conditional={<ExampleMobilePhoneNumber />} defaultChecked>
+      <Checkboxes.Item
+        value="text"
+        conditional={<ExampleMobilePhoneNumber defaultValue="07700 900362" />}
+        defaultChecked
+      >
         Text message
       </Checkboxes.Item>
     </Checkboxes>
diff --git a/stories/Form Elements/Radios.stories.tsx b/stories/Form Elements/Radios.stories.tsx
index 94989764..c9997d00 100644
--- a/stories/Form Elements/Radios.stories.tsx	
+++ b/stories/Form Elements/Radios.stories.tsx	
@@ -305,7 +305,11 @@ export const WithConditionalContentValues: Story = {
   },
   render: (args) => (
     <Radios {...args}>
-      <Radios.Item value="email" conditional={<ExampleEmail />} defaultChecked>
+      <Radios.Item
+        value="email"
+        conditional={<ExampleEmail defaultValue="karen.francis@example.com" />}
+        defaultChecked
+      >
         Email
       </Radios.Item>
       <Radios.Item value="phone" conditional={<ExamplePhoneNumber />}>

From acd72c0c3034871fe36945fd5b6cc44ef87f6f15 Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Thu, 14 May 2026 16:25:27 +0100
Subject: [PATCH 06/15] Add radios change handler story

---
 stories/Form Elements/Radios.stories.tsx | 40 ++++++++++++++++++++++++
 1 file changed, 40 insertions(+)

diff --git a/stories/Form Elements/Radios.stories.tsx b/stories/Form Elements/Radios.stories.tsx
index c9997d00..dab7611c 100644
--- a/stories/Form Elements/Radios.stories.tsx	
+++ b/stories/Form Elements/Radios.stories.tsx	
@@ -1,5 +1,7 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
+import { type ChangeEvent, useState } from 'react';
 
+import { SummaryList } from '#components/content-presentation/summary-list/index.js';
 import { Radios } from '#components/form-elements/radios/index.js';
 
 import { ExampleEmail, ExampleMobilePhoneNumber, ExamplePhoneNumber } from './TextInput.stories.js';
@@ -356,3 +358,41 @@ export const WithConditionalContentErrorNested: Story = {
     </Radios>
   ),
 };
+
+export const OnChangeHandler: Story = {
+  name: 'Radios change handler',
+  args: {
+    name: 'change-handler',
+  },
+  parameters: {
+    chromatic: {
+      disableSnapshot: true,
+    },
+  },
+  render: function OnChangeHandlerRender(args) {
+    const [value, setValue] = useState<string | undefined>();
+
+    const handleChange = ({ target }: ChangeEvent<HTMLInputElement>) => {
+      setValue(target.value);
+    };
+
+    return (
+      <>
+        <Radios onChange={handleChange} {...args}>
+          <Radios.Item value="email">Email</Radios.Item>
+          <Radios.Item value="phone">Phone</Radios.Item>
+          <Radios.Item value="text">Text message</Radios.Item>
+        </Radios>
+
+        <SummaryList>
+          <SummaryList.Row>
+            <SummaryList.Key>Value</SummaryList.Key>
+            <SummaryList.Value>
+              <samp>{value ?? 'None'}</samp>
+            </SummaryList.Value>
+          </SummaryList.Row>
+        </SummaryList>
+      </>
+    );
+  },
+};

From e104a7e0cf34f5ef1e098794ea75555d71e02e3d Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Thu, 14 May 2026 17:29:46 +0100
Subject: [PATCH 07/15] Fix checkboxes `forceShowConditional` option by
 checking input

---
 .../form-elements/checkboxes/components/CheckboxesItem.tsx  | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/form-elements/checkboxes/components/CheckboxesItem.tsx b/src/components/form-elements/checkboxes/components/CheckboxesItem.tsx
index fec9fa3c..80cc1790 100644
--- a/src/components/form-elements/checkboxes/components/CheckboxesItem.tsx
+++ b/src/components/form-elements/checkboxes/components/CheckboxesItem.tsx
@@ -37,10 +37,10 @@ export const CheckboxesItem = forwardRef<HTMLInputElement, CheckboxesItemProps>(
       hint,
       hintProps,
       conditional,
+      conditionalProps,
+      forceShowConditional,
       defaultChecked,
       checked,
-      forceShowConditional,
-      conditionalProps,
       exclusive,
       exclusiveGroup,
       ...rest
@@ -70,7 +70,7 @@ export const CheckboxesItem = forwardRef<HTMLInputElement, CheckboxesItemProps>(
             name={name}
             type="checkbox"
             checked={checked}
-            defaultChecked={defaultChecked}
+            defaultChecked={defaultChecked || forceShowConditional}
             data-checkbox-exclusive={exclusive}
             data-checkbox-exclusive-group={exclusiveGroup}
             data-aria-controls={conditional ? `${inputID}--conditional` : undefined}

From a897e63cf160ed0716f56619be95956f2a4725c2 Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Thu, 14 May 2026 17:33:25 +0100
Subject: [PATCH 08/15] Fix radios `forceShowConditional` option by checking
 input

---
 src/components/form-elements/radios/components/RadiosItem.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/form-elements/radios/components/RadiosItem.tsx b/src/components/form-elements/radios/components/RadiosItem.tsx
index 242af651..7bb4f41b 100644
--- a/src/components/form-elements/radios/components/RadiosItem.tsx
+++ b/src/components/form-elements/radios/components/RadiosItem.tsx
@@ -35,8 +35,8 @@ export const RadiosItem = forwardRef<HTMLInputElement, RadiosItemProps>((props,
     hintProps,
     labelProps,
     conditional,
-    forceShowConditional,
     conditionalProps,
+    forceShowConditional,
     checked,
     defaultChecked,
     onChange,
@@ -72,7 +72,7 @@ export const RadiosItem = forwardRef<HTMLInputElement, RadiosItemProps>((props,
           name={name}
           type="radio"
           checked={checked}
-          defaultChecked={defaultChecked}
+          defaultChecked={defaultChecked || forceShowConditional}
           data-aria-controls={conditional ? `${inputID}--conditional` : undefined}
           aria-describedby={hint ? `${inputID}--hint` : undefined}
           ref={forwardedRef}

From e9662bd1551f0b841b4cc82298b789bd4e92c15f Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Thu, 14 May 2026 22:27:25 +0100
Subject: [PATCH 09/15] Remove non-working radio selection state from v5.x

---
 .../checkboxes/components/CheckboxesItem.tsx  | 15 ++++++------
 .../form-elements/radios/Radios.tsx           |  7 ------
 .../form-elements/radios/RadiosContext.ts     |  4 ----
 .../radios/components/RadiosItem.tsx          | 23 ++++++++-----------
 4 files changed, 18 insertions(+), 31 deletions(-)

diff --git a/src/components/form-elements/checkboxes/components/CheckboxesItem.tsx b/src/components/form-elements/checkboxes/components/CheckboxesItem.tsx
index 80cc1790..67e8a508 100644
--- a/src/components/form-elements/checkboxes/components/CheckboxesItem.tsx
+++ b/src/components/form-elements/checkboxes/components/CheckboxesItem.tsx
@@ -51,7 +51,12 @@ export const CheckboxesItem = forwardRef<HTMLInputElement, CheckboxesItemProps>(
 
     const [checkboxReference] = useState<string>(leaseReference());
     const inputID = id || getBoxId(checkboxReference);
-    const shouldShowConditional = !!(checked || defaultChecked);
+
+    const isChecked =
+      // 1. Checkbox is checked via props
+      !!(checked || defaultChecked) ||
+      // 2. Checkbox should be checked (to show conditional)
+      forceShowConditional;
 
     const { className: labelClassName, ...restLabelProps } = labelProps || {};
     const { className: hintClassName, ...restHintProps } = hintProps || {};
@@ -70,7 +75,7 @@ export const CheckboxesItem = forwardRef<HTMLInputElement, CheckboxesItemProps>(
             name={name}
             type="checkbox"
             checked={checked}
-            defaultChecked={defaultChecked || forceShowConditional}
+            defaultChecked={defaultChecked ?? (checked === undefined ? isChecked : undefined)}
             data-checkbox-exclusive={exclusive}
             data-checkbox-exclusive-group={exclusiveGroup}
             data-aria-controls={conditional ? `${inputID}--conditional` : undefined}
@@ -98,11 +103,7 @@ export const CheckboxesItem = forwardRef<HTMLInputElement, CheckboxesItemProps>(
           <div
             className={classNames(
               'nhsuk-checkboxes__conditional',
-              {
-                'nhsuk-checkboxes__conditional--hidden': !(
-                  shouldShowConditional || forceShowConditional
-                ),
-              },
+              { 'nhsuk-checkboxes__conditional--hidden': !isChecked },
               conditionalClassName,
             )}
             id={`${inputID}--conditional`}
diff --git a/src/components/form-elements/radios/Radios.tsx b/src/components/form-elements/radios/Radios.tsx
index 093aacb3..8a3d70ad 100644
--- a/src/components/form-elements/radios/Radios.tsx
+++ b/src/components/form-elements/radios/Radios.tsx
@@ -33,7 +33,6 @@ const RadiosComponent = forwardRef<HTMLDivElement, RadiosProps>((props, forwarde
   const importRef = useRef<Promise<RadiosModule | void>>(null);
   const [instanceError, setInstanceError] = useState<Error>();
   const [instance, setInstance] = useState<RadiosModule>();
-  const [selectedRadio, setSelectedRadio] = useState<string>();
 
   const _radioReferences: string[] = [];
   let _radioCount = 0;
@@ -76,10 +75,6 @@ const RadiosComponent = forwardRef<HTMLDivElement, RadiosProps>((props, forwarde
     _radioReferences.splice(_radioReferences.indexOf(reference), 1);
   };
 
-  const setSelected = (radioReference: string): void => {
-    setSelectedRadio(radioReference);
-  };
-
   const resetRadioIds = (): void => {
     _radioCount = 0;
     _radioIds = {};
@@ -95,8 +90,6 @@ const RadiosComponent = forwardRef<HTMLDivElement, RadiosProps>((props, forwarde
         resetRadioIds();
         const contextValue: IRadiosContext = {
           getRadioId: (reference) => getRadioId(id, reference),
-          selectedRadio: selectedRadio,
-          setSelected: setSelected,
           leaseReference: leaseReference,
           unleaseReference: unleaseReference,
           name,
diff --git a/src/components/form-elements/radios/RadiosContext.ts b/src/components/form-elements/radios/RadiosContext.ts
index d4193dd2..dc8789fc 100644
--- a/src/components/form-elements/radios/RadiosContext.ts
+++ b/src/components/form-elements/radios/RadiosContext.ts
@@ -4,18 +4,14 @@ import { createContext } from 'react';
 
 export interface IRadiosContext {
   name: string;
-  selectedRadio?: string;
   getRadioId: (reference: string) => string;
-  setSelected: (radioRef: string) => void;
   leaseReference: () => string;
   unleaseReference: (reference: string) => void;
 }
 
 export const RadiosContext = createContext<IRadiosContext>({
   name: '',
-  selectedRadio: '',
   getRadioId: () => '',
-  setSelected: () => {},
   leaseReference: () => '',
   unleaseReference: () => {},
 });
diff --git a/src/components/form-elements/radios/components/RadiosItem.tsx b/src/components/form-elements/radios/components/RadiosItem.tsx
index 7bb4f41b..8135fa7d 100644
--- a/src/components/form-elements/radios/components/RadiosItem.tsx
+++ b/src/components/form-elements/radios/components/RadiosItem.tsx
@@ -43,28 +43,25 @@ export const RadiosItem = forwardRef<HTMLInputElement, RadiosItemProps>((props,
     ...rest
   } = props;
 
-  const { name, getRadioId, setSelected, selectedRadio, leaseReference, unleaseReference } =
+  const { name, getRadioId, leaseReference, unleaseReference } =
     useContext<IRadiosContext>(RadiosContext);
+
   const [radioReference] = useState<string>(leaseReference());
   const inputID = id || getRadioId(radioReference);
-  const shouldShowConditional = selectedRadio === radioReference && checked !== false;
-
-  useEffect(() => () => unleaseReference(radioReference));
 
-  useEffect(() => {
-    if (defaultChecked) setSelected(radioReference);
-  }, [defaultChecked, setSelected, radioReference]);
+  const isChecked =
+    // 1. Radio is checked via props
+    !!(checked || defaultChecked) ||
+    // 2. Radio should be checked (to show conditional)
+    forceShowConditional;
 
-  useEffect(() => {
-    if (checked) setSelected(radioReference);
-  }, [checked, setSelected, radioReference]);
+  useEffect(() => () => unleaseReference(radioReference));
 
   return (
     <>
       <div className="nhsuk-radios__item">
         <input
           onChange={(e) => {
-            setSelected(radioReference);
             if (onChange) onChange(e);
           }}
           className={classNames('nhsuk-radios__input', className)}
@@ -72,7 +69,7 @@ export const RadiosItem = forwardRef<HTMLInputElement, RadiosItemProps>((props,
           name={name}
           type="radio"
           checked={checked}
-          defaultChecked={defaultChecked || forceShowConditional}
+          defaultChecked={defaultChecked ?? (checked === undefined ? isChecked : undefined)}
           data-aria-controls={conditional ? `${inputID}--conditional` : undefined}
           aria-describedby={hint ? `${inputID}--hint` : undefined}
           ref={forwardedRef}
@@ -93,7 +90,7 @@ export const RadiosItem = forwardRef<HTMLInputElement, RadiosItemProps>((props,
       {conditional && (
         <div
           className={classNames('nhsuk-radios__conditional', {
-            'nhsuk-radios__conditional--hidden': !(shouldShowConditional || forceShowConditional),
+            'nhsuk-radios__conditional--hidden': !isChecked,
           })}
           id={`${inputID}--conditional`}
           {...conditionalProps}

From 5c38c733bcdf4917e01df7bd1dfc6f87d8874174 Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Thu, 14 May 2026 00:31:54 +0100
Subject: [PATCH 10/15] Align differences between checkboxes and radios

---
 .../checkboxes/components/CheckboxesItem.tsx  |  9 +++---
 .../form-elements/radios/Radios.tsx           |  4 +--
 .../radios/components/RadiosItem.tsx          | 30 +++++++++++++------
 3 files changed, 28 insertions(+), 15 deletions(-)

diff --git a/src/components/form-elements/checkboxes/components/CheckboxesItem.tsx b/src/components/form-elements/checkboxes/components/CheckboxesItem.tsx
index 67e8a508..65a08ef4 100644
--- a/src/components/form-elements/checkboxes/components/CheckboxesItem.tsx
+++ b/src/components/form-elements/checkboxes/components/CheckboxesItem.tsx
@@ -31,16 +31,17 @@ export type CheckboxesItemProps = CheckboxesItemElementProps &
 export const CheckboxesItem = forwardRef<HTMLInputElement, CheckboxesItemProps>(
   (props, forwardedRef) => {
     const {
-      id,
-      labelProps,
+      className,
       children,
+      id,
       hint,
       hintProps,
+      labelProps,
       conditional,
       conditionalProps,
       forceShowConditional,
-      defaultChecked,
       checked,
+      defaultChecked,
       exclusive,
       exclusiveGroup,
       ...rest
@@ -70,7 +71,7 @@ export const CheckboxesItem = forwardRef<HTMLInputElement, CheckboxesItemProps>(
       <>
         <div className="nhsuk-checkboxes__item">
           <input
-            className="nhsuk-checkboxes__input"
+            className={classNames('nhsuk-checkboxes__input', className)}
             id={inputID}
             name={name}
             type="checkbox"
diff --git a/src/components/form-elements/radios/Radios.tsx b/src/components/form-elements/radios/Radios.tsx
index 8a3d70ad..d0854494 100644
--- a/src/components/form-elements/radios/Radios.tsx
+++ b/src/components/form-elements/radios/Radios.tsx
@@ -86,13 +86,13 @@ const RadiosComponent = forwardRef<HTMLDivElement, RadiosProps>((props, forwarde
 
   return (
     <FormGroup<RadiosProps, 'div'> inputType="radios" {...rest}>
-      {({ className, inline, small, name, id, error, ...restRenderProps }) => {
+      {({ className, inline, small, name, id, idPrefix, error, ...restRenderProps }) => {
         resetRadioIds();
         const contextValue: IRadiosContext = {
+          name,
           getRadioId: (reference) => getRadioId(id, reference),
           leaseReference: leaseReference,
           unleaseReference: unleaseReference,
-          name,
         };
 
         return (
diff --git a/src/components/form-elements/radios/components/RadiosItem.tsx b/src/components/form-elements/radios/components/RadiosItem.tsx
index 8135fa7d..ade3a7f0 100644
--- a/src/components/form-elements/radios/components/RadiosItem.tsx
+++ b/src/components/form-elements/radios/components/RadiosItem.tsx
@@ -13,7 +13,7 @@ import {
 
 import { HintText } from '#components/form-elements/hint-text/index.js';
 import { Label } from '#components/form-elements/label/index.js';
-import { type FormElementProps } from '#util/types/FormTypes.js';
+import { type ComponentPropsWithDataAttributes, type FormElementProps } from '#util/types/index.js';
 
 import { type IRadiosContext, RadiosContext } from '../RadiosContext.js';
 
@@ -49,6 +49,10 @@ export const RadiosItem = forwardRef<HTMLInputElement, RadiosItemProps>((props,
   const [radioReference] = useState<string>(leaseReference());
   const inputID = id || getRadioId(radioReference);
 
+  const { className: labelClassName, ...restLabelProps } = labelProps || {};
+  const { className: hintClassName, ...restHintProps } = hintProps || {};
+  const { className: conditionalClassName, ...restConditionalProps } = conditionalProps || {};
+
   const isChecked =
     // 1. Radio is checked via props
     !!(checked || defaultChecked) ||
@@ -57,6 +61,8 @@ export const RadiosItem = forwardRef<HTMLInputElement, RadiosItemProps>((props,
 
   useEffect(() => () => unleaseReference(radioReference));
 
+  const inputProps: ComponentPropsWithDataAttributes<'input'> = rest;
+
   return (
     <>
       <div className="nhsuk-radios__item">
@@ -73,27 +79,33 @@ export const RadiosItem = forwardRef<HTMLInputElement, RadiosItemProps>((props,
           data-aria-controls={conditional ? `${inputID}--conditional` : undefined}
           aria-describedby={hint ? `${inputID}--hint` : undefined}
           ref={forwardedRef}
-          {...rest}
+          {...inputProps}
         />
         <Label
-          className="nhsuk-radios__label"
+          className={classNames('nhsuk-radios__label', labelClassName)}
           id={`${inputID}--label`}
           htmlFor={inputID}
-          {...labelProps}
+          {...restLabelProps}
         >
           {children}
         </Label>
-        <HintText className="nhsuk-radios__hint" id={`${inputID}--hint`} {...hintProps}>
+        <HintText
+          className={classNames('nhsuk-radios__hint', hintClassName)}
+          id={`${inputID}--hint`}
+          {...restHintProps}
+        >
           {hint}
         </HintText>
       </div>
       {conditional && (
         <div
-          className={classNames('nhsuk-radios__conditional', {
-            'nhsuk-radios__conditional--hidden': !isChecked,
-          })}
+          className={classNames(
+            'nhsuk-radios__conditional',
+            { 'nhsuk-radios__conditional--hidden': !isChecked },
+            conditionalClassName,
+          )}
           id={`${inputID}--conditional`}
-          {...conditionalProps}
+          {...restConditionalProps}
         >
           {conditional}
         </div>

From 1d3c408e78e46145ec26472dc0ef288e43d311a2 Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Thu, 14 May 2026 00:33:06 +0100
Subject: [PATCH 11/15] Add default change handlers to checkboxes and radios

---
 .../form-elements/checkboxes/Checkboxes.tsx   | 10 ++++++++-
 .../checkboxes/CheckboxesContext.ts           |  4 +++-
 .../checkboxes/components/CheckboxesItem.tsx  | 20 +++++++++++++++--
 .../form-elements/radios/Radios.tsx           | 10 ++++++++-
 .../form-elements/radios/RadiosContext.ts     |  4 +++-
 .../radios/components/RadiosItem.tsx          | 22 ++++++++++++++-----
 6 files changed, 59 insertions(+), 11 deletions(-)

diff --git a/src/components/form-elements/checkboxes/Checkboxes.tsx b/src/components/form-elements/checkboxes/Checkboxes.tsx
index 479a2b90..ff119902 100644
--- a/src/components/form-elements/checkboxes/Checkboxes.tsx
+++ b/src/components/form-elements/checkboxes/Checkboxes.tsx
@@ -3,6 +3,7 @@
 import classNames from 'classnames';
 import { type Checkboxes as CheckboxesModule } from 'nhsuk-frontend';
 import {
+  type ChangeEvent,
   type ComponentPropsWithoutRef,
   forwardRef,
   useEffect,
@@ -27,7 +28,7 @@ export type CheckboxesProps = CheckboxesElementProps &
   Omit<FormElementProps, 'label' | 'labelProps'>;
 
 const CheckboxesComponent = forwardRef<HTMLDivElement, CheckboxesProps>((props, forwardedRef) => {
-  const { children, idPrefix = props.name, ...rest } = props;
+  const { children, idPrefix = props.name, onChange, ...rest } = props;
 
   const moduleRef = useRef<HTMLDivElement>(null);
   const importRef = useRef<Promise<CheckboxesModule | void>>(null);
@@ -79,6 +80,12 @@ const CheckboxesComponent = forwardRef<HTMLDivElement, CheckboxesProps>((props,
     _boxIds = {};
   };
 
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    if (onChange) {
+      onChange(e);
+    }
+  };
+
   if (instanceError) {
     throw instanceError;
   }
@@ -92,6 +99,7 @@ const CheckboxesComponent = forwardRef<HTMLDivElement, CheckboxesProps>((props,
           getBoxId: (reference) => getBoxId(id, reference),
           leaseReference,
           unleaseReference,
+          handleChange,
         };
         return (
           <div
diff --git a/src/components/form-elements/checkboxes/CheckboxesContext.ts b/src/components/form-elements/checkboxes/CheckboxesContext.ts
index 06ce7037..bcc6c44a 100644
--- a/src/components/form-elements/checkboxes/CheckboxesContext.ts
+++ b/src/components/form-elements/checkboxes/CheckboxesContext.ts
@@ -1,12 +1,13 @@
 'use client';
 
-import { createContext } from 'react';
+import { type ChangeEvent, createContext } from 'react';
 
 export interface ICheckboxesContext {
   name: string;
   getBoxId: (reference: string) => string | undefined;
   leaseReference: () => string;
   unleaseReference: (reference: string) => void;
+  handleChange: (event: ChangeEvent<HTMLInputElement>) => void;
 }
 
 export const CheckboxesContext = createContext<ICheckboxesContext>({
@@ -14,4 +15,5 @@ export const CheckboxesContext = createContext<ICheckboxesContext>({
   getBoxId: () => undefined,
   leaseReference: () => '',
   unleaseReference: () => {},
+  handleChange: () => {},
 });
diff --git a/src/components/form-elements/checkboxes/components/CheckboxesItem.tsx b/src/components/form-elements/checkboxes/components/CheckboxesItem.tsx
index 65a08ef4..9645d4a0 100644
--- a/src/components/form-elements/checkboxes/components/CheckboxesItem.tsx
+++ b/src/components/form-elements/checkboxes/components/CheckboxesItem.tsx
@@ -2,6 +2,7 @@
 
 import classNames from 'classnames';
 import {
+  type ChangeEvent,
   type ComponentPropsWithRef,
   type ComponentPropsWithoutRef,
   type ReactNode,
@@ -44,11 +45,17 @@ export const CheckboxesItem = forwardRef<HTMLInputElement, CheckboxesItemProps>(
       defaultChecked,
       exclusive,
       exclusiveGroup,
+      onChange,
       ...rest
     } = props;
 
-    const { getBoxId, name, leaseReference, unleaseReference } =
-      useContext<ICheckboxesContext>(CheckboxesContext);
+    const {
+      name,
+      getBoxId,
+      leaseReference,
+      unleaseReference,
+      handleChange: ctxHandleChange,
+    } = useContext<ICheckboxesContext>(CheckboxesContext);
 
     const [checkboxReference] = useState<string>(leaseReference());
     const inputID = id || getBoxId(checkboxReference);
@@ -67,6 +74,14 @@ export const CheckboxesItem = forwardRef<HTMLInputElement, CheckboxesItemProps>(
 
     const inputProps: ComponentPropsWithDataAttributes<'input'> = rest;
 
+    const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+      if (onChange) {
+        onChange(e);
+      }
+
+      ctxHandleChange(e);
+    };
+
     return (
       <>
         <div className="nhsuk-checkboxes__item">
@@ -81,6 +96,7 @@ export const CheckboxesItem = forwardRef<HTMLInputElement, CheckboxesItemProps>(
             data-checkbox-exclusive-group={exclusiveGroup}
             data-aria-controls={conditional ? `${inputID}--conditional` : undefined}
             aria-describedby={hint ? `${inputID}--hint` : undefined}
+            onChange={handleChange}
             ref={forwardedRef}
             {...inputProps}
           />
diff --git a/src/components/form-elements/radios/Radios.tsx b/src/components/form-elements/radios/Radios.tsx
index d0854494..5d177113 100644
--- a/src/components/form-elements/radios/Radios.tsx
+++ b/src/components/form-elements/radios/Radios.tsx
@@ -3,6 +3,7 @@
 import classNames from 'classnames';
 import { type Radios as RadiosModule } from 'nhsuk-frontend';
 import {
+  type ChangeEvent,
   type ComponentPropsWithoutRef,
   forwardRef,
   useEffect,
@@ -27,7 +28,7 @@ export interface RadiosElementProps extends ComponentPropsWithoutRef<'div'> {
 export type RadiosProps = RadiosElementProps & Omit<FormElementProps, 'label' | 'labelProps'>;
 
 const RadiosComponent = forwardRef<HTMLDivElement, RadiosProps>((props, forwardedRef) => {
-  const { children, idPrefix = props.name, ...rest } = props;
+  const { children, idPrefix = props.name, onChange, ...rest } = props;
 
   const moduleRef = useRef<HTMLDivElement>(null);
   const importRef = useRef<Promise<RadiosModule | void>>(null);
@@ -80,6 +81,12 @@ const RadiosComponent = forwardRef<HTMLDivElement, RadiosProps>((props, forwarde
     _radioIds = {};
   };
 
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    if (onChange) {
+      onChange(e);
+    }
+  };
+
   if (instanceError) {
     throw instanceError;
   }
@@ -93,6 +100,7 @@ const RadiosComponent = forwardRef<HTMLDivElement, RadiosProps>((props, forwarde
           getRadioId: (reference) => getRadioId(id, reference),
           leaseReference: leaseReference,
           unleaseReference: unleaseReference,
+          handleChange,
         };
 
         return (
diff --git a/src/components/form-elements/radios/RadiosContext.ts b/src/components/form-elements/radios/RadiosContext.ts
index dc8789fc..8b5b4de0 100644
--- a/src/components/form-elements/radios/RadiosContext.ts
+++ b/src/components/form-elements/radios/RadiosContext.ts
@@ -1,12 +1,13 @@
 'use client';
 
-import { createContext } from 'react';
+import { type ChangeEvent, createContext } from 'react';
 
 export interface IRadiosContext {
   name: string;
   getRadioId: (reference: string) => string;
   leaseReference: () => string;
   unleaseReference: (reference: string) => void;
+  handleChange: (event: ChangeEvent<HTMLInputElement>) => void;
 }
 
 export const RadiosContext = createContext<IRadiosContext>({
@@ -14,4 +15,5 @@ export const RadiosContext = createContext<IRadiosContext>({
   getRadioId: () => '',
   leaseReference: () => '',
   unleaseReference: () => {},
+  handleChange: () => {},
 });
diff --git a/src/components/form-elements/radios/components/RadiosItem.tsx b/src/components/form-elements/radios/components/RadiosItem.tsx
index ade3a7f0..4d8584c7 100644
--- a/src/components/form-elements/radios/components/RadiosItem.tsx
+++ b/src/components/form-elements/radios/components/RadiosItem.tsx
@@ -2,6 +2,7 @@
 
 import classNames from 'classnames';
 import {
+  type ChangeEvent,
   type ComponentPropsWithRef,
   type ComponentPropsWithoutRef,
   type ReactNode,
@@ -43,8 +44,13 @@ export const RadiosItem = forwardRef<HTMLInputElement, RadiosItemProps>((props,
     ...rest
   } = props;
 
-  const { name, getRadioId, leaseReference, unleaseReference } =
-    useContext<IRadiosContext>(RadiosContext);
+  const {
+    name,
+    getRadioId,
+    leaseReference,
+    unleaseReference,
+    handleChange: ctxHandleChange,
+  } = useContext<IRadiosContext>(RadiosContext);
 
   const [radioReference] = useState<string>(leaseReference());
   const inputID = id || getRadioId(radioReference);
@@ -63,13 +69,18 @@ export const RadiosItem = forwardRef<HTMLInputElement, RadiosItemProps>((props,
 
   const inputProps: ComponentPropsWithDataAttributes<'input'> = rest;
 
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    if (onChange) {
+      onChange(e);
+    }
+
+    ctxHandleChange(e);
+  };
+
   return (
     <>
       <div className="nhsuk-radios__item">
         <input
-          onChange={(e) => {
-            if (onChange) onChange(e);
-          }}
           className={classNames('nhsuk-radios__input', className)}
           id={inputID}
           name={name}
@@ -78,6 +89,7 @@ export const RadiosItem = forwardRef<HTMLInputElement, RadiosItemProps>((props,
           defaultChecked={defaultChecked ?? (checked === undefined ? isChecked : undefined)}
           data-aria-controls={conditional ? `${inputID}--conditional` : undefined}
           aria-describedby={hint ? `${inputID}--hint` : undefined}
+          onChange={handleChange}
           ref={forwardedRef}
           {...inputProps}
         />

From 70672a15755cdd987322dbdc8db3774fc8168692 Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Thu, 14 May 2026 22:33:30 +0100
Subject: [PATCH 12/15] Add radios stories to show controlled `checked` change
 via state

---
 stories/Form Elements/Radios.stories.tsx | 133 ++++++++++++++++++++++-
 1 file changed, 132 insertions(+), 1 deletion(-)

diff --git a/stories/Form Elements/Radios.stories.tsx b/stories/Form Elements/Radios.stories.tsx
index dab7611c..97f8d0ff 100644
--- a/stories/Form Elements/Radios.stories.tsx	
+++ b/stories/Form Elements/Radios.stories.tsx	
@@ -1,5 +1,5 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import { type ChangeEvent, useState } from 'react';
+import { type ChangeEvent, Fragment, useState } from 'react';
 
 import { SummaryList } from '#components/content-presentation/summary-list/index.js';
 import { Radios } from '#components/form-elements/radios/index.js';
@@ -279,6 +279,47 @@ export const WithValues: Story = {
   ),
 };
 
+export const WithValueStateControlled: Story = {
+  name: 'Radios with pre-checked value state, controlled',
+  parameters: {
+    chromatic: {
+      disableSnapshot: true,
+    },
+  },
+  render: function WithValueStateControlledRender(args) {
+    const [value, setValue] = useState<string | undefined>('email');
+
+    const handleChange = ({ target }: ChangeEvent<HTMLInputElement>) => {
+      setValue(target.value);
+    };
+
+    return (
+      <>
+        <Radios {...args}>
+          <Radios.Item value="email" checked={value === 'email'} onChange={handleChange}>
+            Email
+          </Radios.Item>
+          <Radios.Item value="phone" checked={value === 'phone'} onChange={handleChange}>
+            Phone
+          </Radios.Item>
+          <Radios.Item value="text" checked={value === 'text'} onChange={handleChange}>
+            Text message
+          </Radios.Item>
+        </Radios>
+
+        <SummaryList>
+          <SummaryList.Row>
+            <SummaryList.Key>Value</SummaryList.Key>
+            <SummaryList.Value>
+              <samp>{value ?? 'None'}</samp>
+            </SummaryList.Value>
+          </SummaryList.Row>
+        </SummaryList>
+      </>
+    );
+  },
+};
+
 export const WithConditionalContent: Story = {
   name: 'Radios with conditional content',
   args: {
@@ -324,6 +365,96 @@ export const WithConditionalContentValues: Story = {
   ),
 };
 
+export const WithConditionalContentValuesStateControlled: Story = {
+  name: 'Radios with conditional content and pre-checked value state, controlled',
+  parameters: {
+    chromatic: {
+      disableSnapshot: true,
+    },
+  },
+  render: function WithConditionalContentValuesStateControlledRender(args) {
+    const [value, setValue] = useState<string | undefined>('email');
+    const [inputs, setInputs] = useState<Map<string, string>>(
+      new Map([['contact-by-email', 'karen.francis@example.com']]),
+    );
+
+    const handleChange = ({ target }: ChangeEvent<HTMLInputElement>) => {
+      setValue(target.value);
+    };
+
+    const handleInput = ({ target }: ChangeEvent<HTMLInputElement>) => {
+      const updated = new Map(inputs);
+
+      updated.set(target.name, target.value);
+      setInputs(updated);
+    };
+
+    return (
+      <>
+        <Radios {...args}>
+          <Radios.Item
+            value="email"
+            conditional={
+              <ExampleEmail value={inputs?.get('contact-by-email')} onChange={handleInput} />
+            }
+            checked={value === 'email'}
+            onChange={handleChange}
+          >
+            Email
+          </Radios.Item>
+          <Radios.Item
+            value="phone"
+            conditional={
+              <ExamplePhoneNumber value={inputs?.get('contact-by-phone')} onChange={handleInput} />
+            }
+            checked={value === 'phone'}
+            onChange={handleChange}
+          >
+            Phone
+          </Radios.Item>
+          <Radios.Item
+            value="text"
+            conditional={
+              <ExampleMobilePhoneNumber
+                value={inputs?.get('contact-by-text')}
+                onChange={handleInput}
+              />
+            }
+            checked={value === 'text'}
+            onChange={handleChange}
+          >
+            Text message
+          </Radios.Item>
+        </Radios>
+
+        <SummaryList>
+          <SummaryList.Row>
+            <SummaryList.Key>Value</SummaryList.Key>
+            <SummaryList.Value>
+              <samp>{value ?? 'None'}</samp>
+            </SummaryList.Value>
+          </SummaryList.Row>
+          <SummaryList.Row>
+            <SummaryList.Key>Inputs</SummaryList.Key>
+            <SummaryList.Value>
+              {inputs.size ? (
+                [...inputs.entries()].map(([key, value]) => (
+                  <Fragment key={key}>
+                    <samp>{value}</samp>
+                    <br />
+                  </Fragment>
+                ))
+              ) : (
+                <samp>None</samp>
+              )}
+            </SummaryList.Value>
+          </SummaryList.Row>
+        </SummaryList>
+      </>
+    );
+  },
+};
+
 export const WithConditionalContentError: Story = {
   name: 'Radios with conditional content, error message',
   args: {

From 56d5a8d56e8ecf1ffd00cc013abbb47f3262ede6 Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Thu, 14 May 2026 22:36:03 +0100
Subject: [PATCH 13/15] Add checkboxes stories to show controlled `checked`
 change via state

---
 stories/Form Elements/Checkboxes.stories.tsx | 155 ++++++++++++++++++-
 1 file changed, 154 insertions(+), 1 deletion(-)

diff --git a/stories/Form Elements/Checkboxes.stories.tsx b/stories/Form Elements/Checkboxes.stories.tsx
index 2c2059d7..bd4f438d 100644
--- a/stories/Form Elements/Checkboxes.stories.tsx	
+++ b/stories/Form Elements/Checkboxes.stories.tsx	
@@ -1,5 +1,5 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import { type ChangeEvent, useState } from 'react';
+import { type ChangeEvent, Fragment, useState } from 'react';
 
 import { SummaryList } from '#components/content-presentation/summary-list/index.js';
 import { Checkboxes } from '#components/form-elements/checkboxes/index.js';
@@ -229,6 +229,55 @@ export const WithValues: Story = {
   ),
 };
 
+export const WithValueStateControlled: Story = {
+  name: 'Checkboxes with pre-checked values state, controlled',
+  parameters: {
+    chromatic: {
+      disableSnapshot: true,
+    },
+  },
+  render: function WithValueStateControlledRender(args) {
+    const [values, setValues] = useState<Set<string>>(new Set(['email', 'text']));
+
+    const handleChange = ({ target }: ChangeEvent<HTMLInputElement>) => {
+      const updated = new Set(values);
+
+      if (target.checked) {
+        updated.add(target.value);
+      } else {
+        updated.delete(target.value);
+      }
+
+      setValues(updated);
+    };
+
+    return (
+      <>
+        <Checkboxes {...args}>
+          <Checkboxes.Item value="email" checked={values?.has('email')} onChange={handleChange}>
+            Email
+          </Checkboxes.Item>
+          <Checkboxes.Item value="phone" checked={values?.has('phone')} onChange={handleChange}>
+            Phone
+          </Checkboxes.Item>
+          <Checkboxes.Item value="text" checked={values?.has('text')} onChange={handleChange}>
+            Text message
+          </Checkboxes.Item>
+        </Checkboxes>
+
+        <SummaryList>
+          <SummaryList.Row>
+            <SummaryList.Key>Values</SummaryList.Key>
+            <SummaryList.Value>
+              <samp>{values.size ? [...values].join(', ') : 'None'}</samp>
+            </SummaryList.Value>
+          </SummaryList.Row>
+        </SummaryList>
+      </>
+    );
+  },
+};
+
 export const WithConditionalContent: Story = {
   name: 'Checkboxes with conditional content',
   args: {
@@ -278,6 +327,110 @@ export const WithConditionalContentValues: Story = {
   ),
 };
 
+export const WithConditionalContentValuesStateControlled: Story = {
+  name: 'Checkboxes with conditional content and pre-checked values state, controlled',
+  args: {
+    name: 'with-conditional-content-values-state-controlled',
+  },
+  parameters: {
+    chromatic: {
+      disableSnapshot: true,
+    },
+  },
+  render: function WithConditionalContentValuesStateControlledRender(args) {
+    const [values, setValues] = useState<Set<string>>(new Set(['email', 'text']));
+    const [inputs, setInputs] = useState<Map<string, string>>(
+      new Map([
+        ['contact-by-email', 'karen.francis@example.com'],
+        ['contact-by-text', '07700 900362'],
+      ]),
+    );
+
+    const handleChange = ({ target }: ChangeEvent<HTMLInputElement>) => {
+      const updated = new Set(values);
+
+      if (target.checked) {
+        updated.add(target.value);
+      } else {
+        updated.delete(target.value);
+      }
+
+      setValues(updated);
+    };
+
+    const handleInput = ({ target }: ChangeEvent<HTMLInputElement>) => {
+      const updated = new Map(inputs);
+
+      updated.set(target.name, target.value);
+      setInputs(updated);
+    };
+
+    return (
+      <>
+        <Checkboxes {...args}>
+          <Checkboxes.Item
+            value="email"
+            conditional={
+              <ExampleEmail value={inputs?.get('contact-by-email')} onChange={handleInput} />
+            }
+            checked={values?.has('email')}
+            onChange={handleChange}
+          >
+            Email
+          </Checkboxes.Item>
+          <Checkboxes.Item
+            value="phone"
+            conditional={
+              <ExamplePhoneNumber value={inputs?.get('contact-by-phone')} onChange={handleInput} />
+            }
+            checked={values?.has('phone')}
+            onChange={handleChange}
+          >
+            Phone
+          </Checkboxes.Item>
+          <Checkboxes.Item
+            value="text"
+            conditional={
+              <ExampleMobilePhoneNumber
+                value={inputs?.get('contact-by-text')}
+                onChange={handleInput}
+              />
+            }
+            checked={values?.has('text')}
+            onChange={handleChange}
+          >
+            Text message
+          </Checkboxes.Item>
+        </Checkboxes>
+
+        <SummaryList>
+          <SummaryList.Row>
+            <SummaryList.Key>Values</SummaryList.Key>
+            <SummaryList.Value>
+              <samp>{values.size ? [...values].join(', ') : 'None'}</samp>
+            </SummaryList.Value>
+          </SummaryList.Row>
+          <SummaryList.Row>
+            <SummaryList.Key>Inputs</SummaryList.Key>
+            <SummaryList.Value>
+              {inputs.size ? (
+                [...inputs.entries()].map(([key, value]) => (
+                  <Fragment key={key}>
+                    <samp>{value}</samp>
+                    <br />
+                  </Fragment>
+                ))
+              ) : (
+                <samp>None</samp>
+              )}
+            </SummaryList.Value>
+          </SummaryList.Row>
+        </SummaryList>
+      </>
+    );
+  },
+};
+
 export const WithConditionalContentError: Story = {
   name: 'Checkboxes with conditional content, error message',
   args: {

From a4cef5ec6db0444780836b637c5feb79efe695f6 Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Thu, 14 May 2026 00:33:32 +0100
Subject: [PATCH 14/15] Update tests for conditional content

---
 .../checkboxes/__tests__/Checkboxes.test.tsx  | 36 +++++++++++++++++++
 .../radios/__tests__/Radios.test.tsx          | 26 ++++----------
 2 files changed, 42 insertions(+), 20 deletions(-)

diff --git a/src/components/form-elements/checkboxes/__tests__/Checkboxes.test.tsx b/src/components/form-elements/checkboxes/__tests__/Checkboxes.test.tsx
index da496ffe..be35739f 100644
--- a/src/components/form-elements/checkboxes/__tests__/Checkboxes.test.tsx
+++ b/src/components/form-elements/checkboxes/__tests__/Checkboxes.test.tsx
@@ -194,6 +194,42 @@ describe('Checkboxes', () => {
     expect(fieldRef.current).toHaveClass('nhsuk-checkboxes__input');
   });
 
+  it('does not render the conditional content if not checked', async () => {
+    const { container } = await renderClient(
+      <Checkboxes id="example" name="example">
+        <Checkboxes.Item value="email" conditional={<p className="conditional-test">Test</p>}>
+          Email
+        </Checkboxes.Item>
+        <Checkboxes.Item value="phone">Phone</Checkboxes.Item>
+        <Checkboxes.Item value="text">Text message</Checkboxes.Item>
+      </Checkboxes>,
+      { moduleName: 'nhsuk-checkboxes' },
+    );
+
+    const conditionalElement = container.querySelector('.conditional-test');
+    expect(conditionalElement?.parentElement).toHaveClass('nhsuk-checkboxes__conditional--hidden');
+  });
+
+  it('renders the conditional content if checked', async () => {
+    const { container } = await renderClient(
+      <Checkboxes id="example" name="example">
+        <Checkboxes.Item
+          value="email"
+          conditional={<p className="conditional-test">Test</p>}
+          checked
+        >
+          Email
+        </Checkboxes.Item>
+        <Checkboxes.Item value="phone">Phone</Checkboxes.Item>
+        <Checkboxes.Item value="text">Text message</Checkboxes.Item>
+      </Checkboxes>,
+      { moduleName: 'nhsuk-checkboxes' },
+    );
+
+    const conditionalElement = container.querySelector('.conditional-test');
+    expect(conditionalElement).toHaveTextContent('Test');
+  });
+
   it('sets attribute `data-checkbox-exclusive` when items are exclusive', async () => {
     const { container } = await renderClient(
       <Checkboxes id="example" name="example">
diff --git a/src/components/form-elements/radios/__tests__/Radios.test.tsx b/src/components/form-elements/radios/__tests__/Radios.test.tsx
index 21e2e5f1..5aeb83a0 100644
--- a/src/components/form-elements/radios/__tests__/Radios.test.tsx
+++ b/src/components/form-elements/radios/__tests__/Radios.test.tsx
@@ -121,20 +121,13 @@ describe('Radios', () => {
     expect(fieldRef.current).toHaveClass('nhsuk-radios__input');
   });
 
-  it('does not render the conditional content if checked is false', async () => {
+  it('does not render the conditional content if not checked', async () => {
     const { container } = await renderClient(
       <Radios id="example" name="example">
-        <Radios.Item
-          id="example-1"
-          value="yes"
-          checked={false}
-          conditional={<p className="conditional-test">Test</p>}
-        >
+        <Radios.Item value="yes" conditional={<p className="conditional-test">Test</p>}>
           Yes
         </Radios.Item>
-        <Radios.Item id="example-2" value="no">
-          No
-        </Radios.Item>
+        <Radios.Item value="no">No</Radios.Item>
       </Radios>,
       { moduleName: 'nhsuk-radios' },
     );
@@ -143,20 +136,13 @@ describe('Radios', () => {
     expect(conditionalElement?.parentElement).toHaveClass('nhsuk-radios__conditional--hidden');
   });
 
-  it('renders the conditional content if the radio reference = selected radio', async () => {
+  it('renders the conditional content if checked', async () => {
     const { container } = await renderClient(
       <Radios id="example" name="example">
-        <Radios.Item
-          id="example-1"
-          value="yes"
-          checked={true}
-          conditional={<p className="conditional-test">Test</p>}
-        >
+        <Radios.Item value="yes" conditional={<p className="conditional-test">Test</p>} checked>
           Yes
         </Radios.Item>
-        <Radios.Item id="example-2" value="no">
-          No
-        </Radios.Item>
+        <Radios.Item value="no">No</Radios.Item>
       </Radios>,
       { moduleName: 'nhsuk-radios' },
     );

From b5a4c31426ace6352b48ef1d369d49a78416aed5 Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Fri, 15 May 2026 13:42:47 +0100
Subject: [PATCH 15/15] Add changelog entry

---
 CHANGELOG.md | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 949666db..30371cd7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,15 @@
 # NHS.UK React components
 
+## Unreleased
+
+This is a bug fix release.
+
+Note: Form components with missing `id` (or `idPrefix`) now fall back to the `name` prop before generating IDs. This helps prevent [hydration mismatch](https://react.dev/link/hydration-mismatch) errors with server-side rendered (SSR) HTML.
+
+### :wrench: **Fixes**
+
+- [#377: Fix radios component with `defaultChecked` inputs and conditional content](https://github.com/NHSDigital/nhsuk-react-components/pull/377)
+
 ## 6.0.0 - 10 March 2026
 
 This version provides support for NHS.UK frontend v10.3.0