From f9aa1a57a21bd78c35d9cd92d53b1225b4cde735 Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Tue, 16 Dec 2025 08:53:58 +0000
Subject: [PATCH 01/19] Update to NHS.UK frontend v10.2.2

---
 package.json |  4 ++--
 yarn.lock    | 12 ++++++------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 5375d9e0..5f632a13 100644
--- a/package.json
+++ b/package.json
@@ -99,7 +99,7 @@
     "jest-axe": "^10.0.0",
     "jest-environment-jsdom": "^30.2.0",
     "lodash": "^4.17.21",
-    "nhsuk-frontend": "^10.1.0",
+    "nhsuk-frontend": "^10.2.2",
     "outdent": "^0.8.0",
     "prettier": "^3.7.4",
     "react": "^19.2.3",
@@ -116,7 +116,7 @@
   },
   "peerDependencies": {
     "classnames": ">=2.5.0",
-    "nhsuk-frontend": ">=10.1.0 <11.0.0",
+    "nhsuk-frontend": ">=10.2.0 <11.0.0",
     "react": ">=18.2.0",
     "react-dom": ">=18.2.0",
     "tslib": ">=2.8.0"
diff --git a/yarn.lock b/yarn.lock
index 12a08f38..f5743871 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9008,10 +9008,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nhsuk-frontend@npm:^10.1.0":
-  version: 10.1.0
-  resolution: "nhsuk-frontend@npm:10.1.0"
-  checksum: 10c0/adf8ccc240c3514b865ae361b4e29f7ad11051f5c4585970cbd2580f61dbe5f1818d53f3b8eef3825aaf72f9ea3df647f4b0cc57d60092a3edc7583665374f91
+"nhsuk-frontend@npm:^10.2.2":
+  version: 10.2.2
+  resolution: "nhsuk-frontend@npm:10.2.2"
+  checksum: 10c0/19811214e56188204924a828780771a994ed9ed496c21fa90d49b46a58c1c500903a3b346229ab3df4ba8c67262f17b8fa05ec2c4c25582a4e5e84ec678ba059
   languageName: node
   linkType: hard
 
@@ -9058,7 +9058,7 @@ __metadata:
     jest-axe: "npm:^10.0.0"
     jest-environment-jsdom: "npm:^30.2.0"
     lodash: "npm:^4.17.21"
-    nhsuk-frontend: "npm:^10.1.0"
+    nhsuk-frontend: "npm:^10.2.2"
     outdent: "npm:^0.8.0"
     prettier: "npm:^3.7.4"
     react: "npm:^19.2.3"
@@ -9074,7 +9074,7 @@ __metadata:
     vite-tsconfig-paths: "npm:^6.0.3"
   peerDependencies:
     classnames: ">=2.5.0"
-    nhsuk-frontend: ">=10.1.0 <11.0.0"
+    nhsuk-frontend: ">=10.2.0 <11.0.0"
     react: ">=18.2.0"
     react-dom: ">=18.2.0"
     tslib: ">=2.8.0"

From 9ed8c60b5e20eee76803d7e72ae8628945e7b99d Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Tue, 16 Dec 2025 08:54:08 +0000
Subject: [PATCH 02/19] Update text input examples

---
 stories/Form Elements/TextInput.stories.tsx | 72 +++++++++++++++++++--
 1 file changed, 65 insertions(+), 7 deletions(-)

diff --git a/stories/Form Elements/TextInput.stories.tsx b/stories/Form Elements/TextInput.stories.tsx
index bfb6efff..00659ac7 100644
--- a/stories/Form Elements/TextInput.stories.tsx	
+++ b/stories/Form Elements/TextInput.stories.tsx	
@@ -7,8 +7,8 @@ const meta: Meta<typeof TextInput> = {
   component: TextInput,
   args: {
     id: 'input-example',
-    name: 'test-name',
-    label: 'National Insurance number',
+    name: 'example',
+    label: 'What is your full name?',
     labelProps: { isPageHeading: true, size: 'l' },
   },
   argTypes: {
@@ -22,30 +22,88 @@ type Story = StoryObj<typeof TextInput>;
 export const Standard: Story = {};
 export const WithHintText: Story = {
   args: {
-    hint: 'It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.',
+    label: 'What is your NHS number?',
+    inputMode: 'numeric',
+    spellCheck: false,
+    hint: (
+      <>
+        This is a 10 digit number (like <span className="nhsuk-u-nowrap">999 123 4567</span>) that
+        you can find on an NHS letter, prescription or in the NHS App
+      </>
+    ),
   },
 };
 
 export const WithError: Story = {
   args: {
-    error: 'Error message goes here',
-    hint: 'It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.',
+    label: 'What is your NHS number?',
+    error: 'Enter NHS number',
+    inputMode: 'numeric',
+    spellCheck: false,
+  },
+};
+
+export const WithErrorAndHintText: Story = {
+  args: {
+    label: 'What is your NHS number?',
+    error: 'Enter NHS number',
+    inputMode: 'numeric',
+    spellCheck: false,
+    hint: (
+      <>
+        This is a 10 digit number (like <span className="nhsuk-u-nowrap">999 123 4567</span>) that
+        you can find on an NHS letter, prescription or in the NHS App
+      </>
+    ),
   },
-  name: 'With Error (String)',
 };
 
 export const WithWidthModifier: Story = {
   args: {
+    label: 'What is your NHS number?',
     width: 10,
-    hint: 'It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.',
+    inputMode: 'numeric',
+    spellCheck: false,
+    hint: (
+      <>
+        This is a 10 digit number (like <span className="nhsuk-u-nowrap">999 123 4567</span>) that
+        you can find on an NHS letter, prescription or in the NHS App
+      </>
+    ),
+  },
+};
+
+export const WithPrefix: Story = {
+  args: {
+    label: 'Cost in pounds',
+    prefix: '£',
+    width: 5,
+  },
+};
+
+export const WithSuffix: Story = {
+  args: {
+    label: 'Weight in kilograms',
+    suffix: 'kg',
+    width: 5,
   },
 };
 
 export const WithPrefixAndSuffix: Story = {
   args: {
+    label: 'Cost per item, in pounds',
+    prefix: '£',
+    suffix: 'per item',
     width: 5,
+  },
+};
+
+export const WithPrefixAndSuffixAndError: Story = {
+  args: {
     label: 'Cost per item, in pounds',
+    error: 'Enter a cost per item, in pounds',
     prefix: '£',
     suffix: 'per item',
+    width: 5,
   },
 };

From a19df04010e76b24482e81b660613faf0d88c7be Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Tue, 16 Dec 2025 08:54:16 +0000
Subject: [PATCH 03/19] Add text input `code` support (for codes and sequences)

---
 src/components/form-elements/text-input/TextInput.tsx | 4 +++-
 stories/Form Elements/TextInput.stories.tsx           | 4 ++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/form-elements/text-input/TextInput.tsx b/src/components/form-elements/text-input/TextInput.tsx
index 64dcebc2..96585e67 100644
--- a/src/components/form-elements/text-input/TextInput.tsx
+++ b/src/components/form-elements/text-input/TextInput.tsx
@@ -12,6 +12,7 @@ export interface TextInputProps
     ComponentPropsWithoutRef<'input'>,
     Omit<FormElementProps, 'fieldsetProps' | 'legend' | 'legendProps'> {
   width?: InputWidth;
+  code?: boolean;
   prefix?: string;
   suffix?: string;
 }
@@ -30,12 +31,13 @@ const TextInputSuffix: FC<Pick<TextInputProps, 'suffix'>> = ({ suffix }) => (
 
 export const TextInput = forwardRef<HTMLInputElement, TextInputProps>((props, forwardedRef) => (
   <FormGroup<TextInputProps> {...props} inputType="input">
-    {({ width, className, error, type = 'text', prefix, suffix, ...rest }) => {
+    {({ width, className, code, error, type = 'text', prefix, suffix, ...rest }) => {
       const Input = (
         <input
           className={classNames(
             'nhsuk-input',
             { [`nhsuk-input--width-${width}`]: width },
+            { 'nhsuk-input--code': code },
             { 'nhsuk-input--error': error },
             className,
           )}
diff --git a/stories/Form Elements/TextInput.stories.tsx b/stories/Form Elements/TextInput.stories.tsx
index 00659ac7..25cfb4ff 100644
--- a/stories/Form Elements/TextInput.stories.tsx	
+++ b/stories/Form Elements/TextInput.stories.tsx	
@@ -23,6 +23,7 @@ export const Standard: Story = {};
 export const WithHintText: Story = {
   args: {
     label: 'What is your NHS number?',
+    code: true,
     inputMode: 'numeric',
     spellCheck: false,
     hint: (
@@ -38,6 +39,7 @@ export const WithError: Story = {
   args: {
     label: 'What is your NHS number?',
     error: 'Enter NHS number',
+    code: true,
     inputMode: 'numeric',
     spellCheck: false,
   },
@@ -47,6 +49,7 @@ export const WithErrorAndHintText: Story = {
   args: {
     label: 'What is your NHS number?',
     error: 'Enter NHS number',
+    code: true,
     inputMode: 'numeric',
     spellCheck: false,
     hint: (
@@ -62,6 +65,7 @@ export const WithWidthModifier: Story = {
   args: {
     label: 'What is your NHS number?',
     width: 10,
+    code: true,
     inputMode: 'numeric',
     spellCheck: false,
     hint: (

From 13de3658421ffa7366217636c2562be40d1fa9b9 Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Tue, 16 Dec 2025 08:54:29 +0000
Subject: [PATCH 04/19] Update select examples

---
 stories/Form Elements/Select.stories.tsx | 75 ++++++++----------------
 1 file changed, 25 insertions(+), 50 deletions(-)

diff --git a/stories/Form Elements/Select.stories.tsx b/stories/Form Elements/Select.stories.tsx
index ddc0e998..ed3df5b5 100644
--- a/stories/Form Elements/Select.stories.tsx	
+++ b/stories/Form Elements/Select.stories.tsx	
@@ -1,83 +1,58 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import { useState } from 'react';
 
 import { Select } from '#components/form-elements/select/index.js';
-import { TextInput } from '#components/form-elements/text-input/index.js';
 
 const meta: Meta<typeof Select> = {
   title: 'Form Elements/Select',
   component: Select,
   args: {
-    label: 'Label text goes here',
-    labelProps: { isPageHeading: true, size: 'l' },
+    label: 'Sort by',
+    labelProps: { isPageHeading: true },
   },
+  render: (args) => (
+    <Select {...args}>
+      <Select.Option>Choose location</Select.Option>
+      <Select.Option value="eastmidlands">East Midlands</Select.Option>
+      <Select.Option value="eastofengland">East of England</Select.Option>
+      <Select.Option value="london">London</Select.Option>
+      <Select.Option value="northeast">North East</Select.Option>
+      <Select.Option value="northwest">North West</Select.Option>
+      <Select.Option value="southeast">South East</Select.Option>
+      <Select.Option value="southwest">South West</Select.Option>
+      <Select.Option value="westmidlands">West Midlands</Select.Option>
+      <Select.Option value="yorkshire">Yorkshire and the Humber</Select.Option>
+    </Select>
+  ),
 };
 export default meta;
 type Story = StoryObj<typeof Select>;
 
 export const Standard: Story = {
-  args: {
-    defaultValue: '2',
-  },
   render: (args) => (
     <Select {...args}>
-      <Select.Option value="1">NHS.UK frontend option 1</Select.Option>
-      <Select.Option value="2">NHS.UK frontend option 2</Select.Option>
-      <Select.Option value="3" disabled>
-        NHS.UK frontend option 3
-      </Select.Option>
+      <Select.Option value="published">Recently published</Select.Option>
+      <Select.Option value="updated">Recently updated</Select.Option>
+      <Select.Option value="views">Most view</Select.Option>
+      <Select.Option value="comments">Most comments</Select.Option>
     </Select>
   ),
 };
 
 export const SelectWithHintText: Story = {
   args: {
-    hint: 'Hint text goes here',
+    hint: 'This can be different to where you went before',
   },
-  render: (args) => (
-    <Select {...args}>
-      <Select.Option value="1">NHS.UK frontend option 1</Select.Option>
-      <Select.Option value="2">NHS.UK frontend option 2</Select.Option>
-      <Select.Option value="3">NHS.UK frontend option 3</Select.Option>
-    </Select>
-  ),
 };
 
 export const SelectWithError: Story = {
-  render: function SelectWithErrorRender(args) {
-    const [error, setError] = useState<string>('Error message goes here');
-    return (
-      <>
-        <Select error={error} {...args}>
-          <Select.Option value="1">NHS.UK frontend option 1</Select.Option>
-          <Select.Option value="2">NHS.UK frontend option 2</Select.Option>
-          <Select.Option value="3">NHS.UK frontend option 3</Select.Option>
-        </Select>
-        <TextInput onChange={(e) => setError(e.currentTarget.value)} value={error} />
-      </>
-    );
+  args: {
+    error: 'Select a location',
   },
-
-  name: 'Select With Error (String)',
 };
 
 export const SelectWithErrorAndHintText: Story = {
   args: {
-    hint: 'Hint text goes here',
-  },
-  render: function SelectWithErrorAndHintTextRender(args) {
-    const [error, setError] = useState<string>('Error message goes here');
-    return (
-      <>
-        <Select error={error} {...args}>
-          <Select.Option value="1">NHS.UK frontend option 1</Select.Option>
-          <Select.Option value="2">NHS.UK frontend option 2</Select.Option>
-          <Select.Option value="3">NHS.UK frontend option 3</Select.Option>
-        </Select>
-        <TextInput onChange={(e) => setError(e.currentTarget.value)} value={error} />
-      </>
-    );
+    hint: 'This can be different to where you went before',
+    error: 'Select a location',
   },
-
-  name: 'Select With Error and Hint (String)',
 };

From fa7eed8d13cb266e6570b7a3df43e506f52a7a6d Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Tue, 16 Dec 2025 08:54:37 +0000
Subject: [PATCH 05/19] Update button examples

---
 stories/Form Elements/Button.stories.tsx | 32 ++++++++++++++++++------
 1 file changed, 25 insertions(+), 7 deletions(-)

diff --git a/stories/Form Elements/Button.stories.tsx b/stories/Form Elements/Button.stories.tsx
index 8c90fd79..784efdd3 100644
--- a/stories/Form Elements/Button.stories.tsx	
+++ b/stories/Form Elements/Button.stories.tsx	
@@ -49,12 +49,31 @@ export default meta;
 type Story = StoryObj<typeof Button>;
 
 export const Primary: Story = {
-  args: { children: 'Primary' },
-  render: (args) => <Button {...args} />,
+  args: {
+    children: 'Save and continue',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    secondary: true,
+    children: 'Find my location',
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    warning: true,
+    children: 'Yes, delete this vaccine',
+  },
+};
+
+export const Reverse: Story = {
+  args: {
+    reverse: true,
+    children: 'Log out',
+  },
 };
-export const Secondary: Story = { args: { secondary: true, children: 'Secondary' } };
-export const Reverse: Story = { args: { reverse: true, children: 'Reverse' } };
-export const Warning: Story = { args: { warning: true, children: 'Warning' } };
 
 /**
  *
@@ -76,8 +95,8 @@ export const PreventDoubleClickButton: Story = {
     onClick: () => console.log(new Date()),
     children: 'Debounced Button',
   },
-  render: (args) => <Button {...args} />,
 };
+
 export const PreventDoubleClickLinkButton: Story = {
   args: {
     preventDoubleClick: true,
@@ -85,5 +104,4 @@ export const PreventDoubleClickLinkButton: Story = {
     onClick: () => console.log(new Date()),
     children: 'Debounced Button as Link',
   },
-  render: (args) => <Button {...args} />,
 };

From d4b4082d70680f2c792e27ec1809a7b22a2e79c1 Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Tue, 16 Dec 2025 08:54:45 +0000
Subject: [PATCH 06/19] Add login button support

---
 src/components/form-elements/button/Button.tsx | 6 ++++++
 stories/Form Elements/Button.stories.tsx       | 7 +++++++
 2 files changed, 13 insertions(+)

diff --git a/src/components/form-elements/button/Button.tsx b/src/components/form-elements/button/Button.tsx
index 0d03b9c5..583a0a90 100644
--- a/src/components/form-elements/button/Button.tsx
+++ b/src/components/form-elements/button/Button.tsx
@@ -19,6 +19,7 @@ export interface ButtonProps extends AsElementLink<HTMLButtonElement> {
   secondary?: boolean;
   reverse?: boolean;
   warning?: boolean;
+  login?: boolean;
   as?: 'button';
   preventDoubleClick?: boolean;
 }
@@ -29,6 +30,7 @@ export interface ButtonLinkProps extends AsElementLink<HTMLAnchorElement> {
   secondary?: boolean;
   reverse?: boolean;
   warning?: boolean;
+  login?: boolean;
   as?: 'a';
   preventDoubleClick?: boolean;
 }
@@ -41,6 +43,7 @@ const ButtonComponent = forwardRef<HTMLButtonElement, ButtonProps>((props, forwa
     secondary,
     reverse,
     warning,
+    login,
     type = 'submit',
     preventDoubleClick,
     onClick,
@@ -75,6 +78,7 @@ const ButtonComponent = forwardRef<HTMLButtonElement, ButtonProps>((props, forwa
         { 'nhsuk-button--secondary': secondary },
         { 'nhsuk-button--reverse': reverse },
         { 'nhsuk-button--warning': warning },
+        { 'nhsuk-button--login': login },
         className,
       )}
       data-module="nhsuk-button"
@@ -104,6 +108,7 @@ const ButtonLinkComponent = forwardRef<HTMLAnchorElement, ButtonLinkProps>(
       secondary,
       reverse,
       warning,
+      login,
       preventDoubleClick,
       onClick,
       ...rest
@@ -137,6 +142,7 @@ const ButtonLinkComponent = forwardRef<HTMLAnchorElement, ButtonLinkProps>(
           { 'nhsuk-button--secondary': secondary },
           { 'nhsuk-button--reverse': reverse },
           { 'nhsuk-button--warning': warning },
+          { 'nhsuk-button--login': login },
           className,
         )}
         data-module="nhsuk-button"
diff --git a/stories/Form Elements/Button.stories.tsx b/stories/Form Elements/Button.stories.tsx
index 784efdd3..bd794d8b 100644
--- a/stories/Form Elements/Button.stories.tsx	
+++ b/stories/Form Elements/Button.stories.tsx	
@@ -68,6 +68,13 @@ export const Warning: Story = {
   },
 };
 
+export const Login: Story = {
+  args: {
+    login: true,
+    children: 'Continue to NHS login',
+  },
+};
+
 export const Reverse: Story = {
   args: {
     reverse: true,

From 28159d869ca14ddb2153b4fd007e8cc4f2de1e75 Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Tue, 16 Dec 2025 08:54:52 +0000
Subject: [PATCH 07/19] Add small button support

---
 .../form-elements/button/Button.tsx           |  6 +++
 stories/Form Elements/Button.stories.tsx      | 39 +++++++++++++++++++
 2 files changed, 45 insertions(+)

diff --git a/src/components/form-elements/button/Button.tsx b/src/components/form-elements/button/Button.tsx
index 583a0a90..bba85b60 100644
--- a/src/components/form-elements/button/Button.tsx
+++ b/src/components/form-elements/button/Button.tsx
@@ -20,6 +20,7 @@ export interface ButtonProps extends AsElementLink<HTMLButtonElement> {
   reverse?: boolean;
   warning?: boolean;
   login?: boolean;
+  small?: boolean;
   as?: 'button';
   preventDoubleClick?: boolean;
 }
@@ -31,6 +32,7 @@ export interface ButtonLinkProps extends AsElementLink<HTMLAnchorElement> {
   reverse?: boolean;
   warning?: boolean;
   login?: boolean;
+  small?: boolean;
   as?: 'a';
   preventDoubleClick?: boolean;
 }
@@ -44,6 +46,7 @@ const ButtonComponent = forwardRef<HTMLButtonElement, ButtonProps>((props, forwa
     reverse,
     warning,
     login,
+    small,
     type = 'submit',
     preventDoubleClick,
     onClick,
@@ -79,6 +82,7 @@ const ButtonComponent = forwardRef<HTMLButtonElement, ButtonProps>((props, forwa
         { 'nhsuk-button--reverse': reverse },
         { 'nhsuk-button--warning': warning },
         { 'nhsuk-button--login': login },
+        { 'nhsuk-button--small': small },
         className,
       )}
       data-module="nhsuk-button"
@@ -109,6 +113,7 @@ const ButtonLinkComponent = forwardRef<HTMLAnchorElement, ButtonLinkProps>(
       reverse,
       warning,
       login,
+      small,
       preventDoubleClick,
       onClick,
       ...rest
@@ -143,6 +148,7 @@ const ButtonLinkComponent = forwardRef<HTMLAnchorElement, ButtonLinkProps>(
           { 'nhsuk-button--reverse': reverse },
           { 'nhsuk-button--warning': warning },
           { 'nhsuk-button--login': login },
+          { 'nhsuk-button--small': small },
           className,
         )}
         data-module="nhsuk-button"
diff --git a/stories/Form Elements/Button.stories.tsx b/stories/Form Elements/Button.stories.tsx
index bd794d8b..e8c83082 100644
--- a/stories/Form Elements/Button.stories.tsx	
+++ b/stories/Form Elements/Button.stories.tsx	
@@ -54,6 +54,13 @@ export const Primary: Story = {
   },
 };
 
+export const SmallPrimary: Story = {
+  args: {
+    small: true,
+    children: 'Save and continue',
+  },
+};
+
 export const Secondary: Story = {
   args: {
     secondary: true,
@@ -61,6 +68,14 @@ export const Secondary: Story = {
   },
 };
 
+export const SmallSecondary: Story = {
+  args: {
+    secondary: true,
+    small: true,
+    children: 'Find my location',
+  },
+};
+
 export const Warning: Story = {
   args: {
     warning: true,
@@ -68,6 +83,14 @@ export const Warning: Story = {
   },
 };
 
+export const SmallWarning: Story = {
+  args: {
+    warning: true,
+    small: true,
+    children: 'Yes, delete this vaccine',
+  },
+};
+
 export const Login: Story = {
   args: {
     login: true,
@@ -75,6 +98,14 @@ export const Login: Story = {
   },
 };
 
+export const SmallLogin: Story = {
+  args: {
+    login: true,
+    small: true,
+    children: 'Continue to NHS login',
+  },
+};
+
 export const Reverse: Story = {
   args: {
     reverse: true,
@@ -82,6 +113,14 @@ export const Reverse: Story = {
   },
 };
 
+export const SmallReverse: Story = {
+  args: {
+    reverse: true,
+    small: true,
+    children: 'Log out',
+  },
+};
+
 /**
  *
  * Disabled buttons have poor contrast and can confuse some users. Only use them if user research shows it makes things easier for users to understand.

From 5103d5349171fd3414eb52a630de7abbbd1b8879 Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Tue, 16 Dec 2025 08:54:59 +0000
Subject: [PATCH 08/19] Simplify form group `aria-describedby` handling

---
 src/components/utils/FormGroup.tsx | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/utils/FormGroup.tsx b/src/components/utils/FormGroup.tsx
index f33f7e14..18d821c9 100644
--- a/src/components/utils/FormGroup.tsx
+++ b/src/components/utils/FormGroup.tsx
@@ -58,7 +58,6 @@ export const FormGroup = <T extends BaseFormElementRenderProps>(
     children,
     hint,
     label,
-    id,
     legend,
     legendProps,
     fieldsetProps,
@@ -67,11 +66,11 @@ export const FormGroup = <T extends BaseFormElementRenderProps>(
     hintProps,
     errorProps,
     formGroupProps,
-    inputType,
+    id,
     name,
-    'aria-describedby': ariaDescribedBy,
     ...rest
   } = props;
+
   const [generatedID] = useState<string>(generateRandomID(inputType));
   const { registerComponent, passError } = useContext<IFormGroupContext>(FormGroupContext);
   const { disableErrorFromComponents } = useFormContext();
@@ -85,6 +84,7 @@ export const FormGroup = <T extends BaseFormElementRenderProps>(
   const hasError = !disableErrorFromComponents && !!error;
 
   // Build list of IDs for aria-describedby
+  let { 'aria-describedby': ariaDescribedBy } = rest;
   const ariaDescribedByIds = ariaDescribedBy ? [ariaDescribedBy] : [];
 
   // Add optional hint ID
@@ -97,11 +97,14 @@ export const FormGroup = <T extends BaseFormElementRenderProps>(
     ariaDescribedByIds.push(errorID);
   }
 
+  // Update aria-describedby with new IDs
+  ariaDescribedBy = ariaDescribedByIds.join(' ') || undefined;
+
   const childProps = {
-    error,
-    name: name ?? elementID,
-    id: elementID,
     ...rest,
+    'id': elementID,
+    'name': name ?? elementID,
+    'aria-describedby': !hasFieldset ? ariaDescribedBy : undefined,
   } as FormElementRenderProps<T>;
 
   useEffect(() => {
@@ -124,7 +127,7 @@ export const FormGroup = <T extends BaseFormElementRenderProps>(
       )}
     >
       {hasFieldset ? (
-        <Fieldset {...fieldsetProps} aria-describedby={ariaDescribedByIds.join(' ') || undefined}>
+        <Fieldset {...fieldsetProps} aria-describedby={ariaDescribedBy}>
           <Legend {...legendProps}>{legend}</Legend>
           <HintText id={hintID} {...hintProps}>
             {hint}
@@ -145,10 +148,7 @@ export const FormGroup = <T extends BaseFormElementRenderProps>(
           <ErrorMessage id={errorID} {...errorProps}>
             {error}
           </ErrorMessage>
-          {children({
-            ...childProps,
-            'aria-describedby': ariaDescribedByIds.join(' ') || undefined,
-          })}
+          {children(childProps)}
         </>
       )}
     </div>

From 96dee8eb11cee4e286690341790c6ef0f976041a Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Tue, 16 Dec 2025 09:37:50 +0000
Subject: [PATCH 09/19] Add support for form group `beforeInput` and
 `afterInput`

---
 .../character-count/CharacterCount.tsx        |  13 ++-
 .../form-elements/checkboxes/Checkboxes.tsx   |   8 +-
 .../checkboxes/components/CheckboxesItem.tsx  |  11 +-
 .../form-elements/date-input/DateInput.tsx    |  16 ++-
 .../date-input/components/DateInputField.tsx  |   9 +-
 .../form-elements/radios/Radios.tsx           |   8 +-
 .../radios/components/RadiosItem.tsx          |  11 +-
 .../form-elements/select/Select.tsx           |   8 +-
 .../form-elements/text-input/TextInput.tsx    |  44 ++++----
 .../text-input/__tests__/TextInput.test.tsx   |   8 +-
 .../form-elements/textarea/Textarea.tsx       |  11 +-
 src/components/utils/FormGroup.tsx            | 105 +++++++++---------
 .../utils/__tests__/FormGroup.test.tsx        |  44 +++-----
 src/util/types/FormTypes.ts                   |  25 ++++-
 14 files changed, 178 insertions(+), 143 deletions(-)

diff --git a/src/components/form-elements/character-count/CharacterCount.tsx b/src/components/form-elements/character-count/CharacterCount.tsx
index 22e9980c..95f4fcfb 100644
--- a/src/components/form-elements/character-count/CharacterCount.tsx
+++ b/src/components/form-elements/character-count/CharacterCount.tsx
@@ -14,15 +14,18 @@ import {
 import { FormGroup } from '#components/utils/index.js';
 import { type FormElementProps } from '#util/types/FormTypes.js';
 
-export interface CharacterCountProps
-  extends
-    ComponentPropsWithoutRef<'textarea'>,
-    Omit<FormElementProps, 'fieldsetProps' | 'legend' | 'legendProps'> {
+export interface CharacterCountElementProps extends ComponentPropsWithoutRef<'textarea'> {
   maxLength?: number;
   maxWords?: number;
   threshold?: number;
 }
 
+export type CharacterCountProps = CharacterCountElementProps &
+  Omit<
+    FormElementProps<CharacterCountElementProps, 'textarea'>,
+    'fieldsetProps' | 'legend' | 'legendProps'
+  >;
+
 export const CharacterCount = forwardRef<HTMLTextAreaElement, CharacterCountProps>(
   ({ maxLength, maxWords, threshold, formGroupProps, ...rest }, forwardedRef) => {
     const moduleRef = useRef<HTMLDivElement>(null);
@@ -47,7 +50,7 @@ export const CharacterCount = forwardRef<HTMLTextAreaElement, CharacterCountProp
     }
 
     return (
-      <FormGroup<CharacterCountProps>
+      <FormGroup<CharacterCountProps, 'textarea'>
         inputType="textarea"
         formGroupProps={{
           ...formGroupProps,
diff --git a/src/components/form-elements/checkboxes/Checkboxes.tsx b/src/components/form-elements/checkboxes/Checkboxes.tsx
index 5e490269..28e1ab04 100644
--- a/src/components/form-elements/checkboxes/Checkboxes.tsx
+++ b/src/components/form-elements/checkboxes/Checkboxes.tsx
@@ -18,12 +18,14 @@ import { FormGroup } from '#components/utils/index.js';
 import { generateRandomName } from '#util/tools/index.js';
 import { type FormElementProps } from '#util/types/FormTypes.js';
 
-export interface CheckboxesProps
-  extends ComponentPropsWithoutRef<'div'>, Omit<FormElementProps, 'label' | 'labelProps'> {
+export interface CheckboxesElementProps extends ComponentPropsWithoutRef<'div'> {
   idPrefix?: string;
   small?: boolean;
 }
 
+export type CheckboxesProps = CheckboxesElementProps &
+  Omit<FormElementProps<CheckboxesElementProps, 'div'>, 'label' | 'labelProps'>;
+
 const CheckboxesComponent = forwardRef<HTMLDivElement, CheckboxesProps>((props, forwardedRef) => {
   const { children, idPrefix, ...rest } = props;
 
@@ -82,7 +84,7 @@ const CheckboxesComponent = forwardRef<HTMLDivElement, CheckboxesProps>((props,
   }
 
   return (
-    <FormGroup<CheckboxesProps> inputType="checkboxes" {...rest}>
+    <FormGroup<CheckboxesProps, 'div'> inputType="checkboxes" {...rest}>
       {({ className, small, name, id, idPrefix, error, ...restRenderProps }) => {
         resetCheckboxIds();
         const contextValue: ICheckboxesContext = {
diff --git a/src/components/form-elements/checkboxes/components/CheckboxesItem.tsx b/src/components/form-elements/checkboxes/components/CheckboxesItem.tsx
index a2cc66a6..84d401ab 100644
--- a/src/components/form-elements/checkboxes/components/CheckboxesItem.tsx
+++ b/src/components/form-elements/checkboxes/components/CheckboxesItem.tsx
@@ -17,16 +17,19 @@ import { HintText } from '#components/form-elements/hint-text/index.js';
 import { Label } from '#components/form-elements/label/index.js';
 import { type ComponentPropsWithDataAttributes, type FormElementProps } from '#util/types/index.js';
 
-export interface CheckboxesItemProps
-  extends
-    ComponentPropsWithoutRef<'input'>,
-    Pick<FormElementProps, 'hint' | 'hintProps' | 'labelProps'> {
+export interface CheckboxesItemElementProps extends ComponentPropsWithoutRef<'input'> {
   conditional?: ReactNode;
   forceShowConditional?: boolean;
   conditionalProps?: ComponentPropsWithRef<'div'>;
   exclusive?: boolean;
 }
 
+export type CheckboxesItemProps = CheckboxesItemElementProps &
+  Omit<
+    FormElementProps<CheckboxesItemElementProps, 'input'>,
+    'fieldsetProps' | 'label' | 'legend' | 'legendProps'
+  >;
+
 export const CheckboxesItem = forwardRef<HTMLInputElement, CheckboxesItemProps>(
   (props, forwardedRef) => {
     const {
diff --git a/src/components/form-elements/date-input/DateInput.tsx b/src/components/form-elements/date-input/DateInput.tsx
index 0836e23c..b34726ab 100644
--- a/src/components/form-elements/date-input/DateInput.tsx
+++ b/src/components/form-elements/date-input/DateInput.tsx
@@ -36,15 +36,21 @@ export interface DateInputElement extends Omit<HTMLInputElement, 'value' | 'onCh
   onChange?: EventHandler<DateInputChangeEvent>;
 }
 
-export interface DateInputProps
-  extends
-    Omit<ComponentPropsWithoutRef<'div'>, 'defaultValue' | 'onChange'>,
-    Omit<FormElementProps, 'label' | 'labelProps'> {
+export interface DateInputElementProps extends Omit<
+  ComponentPropsWithoutRef<'div'>,
+  'defaultValue' | 'onChange'
+> {
   value?: Partial<DateInputValue>;
   defaultValue?: Partial<DateInputValue>;
   onChange?: EventHandler<DateInputChangeEvent>;
 }
 
+export type DateInputProps = DateInputElementProps &
+  Omit<
+    FormElementProps<Omit<ComponentPropsWithoutRef<'div'>, 'defaultValue' | 'onChange'>, 'div'>,
+    'label' | 'labelProps'
+  >;
+
 export type DateInputType = 'day' | 'month' | 'year';
 
 const DateInputComponent = forwardRef<HTMLDivElement, DateInputProps>(
@@ -78,7 +84,7 @@ const DateInputComponent = forwardRef<HTMLDivElement, DateInputProps>(
     };
 
     return (
-      <FormGroup<Omit<DateInputProps, 'value' | 'defaultValue'>>
+      <FormGroup<Omit<DateInputProps, 'value' | 'defaultValue'>, 'div'>
         formGroupProps={{ ...formGroupProps, ref: moduleRef }}
         fieldsetProps={{ role: 'group' }}
         inputType="dateinput"
diff --git a/src/components/form-elements/date-input/components/DateInputField.tsx b/src/components/form-elements/date-input/components/DateInputField.tsx
index 55e02baf..da36f9ad 100644
--- a/src/components/form-elements/date-input/components/DateInputField.tsx
+++ b/src/components/form-elements/date-input/components/DateInputField.tsx
@@ -14,12 +14,17 @@ import { DateInputContext, type IDateInputContext } from '../DateInputContext.js
 import { Label } from '#components/form-elements/label/index.js';
 import { type FormElementProps } from '#util/types/FormTypes.js';
 
-export interface IndividualDateInputProps
-  extends ComponentPropsWithoutRef<'input'>, Pick<FormElementProps, 'label' | 'labelProps'> {
+export interface IndividualDateInputElementProps extends ComponentPropsWithoutRef<'input'> {
   error?: string | ReactElement | false;
   inputType: 'day' | 'month' | 'year';
 }
 
+export type IndividualDateInputProps = IndividualDateInputElementProps &
+  Omit<
+    FormElementProps<IndividualDateInputElementProps, 'input'>,
+    'error' | 'fieldsetProps' | 'legend' | 'legendProps'
+  >;
+
 const labels: Record<'day' | 'month' | 'year', string> = {
   day: 'Day',
   month: 'Month',
diff --git a/src/components/form-elements/radios/Radios.tsx b/src/components/form-elements/radios/Radios.tsx
index bc77d4e5..62398ab6 100644
--- a/src/components/form-elements/radios/Radios.tsx
+++ b/src/components/form-elements/radios/Radios.tsx
@@ -18,13 +18,15 @@ import { FormGroup } from '#components/utils/index.js';
 import { generateRandomName } from '#util/tools/index.js';
 import { type FormElementProps } from '#util/types/FormTypes.js';
 
-export interface RadiosProps
-  extends ComponentPropsWithoutRef<'div'>, Omit<FormElementProps, 'label' | 'labelProps'> {
+export interface RadiosElementProps extends ComponentPropsWithoutRef<'div'> {
   idPrefix?: string;
   inline?: boolean;
   small?: boolean;
 }
 
+export type RadiosProps = RadiosElementProps &
+  Omit<FormElementProps<RadiosElementProps, 'div'>, 'label' | 'labelProps'>;
+
 const RadiosComponent = forwardRef<HTMLDivElement, RadiosProps>((props, forwardedRef) => {
   const { children, idPrefix, ...rest } = props;
 
@@ -89,7 +91,7 @@ const RadiosComponent = forwardRef<HTMLDivElement, RadiosProps>((props, forwarde
   }
 
   return (
-    <FormGroup<RadiosProps> inputType="radios" {...rest}>
+    <FormGroup<RadiosProps, 'div'> inputType="radios" {...rest}>
       {({ className, inline, small, name, id, error, ...restRenderProps }) => {
         resetRadioIds();
         const contextValue: IRadiosContext = {
diff --git a/src/components/form-elements/radios/components/RadiosItem.tsx b/src/components/form-elements/radios/components/RadiosItem.tsx
index 7dfff80a..ceb66888 100644
--- a/src/components/form-elements/radios/components/RadiosItem.tsx
+++ b/src/components/form-elements/radios/components/RadiosItem.tsx
@@ -17,15 +17,18 @@ 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';
 
-export interface RadiosItemProps
-  extends
-    ComponentPropsWithoutRef<'input'>,
-    Pick<FormElementProps, 'hint' | 'hintProps' | 'labelProps'> {
+export interface RadiosItemElementProps extends ComponentPropsWithoutRef<'input'> {
   conditional?: ReactNode;
   forceShowConditional?: boolean;
   conditionalProps?: ComponentPropsWithRef<'div'>;
 }
 
+export type RadiosItemProps = RadiosItemElementProps &
+  Omit<
+    FormElementProps<RadiosItemElementProps, 'input'>,
+    'fieldsetProps' | 'label' | 'legend' | 'legendProps'
+  >;
+
 export const RadiosItem = forwardRef<HTMLInputElement, RadiosItemProps>((props, forwardedRef) => {
   const {
     className,
diff --git a/src/components/form-elements/select/Select.tsx b/src/components/form-elements/select/Select.tsx
index dbd47b53..e44caf83 100644
--- a/src/components/form-elements/select/Select.tsx
+++ b/src/components/form-elements/select/Select.tsx
@@ -6,12 +6,14 @@ import { forwardRef, type ComponentPropsWithoutRef } from 'react';
 import { FormGroup } from '#components/utils/index.js';
 import { type FormElementProps } from '#util/types/FormTypes.js';
 
-export type SelectProps = ComponentPropsWithoutRef<'select'> &
-  Omit<FormElementProps, 'fieldsetProps' | 'legend' | 'legendProps'>;
+export type SelectElementProps = ComponentPropsWithoutRef<'select'>;
+
+export type SelectProps = SelectElementProps &
+  Omit<FormElementProps<SelectElementProps, 'select'>, 'fieldsetProps' | 'legend' | 'legendProps'>;
 
 const SelectComponent = forwardRef<HTMLSelectElement, SelectProps>(
   ({ children, ...rest }, forwardedRef) => (
-    <FormGroup<SelectProps> inputType="select" {...rest}>
+    <FormGroup<SelectProps, 'select'> inputType="select" {...rest}>
       {({ className, error, ...restRenderProps }) => (
         <select
           className={classNames('nhsuk-select', { 'nhsuk-select--error': error }, className)}
diff --git a/src/components/form-elements/text-input/TextInput.tsx b/src/components/form-elements/text-input/TextInput.tsx
index 96585e67..9aba917f 100644
--- a/src/components/form-elements/text-input/TextInput.tsx
+++ b/src/components/form-elements/text-input/TextInput.tsx
@@ -7,16 +7,19 @@ import { FormGroup } from '#components/utils/index.js';
 import { type FormElementProps } from '#util/types/FormTypes.js';
 import { type InputWidth } from '#util/types/NHSUKTypes.js';
 
-export interface TextInputProps
-  extends
-    ComponentPropsWithoutRef<'input'>,
-    Omit<FormElementProps, 'fieldsetProps' | 'legend' | 'legendProps'> {
+export interface TextInputElementProps extends ComponentPropsWithoutRef<'input'> {
   width?: InputWidth;
   code?: boolean;
   prefix?: string;
   suffix?: string;
 }
 
+export type TextInputProps = TextInputElementProps &
+  Omit<
+    FormElementProps<TextInputElementProps, 'input'>,
+    'fieldsetProps' | 'legend' | 'legendProps'
+  >;
+
 const TextInputPrefix: FC<Pick<TextInputProps, 'prefix'>> = ({ prefix }) => (
   <div className="nhsuk-input__prefix" aria-hidden="true">
     {prefix}
@@ -29,10 +32,17 @@ const TextInputSuffix: FC<Pick<TextInputProps, 'suffix'>> = ({ suffix }) => (
   </div>
 );
 
-export const TextInput = forwardRef<HTMLInputElement, TextInputProps>((props, forwardedRef) => (
-  <FormGroup<TextInputProps> {...props} inputType="input">
-    {({ width, className, code, error, type = 'text', prefix, suffix, ...rest }) => {
-      const Input = (
+export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
+  ({ prefix, suffix, formGroupProps, ...props }, forwardedRef) => (
+    <FormGroup<TextInputProps, 'input'>
+      {...props}
+      formGroupProps={{
+        ...formGroupProps,
+        beforeInput: prefix ? () => <TextInputPrefix prefix={prefix} /> : undefined,
+        afterInput: suffix ? () => <TextInputSuffix suffix={suffix} /> : undefined,
+      }}
+    >
+      {({ width, className, code, error, type = 'text', prefix, suffix, ...rest }) => (
         <input
           className={classNames(
             'nhsuk-input',
@@ -45,19 +55,9 @@ export const TextInput = forwardRef<HTMLInputElement, TextInputProps>((props, fo
           type={type}
           {...rest}
         />
-      );
-
-      return prefix || suffix ? (
-        <div className="nhsuk-input__wrapper">
-          {prefix ? <TextInputPrefix prefix={prefix} /> : null}
-          {Input}
-          {suffix ? <TextInputSuffix suffix={suffix} /> : null}
-        </div>
-      ) : (
-        Input
-      );
-    }}
-  </FormGroup>
-));
+      )}
+    </FormGroup>
+  ),
+);
 
 TextInput.displayName = 'TextInput';
diff --git a/src/components/form-elements/text-input/__tests__/TextInput.test.tsx b/src/components/form-elements/text-input/__tests__/TextInput.test.tsx
index 450573e6..b5ffc1df 100644
--- a/src/components/form-elements/text-input/__tests__/TextInput.test.tsx
+++ b/src/components/form-elements/text-input/__tests__/TextInput.test.tsx
@@ -149,8 +149,8 @@ describe('TextInput', () => {
     ({ prefix, suffix }) => {
       const { container } = render(<TextInput prefix={prefix} suffix={suffix} />);
 
-      const prefixElement = container.querySelector('.nhsuk-input__wrapper > .nhsuk-input__prefix');
-      const suffixElement = container.querySelector('.nhsuk-input__wrapper > .nhsuk-input__suffix');
+      const prefixElement = container.querySelector('.nhsuk-input-wrapper > .nhsuk-input__prefix');
+      const suffixElement = container.querySelector('.nhsuk-input-wrapper > .nhsuk-input__suffix');
 
       if (prefix) {
         expect(prefixElement).not.toBeNull();
@@ -167,10 +167,10 @@ describe('TextInput', () => {
       }
 
       if (!prefix && !suffix) {
-        expect(container.querySelector('.nhsuk-input__wrapper')).toBeNull();
+        expect(container.querySelector('.nhsuk-input-wrapper')).toBeNull();
         expect(container.querySelector('.nhsuk-input')).not.toBeNull();
       } else {
-        expect(container.querySelector('.nhsuk-input__wrapper > .nhsuk-input')).not.toBeNull();
+        expect(container.querySelector('.nhsuk-input-wrapper > .nhsuk-input')).not.toBeNull();
       }
     },
   );
diff --git a/src/components/form-elements/textarea/Textarea.tsx b/src/components/form-elements/textarea/Textarea.tsx
index 1a47453c..de4cc214 100644
--- a/src/components/form-elements/textarea/Textarea.tsx
+++ b/src/components/form-elements/textarea/Textarea.tsx
@@ -6,11 +6,16 @@ import { forwardRef, type ComponentPropsWithoutRef } from 'react';
 import { FormGroup } from '#components/utils/index.js';
 import { type FormElementProps } from '#util/types/FormTypes.js';
 
-export type TextareaProps = ComponentPropsWithoutRef<'textarea'> &
-  Omit<FormElementProps, 'fieldsetProps' | 'legend' | 'legendProps'>;
+export type TextareaElementProps = ComponentPropsWithoutRef<'textarea'>;
+
+export type TextareaProps = TextareaElementProps &
+  Omit<
+    FormElementProps<TextareaElementProps, 'textarea'>,
+    'fieldsetProps' | 'legend' | 'legendProps'
+  >;
 
 export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>((props, forwardedRef) => (
-  <FormGroup<TextareaProps> inputType="textarea" {...props}>
+  <FormGroup<TextareaProps, 'textarea'> inputType="textarea" {...props}>
     {({ children, className, error, ...rest }) => (
       <>
         <textarea
diff --git a/src/components/utils/FormGroup.tsx b/src/components/utils/FormGroup.tsx
index 18d821c9..632114d2 100644
--- a/src/components/utils/FormGroup.tsx
+++ b/src/components/utils/FormGroup.tsx
@@ -6,6 +6,7 @@ import {
   useEffect,
   useState,
   type ComponentPropsWithoutRef,
+  type ElementType,
   type JSX,
   type ReactNode,
 } from 'react';
@@ -19,58 +20,34 @@ import { HintText } from '#components/form-elements/hint-text/index.js';
 import { Label } from '#components/form-elements/label/index.js';
 import { Legend } from '#components/form-elements/legend/index.js';
 import { generateRandomID } from '#util/tools/index.js';
-import { type FormElementProps } from '#util/types/FormTypes.js';
-
-type ExcludedProps =
-  | Extract<
-      keyof FormElementProps,
-      | 'legend'
-      | 'legendProps'
-      | 'fieldsetProps'
-      | 'hint'
-      | 'hintProps'
-      | 'label'
-      | 'labelProps'
-      | 'errorProps'
-      | 'disableErrorLine'
-    >
-  | 'inputType';
-
-type BaseFormElementRenderProps = ComponentPropsWithoutRef<
-  'div' | 'input' | 'select' | 'textarea'
-> &
-  Pick<FormElementProps, 'error'>;
-
-export type FormElementRenderProps<T> = Omit<T, ExcludedProps> & {
-  id: string;
-  name: string;
+import { type FormElementProps, type FormElementRenderProps } from '#util/types/FormTypes.js';
+
+export type FormGroupProps<
+  P extends ComponentPropsWithoutRef<T>,
+  T extends ElementType,
+> = FormElementProps<P, T> & {
+  children: (props: FormElementRenderProps<P, T>) => ReactNode;
+  inputType?: 'input' | 'radios' | 'select' | 'checkboxes' | 'dateinput' | 'textarea';
 };
 
-export type FormGroupProps<T> = FormElementProps & {
-  children: (props: FormElementRenderProps<T>) => ReactNode;
-  inputType: 'input' | 'radios' | 'select' | 'checkboxes' | 'dateinput' | 'textarea';
-};
-
-export const FormGroup = <T extends BaseFormElementRenderProps>(
-  props: FormGroupProps<T>,
-): JSX.Element => {
-  const {
-    children,
-    hint,
-    label,
-    legend,
-    legendProps,
-    fieldsetProps,
-    labelProps,
-    error,
-    hintProps,
-    errorProps,
-    formGroupProps,
-    id,
-    name,
-    ...rest
-  } = props;
-
+export const FormGroup = <P extends ComponentPropsWithoutRef<T>, T extends ElementType>({
+  children,
+  inputType = 'input',
+  hint,
+  label,
+  legend,
+  legendProps,
+  fieldsetProps,
+  labelProps,
+  error,
+  hintProps,
+  errorProps,
+  formGroupProps,
+  inputWrapperProps,
+  id,
+  name,
+  ...rest
+}: FormGroupProps<P, T>): JSX.Element => {
   const [generatedID] = useState<string>(generateRandomID(inputType));
   const { registerComponent, passError } = useContext<IFormGroupContext>(FormGroupContext);
   const { disableErrorFromComponents } = useFormContext();
@@ -100,12 +77,15 @@ export const FormGroup = <T extends BaseFormElementRenderProps>(
   // Update aria-describedby with new IDs
   ariaDescribedBy = ariaDescribedByIds.join(' ') || undefined;
 
+  const { beforeInput, afterInput, ...formGroupRest } = formGroupProps ?? {};
+
   const childProps = {
     ...rest,
+    error,
     'id': elementID,
     'name': name ?? elementID,
     'aria-describedby': !hasFieldset ? ariaDescribedBy : undefined,
-  } as FormElementRenderProps<T>;
+  } as FormElementRenderProps<P, T>;
 
   useEffect(() => {
     passError(elementID, disableErrorFromComponents ? false : Boolean(error));
@@ -117,13 +97,21 @@ export const FormGroup = <T extends BaseFormElementRenderProps>(
     return () => registerComponent(elementID, true);
   }, [elementID, registerComponent]);
 
+  const input = (
+    <>
+      {beforeInput?.(childProps)}
+      {children(childProps)}
+      {afterInput?.(childProps)}
+    </>
+  );
+
   return (
     <div
-      {...formGroupProps}
+      {...formGroupRest}
       className={classNames(
         'nhsuk-form-group',
         { 'nhsuk-form-group--error': hasError },
-        formGroupProps?.className,
+        formGroupRest?.className,
       )}
     >
       {hasFieldset ? (
@@ -135,7 +123,7 @@ export const FormGroup = <T extends BaseFormElementRenderProps>(
           <ErrorMessage id={errorID} {...errorProps}>
             {error}
           </ErrorMessage>
-          {children(childProps)}
+          {input}
         </Fieldset>
       ) : (
         <>
@@ -148,7 +136,14 @@ export const FormGroup = <T extends BaseFormElementRenderProps>(
           <ErrorMessage id={errorID} {...errorProps}>
             {error}
           </ErrorMessage>
-          {children(childProps)}
+          {(inputType === 'input' || inputType === 'select') &&
+          !!(beforeInput || afterInput || inputWrapperProps) ? (
+            <div className="nhsuk-input-wrapper" {...inputWrapperProps}>
+              {input}
+            </div>
+          ) : (
+            input
+          )}
         </>
       )}
     </div>
diff --git a/src/components/utils/__tests__/FormGroup.test.tsx b/src/components/utils/__tests__/FormGroup.test.tsx
index d62e938b..5fb41ad2 100644
--- a/src/components/utils/__tests__/FormGroup.test.tsx
+++ b/src/components/utils/__tests__/FormGroup.test.tsx
@@ -1,14 +1,15 @@
 import { axe, toHaveNoViolations } from 'jest-axe';
 
-import { FormGroup, type FormElementRenderProps } from '..';
+import { FormGroup } from '..';
 
 import { type TextInputProps } from '#components/form-elements';
 import { renderClient, renderServer } from '#util/components';
+import type { FormElementRenderProps } from '#util/types/FormTypes';
 
 expect.extend(toHaveNoViolations);
 
 describe('FormGroup', () => {
-  let renderProps: FormElementRenderProps<TextInputProps> | undefined;
+  let renderProps: FormElementRenderProps<TextInputProps, 'input'> | undefined;
 
   beforeEach(() => {
     renderProps = undefined;
@@ -16,9 +17,7 @@ describe('FormGroup', () => {
 
   it('matches snapshot', async () => {
     const { container } = await renderClient(
-      <FormGroup<TextInputProps> inputType="input" id="testId">
-        {(props) => <input {...props} />}
-      </FormGroup>,
+      <FormGroup<TextInputProps, 'input'> id="testId">{(props) => <input {...props} />}</FormGroup>,
       { className: 'nhsuk-form-group' },
     );
 
@@ -27,9 +26,7 @@ describe('FormGroup', () => {
 
   it('matches snapshot (via server)', async () => {
     const { container, element } = await renderServer(
-      <FormGroup<TextInputProps> inputType="input" id="testId">
-        {(props) => <input {...props} />}
-      </FormGroup>,
+      <FormGroup<TextInputProps, 'input'> id="testId">{(props) => <input {...props} />}</FormGroup>,
       { className: 'nhsuk-form-group' },
     );
 
@@ -46,7 +43,7 @@ describe('FormGroup', () => {
 
   it('generates a random ID for the input', async () => {
     await renderClient(
-      <FormGroup<TextInputProps> inputType="input">
+      <FormGroup<TextInputProps, 'input'>>
         {(props) => {
           renderProps = props;
           return <input {...props} />;
@@ -61,7 +58,7 @@ describe('FormGroup', () => {
 
   it('allows passing of custom IDs', async () => {
     await renderClient(
-      <FormGroup<TextInputProps> inputType="input" id="TestID2ElectricBoogaloo">
+      <FormGroup<TextInputProps, 'input'> id="TestID2ElectricBoogaloo">
         {(props) => {
           renderProps = props;
           return <input {...props} />;
@@ -75,7 +72,7 @@ describe('FormGroup', () => {
 
   it('passes correct props for hint (generated id)', async () => {
     const { container } = await renderClient(
-      <FormGroup<TextInputProps> inputType="input" hint="This is a test hint">
+      <FormGroup<TextInputProps, 'input'> hint="This is a test hint">
         {(props) => {
           renderProps = props;
           return <input {...props} />;
@@ -96,7 +93,7 @@ describe('FormGroup', () => {
 
   it('passes correct props for hint (custom id)', async () => {
     const { container } = await renderClient(
-      <FormGroup<TextInputProps> inputType="input" hint="This is a test hint" id="testID">
+      <FormGroup<TextInputProps, 'input'> hint="This is a test hint" id="testID">
         {(props) => {
           renderProps = props;
           return <input {...props} />;
@@ -116,7 +113,7 @@ describe('FormGroup', () => {
 
   it('passes correct props for label (generated id)', async () => {
     const { container } = await renderClient(
-      <FormGroup<TextInputProps> inputType="input" label="This is a test label">
+      <FormGroup<TextInputProps, 'input'> label="This is a test label">
         {(props) => {
           renderProps = props;
           return <input {...props} />;
@@ -136,8 +133,7 @@ describe('FormGroup', () => {
 
   it('passes correct props for label (custom id)', async () => {
     const { container } = await renderClient(
-      <FormGroup<TextInputProps>
-        inputType="input"
+      <FormGroup<TextInputProps, 'input'>
         label="This is a test label"
         labelProps={{ title: 'TestTitle' }}
         id="testID"
@@ -160,8 +156,7 @@ describe('FormGroup', () => {
 
   it('passes correct props for error (generated id)', async () => {
     const { container } = await renderClient(
-      <FormGroup<TextInputProps>
-        inputType="input"
+      <FormGroup<TextInputProps, 'input'>
         error="This is a test error"
         errorProps={{ title: 'TestTitle' }}
       >
@@ -190,8 +185,7 @@ describe('FormGroup', () => {
 
   it('passes correct props for error (custom id)', async () => {
     const { container } = await renderClient(
-      <FormGroup<TextInputProps>
-        inputType="input"
+      <FormGroup<TextInputProps, 'input'>
         error="This is a test error"
         errorProps={{ title: 'TestTitle' }}
         id="testID"
@@ -221,7 +215,7 @@ describe('FormGroup', () => {
   describe('applies the correct classes when errored', () => {
     it('string component', async () => {
       const { container } = await renderClient(
-        <FormGroup<TextInputProps> inputType="input" error="Oh no there's an error!">
+        <FormGroup<TextInputProps, 'input'> error="Oh no there's an error!">
           {({ error, ...rest }) => <input {...rest} />}
         </FormGroup>,
         { className: 'nhsuk-form-group' },
@@ -240,8 +234,7 @@ describe('FormGroup', () => {
   it('should produce an accessible component', async () => {
     const { container } = await renderClient(
       <main>
-        <FormGroup<TextInputProps>
-          inputType="input"
+        <FormGroup<TextInputProps, 'input'>
           error="This is an error"
           hint="This is a hint"
           label="Form Label"
@@ -258,8 +251,7 @@ describe('FormGroup', () => {
 
   it('should add hint ID and error ID to the aria-describedby of the input', async () => {
     const { container } = await renderClient(
-      <FormGroup<TextInputProps>
-        inputType="input"
+      <FormGroup<TextInputProps, 'input'>
         id="error-and-hint"
         error="This is an error"
         hint="This is a hint"
@@ -277,9 +269,7 @@ describe('FormGroup', () => {
 
   it('should have no aria-describedby when there is no hint or label', async () => {
     const { container } = await renderClient(
-      <FormGroup<TextInputProps> inputType="input">
-        {({ error, ...rest }) => <input {...rest} />}
-      </FormGroup>,
+      <FormGroup<TextInputProps, 'input'>>{({ error, ...rest }) => <input {...rest} />}</FormGroup>,
       { className: 'nhsuk-form-group' },
     );
 
diff --git a/src/util/types/FormTypes.ts b/src/util/types/FormTypes.ts
index 4bd74b32..33aa7f98 100644
--- a/src/util/types/FormTypes.ts
+++ b/src/util/types/FormTypes.ts
@@ -1,4 +1,9 @@
-import { type ReactElement } from 'react';
+import {
+  type ComponentPropsWithoutRef,
+  type ElementType,
+  type ReactElement,
+  type ReactNode,
+} from 'react';
 
 import { type ErrorMessageProps } from '#components/form-elements/error-message/index.js';
 import { type FieldsetProps } from '#components/form-elements/fieldset/index.js';
@@ -7,7 +12,7 @@ import { type LabelProps } from '#components/form-elements/label/index.js';
 import { type LegendProps } from '#components/form-elements/legend/index.js';
 import { type ComponentPropsWithDataAttributes } from '#util/types/NHSUKTypes.js';
 
-export interface FormElementProps {
+export interface FormElementProps<P extends ComponentPropsWithoutRef<T>, T extends ElementType> {
   'fieldsetProps'?: FieldsetProps;
   'legend'?: string | ReactElement;
   'legendProps'?: LegendProps;
@@ -17,8 +22,22 @@ export interface FormElementProps {
   'errorProps'?: ErrorMessageProps;
   'hint'?: string | ReactElement;
   'hintProps'?: HintTextProps;
-  'formGroupProps'?: ComponentPropsWithDataAttributes<'div'>;
+  'formGroupProps'?: ComponentPropsWithDataAttributes<'div'> & {
+    beforeInput?: (props: FormElementRenderProps<P, T>) => ReactNode | undefined;
+    afterInput?: (props: FormElementRenderProps<P, T>) => ReactNode | undefined;
+  };
+  'inputWrapperProps'?: ComponentPropsWithDataAttributes<'div'>;
   'id'?: string;
   'name'?: string;
   'aria-describedby'?: string;
 }
+
+export type FormElementRenderProps<
+  P extends ComponentPropsWithoutRef<T>,
+  T extends ElementType,
+> = P & {
+  'id': string;
+  'name': string;
+  'error': string | ReactElement | undefined;
+  'aria-describedby': string | undefined;
+};

From 169950798a80e1e66cd1272238bcbf4cf1943a73 Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Tue, 16 Dec 2025 08:55:32 +0000
Subject: [PATCH 10/19] Add text input with button examples

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

diff --git a/stories/Form Elements/TextInput.stories.tsx b/stories/Form Elements/TextInput.stories.tsx
index 25cfb4ff..4e66f1d0 100644
--- a/stories/Form Elements/TextInput.stories.tsx	
+++ b/stories/Form Elements/TextInput.stories.tsx	
@@ -1,5 +1,6 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 
+import { Button } from '#components/form-elements/button/Button.js';
 import { TextInput } from '#components/form-elements/text-input/index.js';
 
 const meta: Meta<typeof TextInput> = {
@@ -111,3 +112,38 @@ export const WithPrefixAndSuffixAndError: Story = {
     width: 5,
   },
 };
+
+export const WithButton: Story = {
+  args: {
+    label: 'What is your NHS number?',
+    width: 10,
+    code: true,
+    inputMode: 'numeric',
+    spellCheck: false,
+    formGroupProps: {
+      afterInput: () => (
+        <Button secondary small>
+          Search
+        </Button>
+      ),
+    },
+  },
+};
+
+export const WithButtonAndError: Story = {
+  args: {
+    label: 'What is your NHS number?',
+    error: 'Enter NHS number',
+    width: 10,
+    code: true,
+    inputMode: 'numeric',
+    spellCheck: false,
+    formGroupProps: {
+      afterInput: () => (
+        <Button secondary small>
+          Search
+        </Button>
+      ),
+    },
+  },
+};

From 992b9af8ec71964d190f431f3790cbc355d39da0 Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Tue, 16 Dec 2025 08:55:43 +0000
Subject: [PATCH 11/19] Add select with button examples

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

diff --git a/stories/Form Elements/Select.stories.tsx b/stories/Form Elements/Select.stories.tsx
index ed3df5b5..7f096314 100644
--- a/stories/Form Elements/Select.stories.tsx	
+++ b/stories/Form Elements/Select.stories.tsx	
@@ -1,5 +1,6 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 
+import { Button } from '#components/form-elements/button/Button.js';
 import { Select } from '#components/form-elements/select/index.js';
 
 const meta: Meta<typeof Select> = {
@@ -56,3 +57,28 @@ export const SelectWithErrorAndHintText: Story = {
     error: 'Select a location',
   },
 };
+
+export const SelectWithButton: Story = {
+  args: {
+    formGroupProps: {
+      afterInput: () => (
+        <Button secondary small>
+          Search
+        </Button>
+      ),
+    },
+  },
+};
+
+export const SelectWithButtonAndError: Story = {
+  args: {
+    error: 'Select a location',
+    formGroupProps: {
+      afterInput: () => (
+        <Button secondary small>
+          Search
+        </Button>
+      ),
+    },
+  },
+};

From 7faf768161aef7411d205d117bf186aa0614f149 Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Tue, 16 Dec 2025 18:01:32 +0000
Subject: [PATCH 12/19] Add password input component

---
 src/__tests__/index.test.ts                   |   1 +
 src/components/form-elements/index.ts         |   1 +
 .../password-input/PasswordInput.tsx          | 117 ++++++++++++++++
 .../__tests__/PasswordInput.test.tsx          | 127 +++++++++++++++++
 .../__snapshots__/PasswordInput.test.tsx.snap | 131 ++++++++++++++++++
 .../form-elements/password-input/index.ts     |   1 +
 .../Form Elements/PasswordInput.stories.tsx   |  40 ++++++
 7 files changed, 418 insertions(+)
 create mode 100644 src/components/form-elements/password-input/PasswordInput.tsx
 create mode 100644 src/components/form-elements/password-input/__tests__/PasswordInput.test.tsx
 create mode 100644 src/components/form-elements/password-input/__tests__/__snapshots__/PasswordInput.test.tsx.snap
 create mode 100644 src/components/form-elements/password-input/index.ts
 create mode 100644 stories/Form Elements/PasswordInput.stories.tsx

diff --git a/src/__tests__/index.test.ts b/src/__tests__/index.test.ts
index c6a86f28..2e038628 100644
--- a/src/__tests__/index.test.ts
+++ b/src/__tests__/index.test.ts
@@ -101,6 +101,7 @@ describe('Index', () => {
       'PaginationLinkText',
       'Panel',
       'PanelTitle',
+      'PasswordInput',
       'Radios',
       'RadiosContext',
       'RadiosDivider',
diff --git a/src/components/form-elements/index.ts b/src/components/form-elements/index.ts
index 23b427ff..46a3cde8 100644
--- a/src/components/form-elements/index.ts
+++ b/src/components/form-elements/index.ts
@@ -9,6 +9,7 @@ export * from './form/index.js';
 export * from './hint-text/index.js';
 export * from './label/index.js';
 export * from './legend/index.js';
+export * from './password-input/index.js';
 export * from './radios/index.js';
 export * from './select/index.js';
 export * from './text-input/index.js';
diff --git a/src/components/form-elements/password-input/PasswordInput.tsx b/src/components/form-elements/password-input/PasswordInput.tsx
new file mode 100644
index 00000000..4c4ee1d8
--- /dev/null
+++ b/src/components/form-elements/password-input/PasswordInput.tsx
@@ -0,0 +1,117 @@
+'use client';
+
+import classNames from 'classnames';
+import { type PasswordInput as PasswordInputModule } from 'nhsuk-frontend';
+import {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+  type ComponentPropsWithoutRef,
+  type ComponentPropsWithRef,
+  type FC,
+} from 'react';
+
+import { Button } from '#components/form-elements/button/index.js';
+import { FormGroup } from '#components/utils/index.js';
+import { type FormElementProps } from '#util/types/FormTypes.js';
+import { type InputWidth } from '#util/types/NHSUKTypes.js';
+
+export interface PasswordInputElementProps extends ComponentPropsWithoutRef<'input'> {
+  width?: InputWidth;
+  showPasswordText?: string;
+  showPasswordAriaLabelText?: string;
+  buttonProps?: ComponentPropsWithRef<'button'>;
+}
+
+export type PasswordInputProps = PasswordInputElementProps &
+  Omit<
+    FormElementProps<PasswordInputElementProps, 'input'>,
+    'fieldsetProps' | 'legend' | 'legendProps'
+  >;
+
+const PasswordInputButton: FC<ComponentPropsWithRef<'button'>> = ({
+  children,
+  className,
+  ...rest
+}) => (
+  <Button
+    className={classNames('nhsuk-password-input__toggle nhsuk-js-password-input-toggle', className)}
+    type="button"
+    secondary
+    small
+    hidden
+    {...rest}
+  >
+    {children}
+  </Button>
+);
+
+export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
+  ({ buttonProps, formGroupProps, ...props }, forwardedRef) => {
+    const { showPasswordText, showPasswordAriaLabelText, ...rest } = props;
+
+    const moduleRef = useRef<HTMLDivElement>(null);
+    const importRef = useRef<Promise<PasswordInputModule | void>>(null);
+    const [instanceError, setInstanceError] = useState<Error>();
+    const [instance, setInstance] = useState<PasswordInputModule>();
+
+    useImperativeHandle(formGroupProps?.ref, () => moduleRef.current!, [moduleRef]);
+
+    useEffect(() => {
+      if (!moduleRef.current || importRef.current || instance) {
+        return;
+      }
+
+      importRef.current = import('nhsuk-frontend')
+        .then(({ PasswordInput }) => setInstance(new PasswordInput(moduleRef.current)))
+        .catch(setInstanceError);
+    }, [moduleRef, importRef, instance]);
+
+    if (instanceError) {
+      throw instanceError;
+    }
+
+    return (
+      <FormGroup<PasswordInputProps, 'input'>
+        {...rest}
+        formGroupProps={{
+          ...formGroupProps,
+          'className': classNames('nhsuk-password-input', formGroupProps?.className),
+          'data-module': 'nhsuk-password-input',
+          'afterInput': ({ id }) => (
+            <PasswordInputButton
+              aria-controls={id}
+              aria-label={showPasswordAriaLabelText ?? 'Show password'}
+              {...buttonProps}
+            >
+              {showPasswordText ?? 'Show'}
+            </PasswordInputButton>
+          ),
+          'ref': moduleRef,
+        }}
+      >
+        {({ width, className, error, autoComplete, ...rest }) => (
+          <input
+            className={classNames(
+              'nhsuk-input',
+              { [`nhsuk-input--width-${width}`]: width },
+              { 'nhsuk-input--error': error },
+              'nhsuk-password-input__input nhsuk-js-password-input-input',
+              className,
+            )}
+            ref={forwardedRef}
+            type="password"
+            spellCheck="false"
+            autoCapitalize="none"
+            autoComplete={autoComplete ?? 'current-password'}
+            {...rest}
+          />
+        )}
+      </FormGroup>
+    );
+  },
+);
+
+PasswordInput.displayName = 'PasswordInput';
diff --git a/src/components/form-elements/password-input/__tests__/PasswordInput.test.tsx b/src/components/form-elements/password-input/__tests__/PasswordInput.test.tsx
new file mode 100644
index 00000000..fd182053
--- /dev/null
+++ b/src/components/form-elements/password-input/__tests__/PasswordInput.test.tsx
@@ -0,0 +1,127 @@
+import { createRef } from 'react';
+
+import { PasswordInput } from '..';
+
+import { renderClient, renderServer } from '#util/components';
+import { type InputWidth } from '#util/types';
+
+describe('PasswordInput', () => {
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('matches snapshot', async () => {
+    const { container } = await renderClient(
+      <PasswordInput label="Password" labelProps={{ size: 'l' }} id="password" />,
+      { moduleName: 'nhsuk-password-input' },
+    );
+
+    expect(container).toMatchSnapshot('PasswordInput');
+  });
+
+  it('matches snapshot (via server)', async () => {
+    const { container, element } = await renderServer(
+      <PasswordInput label="Password" labelProps={{ size: 'l' }} id="password" />,
+      { moduleName: 'nhsuk-password-input' },
+    );
+
+    expect(container).toMatchSnapshot('server');
+
+    await renderClient(element, {
+      moduleName: 'nhsuk-password-input',
+      hydrate: true,
+      container,
+    });
+
+    expect(container).toMatchSnapshot('client');
+  });
+
+  it('forwards refs', async () => {
+    const groupRef = createRef<HTMLDivElement>();
+    const fieldRef = createRef<HTMLInputElement>();
+    const buttonRef = createRef<HTMLButtonElement>();
+
+    const { container } = await renderClient(
+      <PasswordInput
+        formGroupProps={{ ref: groupRef }}
+        buttonProps={{ ref: buttonRef }}
+        ref={fieldRef}
+      />,
+      { className: 'nhsuk-password-input' },
+    );
+
+    const groupEl = container.querySelector('div');
+    const inputEl = container.querySelector('input');
+    const buttonEl = container.querySelector('button');
+
+    expect(groupRef.current).toBe(groupEl);
+    expect(groupRef.current).toHaveClass('nhsuk-form-group');
+
+    expect(fieldRef.current).toBe(inputEl);
+    expect(fieldRef.current).toHaveClass('nhsuk-input');
+
+    expect(buttonRef.current).toBe(buttonEl);
+    expect(buttonRef.current).toHaveClass('nhsuk-password-input__toggle');
+  });
+
+  it('should handle DOM events where ref exists', async () => {
+    const ref = createRef<HTMLInputElement>();
+    const mock = jest.fn();
+
+    const handleClick = () => {
+      if (!ref.current) return;
+      mock();
+    };
+
+    const { modules } = await renderClient(<PasswordInput onClick={handleClick} ref={ref} />, {
+      className: 'nhsuk-input',
+    });
+
+    const [inputEl] = modules;
+    inputEl.click();
+
+    expect(mock).toHaveBeenCalledTimes(1);
+  });
+
+  it.each<InputWidth | undefined>([undefined, '5', '10'])(
+    'sets the provided input width if specified with %s',
+    async (width) => {
+      const { modules } = await renderClient(<PasswordInput width={width} />, {
+        className: 'nhsuk-input',
+      });
+
+      const [inputEl] = modules;
+
+      if (width) {
+        expect(inputEl).toHaveClass(`nhsuk-input--width-${width}`);
+      } else {
+        expect(inputEl.className.indexOf('nhsuk-input--width')).toBe(-1);
+      }
+    },
+  );
+
+  it('sets the error class when error message is provided', async () => {
+    const { modules } = await renderClient(
+      <>
+        <PasswordInput error={undefined} />
+        <PasswordInput error="Enter password" />
+      </>,
+      { className: 'nhsuk-input' },
+    );
+
+    const [inputEl1, inputEl2] = modules;
+
+    expect(inputEl1).not.toHaveClass('nhsuk-input--error');
+    expect(inputEl2).toHaveClass('nhsuk-input--error');
+  });
+
+  it('sets the provided input width if specified', async () => {
+    const { modules } = await renderClient(<PasswordInput width="5" />, {
+      className: 'nhsuk-input',
+    });
+
+    const [inputEl] = modules;
+
+    expect(inputEl).toHaveClass('nhsuk-input--width-5');
+  });
+});
diff --git a/src/components/form-elements/password-input/__tests__/__snapshots__/PasswordInput.test.tsx.snap b/src/components/form-elements/password-input/__tests__/__snapshots__/PasswordInput.test.tsx.snap
new file mode 100644
index 00000000..595624c9
--- /dev/null
+++ b/src/components/form-elements/password-input/__tests__/__snapshots__/PasswordInput.test.tsx.snap
@@ -0,0 +1,131 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`PasswordInput matches snapshot (via server): client 1`] = `
+<div>
+  <div
+    class="nhsuk-form-group nhsuk-password-input"
+    data-module="nhsuk-password-input"
+    data-nhsuk-password-input-init=""
+  >
+    <label
+      class="nhsuk-label nhsuk-label--l"
+      for="password"
+      id="password--label"
+    >
+      Password
+    </label>
+    <div
+      class="nhsuk-input-wrapper"
+    >
+      <input
+        autocapitalize="none"
+        autocomplete="current-password"
+        class="nhsuk-input nhsuk-password-input__input nhsuk-js-password-input-input"
+        id="password"
+        name="password"
+        spellcheck="false"
+        type="password"
+      />
+      <div
+        aria-live="polite"
+        class="nhsuk-password-input__sr-status nhsuk-u-visually-hidden"
+      />
+      <button
+        aria-controls="password"
+        aria-label="Show password"
+        class="nhsuk-button nhsuk-button--secondary nhsuk-button--small nhsuk-password-input__toggle nhsuk-js-password-input-toggle"
+        data-module="nhsuk-button"
+        data-nhsuk-button-init=""
+        type="button"
+      >
+        Show
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`PasswordInput matches snapshot (via server): server 1`] = `
+<div>
+  <div
+    class="nhsuk-form-group nhsuk-password-input"
+    data-module="nhsuk-password-input"
+  >
+    <label
+      class="nhsuk-label nhsuk-label--l"
+      for="password"
+      id="password--label"
+    >
+      Password
+    </label>
+    <div
+      class="nhsuk-input-wrapper"
+    >
+      <input
+        autocapitalize="none"
+        autocomplete="current-password"
+        class="nhsuk-input nhsuk-password-input__input nhsuk-js-password-input-input"
+        id="password"
+        name="password"
+        spellcheck="false"
+        type="password"
+      />
+      <button
+        aria-controls="password"
+        aria-label="Show password"
+        class="nhsuk-button nhsuk-button--secondary nhsuk-button--small nhsuk-password-input__toggle nhsuk-js-password-input-toggle"
+        data-module="nhsuk-button"
+        hidden=""
+        type="button"
+      >
+        Show
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`PasswordInput matches snapshot: PasswordInput 1`] = `
+<div>
+  <div
+    class="nhsuk-form-group nhsuk-password-input"
+    data-module="nhsuk-password-input"
+    data-nhsuk-password-input-init=""
+  >
+    <label
+      class="nhsuk-label nhsuk-label--l"
+      for="password"
+      id="password--label"
+    >
+      Password
+    </label>
+    <div
+      class="nhsuk-input-wrapper"
+    >
+      <input
+        autocapitalize="none"
+        autocomplete="current-password"
+        class="nhsuk-input nhsuk-password-input__input nhsuk-js-password-input-input"
+        id="password"
+        name="password"
+        spellcheck="false"
+        type="password"
+      />
+      <div
+        aria-live="polite"
+        class="nhsuk-password-input__sr-status nhsuk-u-visually-hidden"
+      />
+      <button
+        aria-controls="password"
+        aria-label="Show password"
+        class="nhsuk-button nhsuk-button--secondary nhsuk-button--small nhsuk-password-input__toggle nhsuk-js-password-input-toggle"
+        data-module="nhsuk-button"
+        data-nhsuk-button-init=""
+        type="button"
+      >
+        Show
+      </button>
+    </div>
+  </div>
+</div>
+`;
diff --git a/src/components/form-elements/password-input/index.ts b/src/components/form-elements/password-input/index.ts
new file mode 100644
index 00000000..8452522a
--- /dev/null
+++ b/src/components/form-elements/password-input/index.ts
@@ -0,0 +1 @@
+export * from './PasswordInput.js';
diff --git a/stories/Form Elements/PasswordInput.stories.tsx b/stories/Form Elements/PasswordInput.stories.tsx
new file mode 100644
index 00000000..555fd817
--- /dev/null
+++ b/stories/Form Elements/PasswordInput.stories.tsx	
@@ -0,0 +1,40 @@
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+
+import { PasswordInput } from '#components/form-elements/password-input/index.js';
+
+const meta: Meta<typeof PasswordInput> = {
+  title: 'Form Elements/PasswordInput',
+  component: PasswordInput,
+  args: {
+    id: 'input-example',
+    name: 'example',
+    label: 'Password',
+    labelProps: { isPageHeading: true, size: 'l' },
+  },
+  argTypes: {
+    ref: { table: { disable: true } },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof PasswordInput>;
+
+export const Standard: Story = {};
+export const WithHintText: Story = {
+  args: {
+    hint: 'It probably has some letters, numbers and maybe even some symbols in it',
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    error: 'Enter a password',
+  },
+};
+
+export const WithErrorAndHintText: Story = {
+  args: {
+    error: 'Enter a password',
+    hint: 'It probably has some letters, numbers and maybe even some symbols in it',
+  },
+};

From cc8c5d97536b39135703581876a9bc5cb41c9468 Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Tue, 16 Dec 2025 09:32:01 +0000
Subject: [PATCH 13/19] Update tabs examples

---
 stories/Content Presentation/Tabs.stories.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/stories/Content Presentation/Tabs.stories.tsx b/stories/Content Presentation/Tabs.stories.tsx
index 6dbc2b50..6696911b 100644
--- a/stories/Content Presentation/Tabs.stories.tsx	
+++ b/stories/Content Presentation/Tabs.stories.tsx	
@@ -29,15 +29,15 @@ export const Standard: Story = {
       </Tabs.List>
 
       <Tabs.Contents id="past-day">
-        <div>Past day contents go here</div>
+        <p>Past day contents go here</p>
       </Tabs.Contents>
 
       <Tabs.Contents id="past-week">
-        <div>Past week contents go here</div>
+        <p>Past week contents go here</p>
       </Tabs.Contents>
 
       <Tabs.Contents id="past-month">
-        <div>Past month contents go here</div>
+        <p>Past month contents go here</p>
       </Tabs.Contents>
     </Tabs>
   ),
@@ -59,15 +59,15 @@ export const DifferentAccessibleHeading: Story = {
       </Tabs.List>
 
       <Tabs.Contents id="past-day-2">
-        <div>Past day contents go here</div>
+        <p>Past day contents go here</p>
       </Tabs.Contents>
 
       <Tabs.Contents id="past-week-2">
-        <div>Past week contents go here</div>
+        <p>Past week contents go here</p>
       </Tabs.Contents>
 
       <Tabs.Contents id="past-month-2">
-        <div>Past month contents go here</div>
+        <p>Past month contents go here</p>
       </Tabs.Contents>
     </Tabs>
   ),

From 7d62dc1ba9022b3d3cbf9533598254633990c077 Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Tue, 16 Dec 2025 09:32:10 +0000
Subject: [PATCH 14/19] Update card examples

---
 stories/Navigation/Card.stories.tsx | 154 +++++++++++++++++++++++++---
 1 file changed, 138 insertions(+), 16 deletions(-)

diff --git a/stories/Navigation/Card.stories.tsx b/stories/Navigation/Card.stories.tsx
index da9d84e1..8313e237 100644
--- a/stories/Navigation/Card.stories.tsx
+++ b/stories/Navigation/Card.stories.tsx
@@ -2,7 +2,9 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
 
 import { ChevronRightCircleIcon } from '#components/content-presentation/icons/individual/index.js';
+import { SummaryList } from '#components/content-presentation/summary-list/index.js';
 import { Card } from '#components/navigation/card/index.js';
+import { BodyText } from '#components/typography/BodyText.js';
 
 const meta: Meta<typeof Card> = {
   title: 'Navigation/Card',
@@ -16,7 +18,9 @@ export const Standard: Story = {
   render: (args) => (
     <Card {...args}>
       <Card.Content>
-        <Card.Heading>If you need help now but it&apos;s not an emergency</Card.Heading>
+        <Card.Heading className="nhsuk-heading-m">
+          If you need help now but it&apos;s not an emergency
+        </Card.Heading>
         <Card.Description>
           Go to <a href="stories#">111.nhs.uk</a> or <a href="stories#">call 111</a>
         </Card.Description>
@@ -25,10 +29,7 @@ export const Standard: Story = {
   ),
 };
 
-export const ClickableCard: Story = {
-  args: {
-    clickable: true,
-  },
+export const BasicWithHeadingLink: Story = {
   render: (args) => (
     <Card {...args}>
       <Card.Content>
@@ -43,6 +44,66 @@ export const ClickableCard: Story = {
   ),
 };
 
+export const BasicWithCustomHTML: Story = {
+  render: (args) => (
+    <Card {...args}>
+      <Card.Content>
+        <Card.Heading className="nhsuk-heading-m">Help from NHS 111</Card.Heading>
+        <BodyText>
+          If you&apos;re worried about a symptom and not sure what help you need, NHS 111 can tell
+          you what to do next.
+        </BodyText>
+        <BodyText>
+          Go to <a href="#">111.nhs.uk</a> or <a href="#">call 111</a>.
+        </BodyText>
+        <BodyText>For a life-threatening emergency call 999.</BodyText>
+      </Card.Content>
+    </Card>
+  ),
+};
+
+export const BasicWithSummaryList: Story = {
+  render: (args) => (
+    <Card {...args}>
+      <Card.Content>
+        <Card.Heading className="nhsuk-heading-m">Help from NHS 111</Card.Heading>
+        <SummaryList>
+          <SummaryList.Row>
+            <SummaryList.Key>Name</SummaryList.Key>
+            <SummaryList.Value>Karen Francis</SummaryList.Value>
+          </SummaryList.Row>
+          <SummaryList.Row noBorder>
+            <SummaryList.Key>Date of birth</SummaryList.Key>
+            <SummaryList.Value>15 March 1984</SummaryList.Value>
+          </SummaryList.Row>
+        </SummaryList>
+      </Card.Content>
+    </Card>
+  ),
+};
+
+export const BasicWithSummaryListAndHeadingLink: Story = {
+  render: (args) => (
+    <Card {...args}>
+      <Card.Content>
+        <Card.Heading className="nhsuk-heading-m">
+          <Card.Link href="#">Help from NHS 111</Card.Link>
+        </Card.Heading>
+        <SummaryList>
+          <SummaryList.Row>
+            <SummaryList.Key>Name</SummaryList.Key>
+            <SummaryList.Value>Karen Francis</SummaryList.Value>
+          </SummaryList.Row>
+          <SummaryList.Row noBorder>
+            <SummaryList.Key>Date of birth</SummaryList.Key>
+            <SummaryList.Value>15 March 1984</SummaryList.Value>
+          </SummaryList.Row>
+        </SummaryList>
+      </Card.Content>
+    </Card>
+  ),
+};
+
 export const CardWithImage: Story = {
   args: {
     clickable: true,
@@ -72,7 +133,7 @@ export const FeatureCard: Story = {
   render: (args) => (
     <Card {...args}>
       <Card.Content>
-        <Card.Heading>Feature card heading</Card.Heading>
+        <Card.Heading className="nhsuk-heading-m">Feature card heading</Card.Heading>
         <Card.Description>Feature card description</Card.Description>
       </Card.Content>
     </Card>
@@ -86,7 +147,7 @@ export const FeatureCardWithList: Story = {
   render: (args) => (
     <Card {...args}>
       <Card.Content>
-        <Card.Heading>Feature card heading</Card.Heading>
+        <Card.Heading className="nhsuk-heading-m">Feature card heading</Card.Heading>
         <ul className="nhsuk-list nhsuk-list--border">
           <li>
             <a href="/conditions/abdominal-aortic-aneurysm/">AAA</a>
@@ -111,16 +172,53 @@ export const PrimaryCardWithChevron: Story = {
   render: (args) => (
     <Card {...args}>
       <Card.Content>
-        <Card.Heading>
-          <Card.Link href="#">Primary card heading</Card.Link>
+        <Card.Heading className="nhsuk-heading-m">
+          <Card.Link href="#">Breast screening</Card.Link>
         </Card.Heading>
-        <Card.Description>Primary card description</Card.Description>
         <ChevronRightCircleIcon />
       </Card.Content>
     </Card>
   ),
 };
 
+export const PrimaryCardWithChevronAndDescription: Story = {
+  args: {
+    cardType: 'primary',
+    clickable: true,
+  },
+  render: (args) => (
+    <Card {...args}>
+      <Card.Content>
+        <Card.Heading className="nhsuk-heading-m">
+          <Card.Link href="#">Introduction to care and support</Card.Link>
+        </Card.Heading>
+        <Card.Description>
+          A quick guide for people who have care and support needs and their carers
+        </Card.Description>
+        <ChevronRightCircleIcon />
+      </Card.Content>
+    </Card>
+  ),
+};
+
+export const ClickableCard: Story = {
+  args: {
+    clickable: true,
+  },
+  render: (args) => (
+    <Card {...args}>
+      <Card.Content>
+        <Card.Heading className="nhsuk-heading-m">
+          <Card.Link href="#">Introduction to care and support</Card.Link>
+        </Card.Heading>
+        <Card.Description>
+          A quick guide for people who have care and support needs and their carers
+        </Card.Description>
+      </Card.Content>
+    </Card>
+  ),
+};
+
 export const SecondaryCard: Story = {
   args: {
     cardType: 'secondary',
@@ -129,10 +227,34 @@ export const SecondaryCard: Story = {
   render: (args) => (
     <Card {...args}>
       <Card.Content>
-        <Card.Heading>
-          <Card.Link href="#">Secondary card heading</Card.Link>
+        <Card.Heading className="nhsuk-heading-m">
+          <Card.Link href="#">Urgent and emergency care services</Card.Link>
         </Card.Heading>
-        <Card.Description>Secondary card description</Card.Description>
+        <Card.Description>
+          Services the NHS provides if you need urgent or emergency medical help
+        </Card.Description>
+      </Card.Content>
+    </Card>
+  ),
+};
+
+export const SecondaryNonClickableWithCustomHTML: Story = {
+  args: {
+    cardType: 'secondary',
+  },
+  render: (args) => (
+    <Card {...args}>
+      <Card.Content>
+        <Card.Heading className="nhsuk-u-font-size-22 nhsuk-u-margin-bottom-2">
+          <Card.Link href="#">Why we are reinvesting in the NHS Prototype kit</Card.Link>
+        </Card.Heading>
+        <BodyText className="nhsuk-body-s nhsuk-u-margin-bottom-2">
+          Services the NHS provides if you need urgent or emergency medical help
+        </BodyText>
+        <Card.Description>
+          Frankie and Mike explain why we revived the NHS prototype kit, the benefits of prototyping
+          in code and how digital teams in the NHS can get started using it.
+        </Card.Description>
       </Card.Content>
     </Card>
   ),
@@ -206,7 +328,7 @@ export const NonUrgentCareCard: Story = {
   },
   render: (args) => (
     <Card {...args}>
-      <Card.Heading>Speak to a GP if:</Card.Heading>
+      <Card.Heading className="nhsuk-heading-m">Speak to a GP if:</Card.Heading>
       <Card.Content>
         <ul>
           <li>you&apos;re not sure it&apos;s chickenpox</li>
@@ -231,7 +353,7 @@ export const UrgentCareCard: Story = {
   },
   render: (args) => (
     <Card {...args}>
-      <Card.Heading>Ask for an urgent GP appointment if:</Card.Heading>
+      <Card.Heading className="nhsuk-heading-m">Ask for an urgent GP appointment if:</Card.Heading>
       <Card.Content>
         <ul>
           <li>you&apos;re an adult and have chickenpox</li>
@@ -259,7 +381,7 @@ export const EmergencyCareCard: Story = {
   },
   render: (args) => (
     <Card {...args}>
-      <Card.Heading>Call 999 or go to A&E now if:</Card.Heading>
+      <Card.Heading className="nhsuk-heading-m">Call 999 or go to A&E now if:</Card.Heading>
       <Card.Content>
         <ul>
           <li>you or someone you know needs immediate help</li>

From 8715db77b50544a0c82eb896361d2edbdd4942bc Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Tue, 16 Dec 2025 09:37:20 +0000
Subject: [PATCH 15/19] Remove unnecessary card classes

---
 src/components/navigation/card/Card.tsx       |  3 +-
 .../navigation/card/__tests__/Card.test.tsx   | 47 ++++---------------
 .../__snapshots__/Card.test.tsx.snap          | 12 ++---
 .../card/components/CardContent.tsx           | 27 +++--------
 .../card/components/CardHeading.tsx           | 10 ++--
 src/util/types/NHSUKTypes.ts                  |  2 +-
 6 files changed, 27 insertions(+), 74 deletions(-)

diff --git a/src/components/navigation/card/Card.tsx b/src/components/navigation/card/Card.tsx
index c337a555..4e355175 100644
--- a/src/components/navigation/card/Card.tsx
+++ b/src/components/navigation/card/Card.tsx
@@ -26,8 +26,9 @@ const CardComponent = forwardRef<HTMLDivElement, CardProps>((props, forwardedRef
 
   let cardClassNames = classNames(
     'nhsuk-card',
-    { 'nhsuk-card--clickable': clickable },
+    { 'nhsuk-card--clickable': cardType === 'clickable' || clickable },
     { 'nhsuk-card--feature': cardType === 'feature' },
+    { 'nhsuk-card--primary': cardType === 'primary' },
     { 'nhsuk-card--secondary': cardType === 'secondary' },
     className,
   );
diff --git a/src/components/navigation/card/__tests__/Card.test.tsx b/src/components/navigation/card/__tests__/Card.test.tsx
index ce5c815a..285e38e2 100644
--- a/src/components/navigation/card/__tests__/Card.test.tsx
+++ b/src/components/navigation/card/__tests__/Card.test.tsx
@@ -65,7 +65,7 @@ describe('Card', () => {
     expect(container.querySelector('button.nhsuk-card__link')?.textContent).toBe('Click me!');
   });
 
-  it('adds clickable classes', () => {
+  it('adds clickable modifier', () => {
     const { container } = render(
       <Card clickable>
         <Card.Content>
@@ -84,9 +84,14 @@ describe('Card', () => {
     expect(cardEl).toHaveClass('nhsuk-card--clickable');
   });
 
-  it('adds feature classes to all elements', () => {
+  it.each<{ cardType: CardType }>([
+    { cardType: 'clickable' },
+    { cardType: 'feature' },
+    { cardType: 'primary' },
+    { cardType: 'secondary' },
+  ])('adds $cardType card type modifier', ({ cardType }) => {
     const { container } = render(
-      <Card cardType="feature">
+      <Card cardType={cardType}>
         <Card.Content>
           <Card.Heading>Feature card heading</Card.Heading>
           <Card.Description>Feature card description</Card.Description>
@@ -97,45 +102,11 @@ describe('Card', () => {
     const cardEl = container.querySelector('.nhsuk-card');
     const cardHeadingEl = cardEl?.querySelector('.nhsuk-card__heading');
 
+    expect(cardEl).toHaveClass(`nhsuk-card--${cardType}`);
     expect(cardHeadingEl).toHaveClass('nhsuk-card__heading');
-    expect(cardHeadingEl).toHaveClass('nhsuk-card__heading--feature');
     expect(cardHeadingEl?.tagName).toBe('H2');
   });
 
-  it('adds primary class to card contents', () => {
-    const { container } = render(
-      <Card cardType="primary">
-        <Card.Content>
-          <Card.Heading>Feature card heading</Card.Heading>
-          <Card.Description>Feature card description</Card.Description>
-        </Card.Content>
-      </Card>,
-    );
-
-    const cardEl = container.querySelector('.nhsuk-card');
-    const cardContentsEl = cardEl?.querySelector('.nhsuk-card__content');
-
-    expect(cardContentsEl).toHaveClass('nhsuk-card__content--primary');
-  });
-
-  it('adds secondary classes to card and contents', () => {
-    const { container } = render(
-      <Card cardType="secondary">
-        <Card.Content>
-          <Card.Heading>Feature card heading</Card.Heading>
-          <Card.Description>Feature card description</Card.Description>
-        </Card.Content>
-      </Card>,
-    );
-
-    const cardEl = container.querySelector('.nhsuk-card');
-    const cardContentsEl = cardEl?.querySelector('.nhsuk-card__content');
-
-    expect(cardEl).toHaveClass('nhsuk-card');
-    expect(cardEl).toHaveClass('nhsuk-card--secondary');
-    expect(cardContentsEl).toHaveClass('nhsuk-card__content--secondary');
-  });
-
   describe('Care card variant', () => {
     describe.each<{
       heading: string;
diff --git a/src/components/navigation/card/__tests__/__snapshots__/Card.test.tsx.snap b/src/components/navigation/card/__tests__/__snapshots__/Card.test.tsx.snap
index a4ab772b..bb1716ff 100644
--- a/src/components/navigation/card/__tests__/__snapshots__/Card.test.tsx.snap
+++ b/src/components/navigation/card/__tests__/__snapshots__/Card.test.tsx.snap
@@ -59,10 +59,10 @@ exports[`Card Care card variant emergency matches the snapshot 1`] = `
     class="nhsuk-card nhsuk-card--care nhsuk-card--care--emergency"
   >
     <div
-      class="nhsuk-card--care__heading-container"
+      class="nhsuk-card__heading-container"
     >
       <h2
-        class="nhsuk-card--care__heading"
+        class="nhsuk-card__heading"
       >
         <span
           role="text"
@@ -90,10 +90,10 @@ exports[`Card Care card variant non-urgent matches the snapshot 1`] = `
     class="nhsuk-card nhsuk-card--care nhsuk-card--care--non-urgent"
   >
     <div
-      class="nhsuk-card--care__heading-container"
+      class="nhsuk-card__heading-container"
     >
       <h2
-        class="nhsuk-card--care__heading"
+        class="nhsuk-card__heading"
       >
         <span
           role="text"
@@ -121,10 +121,10 @@ exports[`Card Care card variant urgent matches the snapshot 1`] = `
     class="nhsuk-card nhsuk-card--care nhsuk-card--care--urgent"
   >
     <div
-      class="nhsuk-card--care__heading-container"
+      class="nhsuk-card__heading-container"
     >
       <h2
-        class="nhsuk-card--care__heading"
+        class="nhsuk-card__heading"
       >
         <span
           role="text"
diff --git a/src/components/navigation/card/components/CardContent.tsx b/src/components/navigation/card/components/CardContent.tsx
index e0e9d1c6..3975f15b 100644
--- a/src/components/navigation/card/components/CardContent.tsx
+++ b/src/components/navigation/card/components/CardContent.tsx
@@ -1,29 +1,14 @@
 'use client';
 
 import classNames from 'classnames';
-import { forwardRef, useContext, type ComponentPropsWithoutRef } from 'react';
-
-import { CardContext } from '../CardContext.js';
+import { forwardRef, type ComponentPropsWithoutRef } from 'react';
 
 export type CardContentProps = ComponentPropsWithoutRef<'div'>;
 
-export const CardContent = forwardRef<HTMLDivElement, CardContentProps>((props, forwardedRef) => {
-  const { cardType } = useContext(CardContext);
-  const { className, ...rest } = props;
-
-  return (
-    <div
-      className={classNames(
-        'nhsuk-card__content',
-        { 'nhsuk-card__content--feature': cardType === 'feature' },
-        { 'nhsuk-card__content--primary': cardType === 'primary' },
-        { 'nhsuk-card__content--secondary': cardType === 'secondary' },
-        className,
-      )}
-      ref={forwardedRef}
-      {...rest}
-    />
-  );
-});
+export const CardContent = forwardRef<HTMLDivElement, CardContentProps>(
+  ({ className, ...rest }, forwardedRef) => (
+    <div className={classNames('nhsuk-card__content', className)} ref={forwardedRef} {...rest} />
+  ),
+);
 
 CardContent.displayName = 'Card.Content';
diff --git a/src/components/navigation/card/components/CardHeading.tsx b/src/components/navigation/card/components/CardHeading.tsx
index 9646fc11..c579b37d 100644
--- a/src/components/navigation/card/components/CardHeading.tsx
+++ b/src/components/navigation/card/components/CardHeading.tsx
@@ -21,9 +21,9 @@ const genHiddenText = (cardType: CareCardType): string => {
 
 const CareHeading = forwardRef<HTMLHeadingElement, HeadingLevelProps & { careType: CareCardType }>(
   ({ children, className, careType, headingLevel = 'h2', ...rest }, forwardedRef) => (
-    <div className="nhsuk-card--care__heading-container">
+    <div className="nhsuk-card__heading-container">
       <HeadingLevel
-        className={classNames('nhsuk-card--care__heading', className)}
+        className={classNames('nhsuk-card__heading', className)}
         headingLevel={headingLevel}
         ref={forwardedRef}
         {...rest}
@@ -51,11 +51,7 @@ export const CardHeading = forwardRef<HTMLHeadingElement, HeadingLevelProps>(
 
     return (
       <HeadingLevel
-        className={classNames(
-          'nhsuk-card__heading',
-          { 'nhsuk-card__heading--feature': cardType === 'feature' },
-          className,
-        )}
+        className={classNames('nhsuk-card__heading', className)}
         headingLevel={headingLevel}
         ref={forwardedRef}
         {...rest}
diff --git a/src/util/types/NHSUKTypes.ts b/src/util/types/NHSUKTypes.ts
index 77259880..c5ee9113 100644
--- a/src/util/types/NHSUKTypes.ts
+++ b/src/util/types/NHSUKTypes.ts
@@ -6,7 +6,7 @@ export type InputWidth = '2' | '3' | '4' | '5' | '10' | '20' | '30' | 2 | 3 | 4
 
 export type CareCardType = 'non-urgent' | 'urgent' | 'emergency';
 
-export type CardType = 'feature' | 'primary' | 'secondary' | CareCardType;
+export type CardType = 'clickable' | 'feature' | 'primary' | 'secondary' | CareCardType;
 
 export type ColWidth =
   | 'full'

From addcd851038243ba9bdab3316371e0df75a12906 Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Tue, 16 Dec 2025 10:11:33 +0000
Subject: [PATCH 16/19] Add select divider support

---
 src/__tests__/index.test.ts                    |  1 +
 src/components/form-elements/select/Select.tsx |  6 +++++-
 stories/Form Elements/Select.stories.tsx       | 12 ++++++++++++
 3 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/__tests__/index.test.ts b/src/__tests__/index.test.ts
index 2e038628..9daf3b7f 100644
--- a/src/__tests__/index.test.ts
+++ b/src/__tests__/index.test.ts
@@ -111,6 +111,7 @@ describe('Index', () => {
       'Row',
       'SearchIcon',
       'Select',
+      'SelectDivider',
       'SelectOption',
       'SkipLink',
       'SummaryList',
diff --git a/src/components/form-elements/select/Select.tsx b/src/components/form-elements/select/Select.tsx
index e44caf83..eaaff3ad 100644
--- a/src/components/form-elements/select/Select.tsx
+++ b/src/components/form-elements/select/Select.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import classNames from 'classnames';
-import { forwardRef, type ComponentPropsWithoutRef } from 'react';
+import { forwardRef, type ComponentPropsWithoutRef, type FC } from 'react';
 
 import { FormGroup } from '#components/utils/index.js';
 import { type FormElementProps } from '#util/types/FormTypes.js';
@@ -27,13 +27,17 @@ const SelectComponent = forwardRef<HTMLSelectElement, SelectProps>(
   ),
 );
 
+export const SelectDivider: FC = () => <hr />;
+
 export const SelectOption = forwardRef<HTMLOptionElement, ComponentPropsWithoutRef<'option'>>(
   (props, forwardedRef) => <option ref={forwardedRef} {...props} />,
 );
 
 SelectComponent.displayName = 'Select';
+SelectDivider.displayName = 'Select.Divider';
 SelectOption.displayName = 'Select.Option';
 
 export const Select = Object.assign(SelectComponent, {
+  Divider: SelectDivider,
   Option: SelectOption,
 });
diff --git a/stories/Form Elements/Select.stories.tsx b/stories/Form Elements/Select.stories.tsx
index 7f096314..a0eb75f2 100644
--- a/stories/Form Elements/Select.stories.tsx	
+++ b/stories/Form Elements/Select.stories.tsx	
@@ -58,6 +58,18 @@ export const SelectWithErrorAndHintText: Story = {
   },
 };
 
+export const SelectWithDivider: Story = {
+  render: (args) => (
+    <Select {...args}>
+      <Select.Option value="first-name-ascending">First name (A to Z)</Select.Option>
+      <Select.Option value="first-name-descending">First name (Z to A)</Select.Option>
+      <Select.Divider />
+      <Select.Option value="last-name-ascending">Last name (A to Z)</Select.Option>
+      <Select.Option value="last-name-descending">Last name (Z to A)</Select.Option>
+    </Select>
+  ),
+};
+
 export const SelectWithButton: Story = {
   args: {
     formGroupProps: {

From 0bd461d93e8fa2ed033c7324fbe67a0deacdeb18 Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Tue, 16 Dec 2025 10:03:08 +0000
Subject: [PATCH 17/19] Update changelog

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

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8fe1314d..c2ec28a0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,16 @@
 # NHS.UK React components
 
+## Unreleased
+
+This version provides support for NHS.UK frontend v10.2 and includes:
+
+- [Password input component](https://service-manual.nhs.uk/design-system/components/password-input)
+- [Smaller and inline buttons](https://service-manual.nhs.uk/design-system/components/buttons#smaller-buttons)
+- [Text input styles for codes and sequences](https://service-manual.nhs.uk/design-system/components/text-input#codes-and-sequences)
+- [Select](https://service-manual.nhs.uk/design-system/components/select) dividers using `<Select.Divider />`
+
+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.4 - 5 November 2025
 
 This version provides support for NHS.UK frontend v10.1 and includes:

From 9e23474950309d4a6804c3a0a89c6ec84e6465e0 Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Tue, 16 Dec 2025 10:03:36 +0000
Subject: [PATCH 18/19] Update upgrade guide

---
 docs/upgrade-to-6.0.md | 60 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 60 insertions(+)

diff --git a/docs/upgrade-to-6.0.md b/docs/upgrade-to-6.0.md
index 9c002616..1c780090 100644
--- a/docs/upgrade-to-6.0.md
+++ b/docs/upgrade-to-6.0.md
@@ -18,10 +18,70 @@ The updated [header](https://service-manual.nhs.uk/design-system/components/head
 - update NHS logo in the header to have higher contrast when focused
 - refactor CSS classes and BEM naming, use hidden attributes instead of modifier classes, use generic search element
 
+#### Use the password input component to help users accessibly enter passwords
+
+The [password input](https://service-manual.nhs.uk/design-system/components/password-input) component from NHS.UK frontend v10.2 allows users to choose:
+
+- whether their passwords are visible or not
+- to enter their passwords in plain text
+
+This helps users use longer and more complex passwords without needing to remember what they've already typed.
+
 #### Smaller versions of radio buttons and checkboxes
 
 You can now use smaller versions of the [radios](https://service-manual.nhs.uk/design-system/components/radios) and [checkboxes](https://service-manual.nhs.uk/design-system/components/checkboxes) components by adding the `small` prop.
 
+#### Smaller versions of buttons
+
+You can now use smaller versions of [buttons](https://service-manual.nhs.uk/design-system/components/buttons) by adding the `small` prop.
+
+#### Add inline buttons to text inputs and select menus
+
+You can now add inline buttons to text inputs and select menus using the `formGroupProps.afterInput` prop.
+
+```jsx
+<TextInput
+  formGroupProps={{
+    afterInput: () => (
+      <Button secondary small>
+        Search
+      </Button>
+    ),
+  }},
+/>
+```
+
+#### Add a 'code' prop for text inputs that accept codes and sequences
+
+We've added a new `code` prop for the [text input](https://service-manual.nhs.uk/design-system/components/text-input) component. This improves readability of text inputs that receive codes and sequences (like NHS numbers, security codes or booking references).
+
+```patch
+  <TextInput
+    label="What is your NHS number?"
+    labelProps={{ isPageHeading: true, size: 'l' }}
+    inputMode="numeric"
+    spellCheck="false"
+    width="10"
++   code
+  />
+```
+
+#### Add a 'divider' between select options
+
+Newer browsers support [using `<hr>` (horizontal rule) elements inside a `<select>` element](https://developer.chrome.com/blog/hr-in-select/) to help visually break up options for better readability.
+
+We've added a new `<Select.Divider />` child component for select menus to support this feature. For example:
+
+```patch
+  <Select>
+    <Select.Option value="first-name-ascending">First name (A to Z)</Select.Option>
+    <Select.Option value="first-name-descending">First name (Z to A)</Select.Option>
++   <Select.Divider />
+    <Select.Option value="last-name-ascending">Last name (A to Z)</Select.Option>
+    <Select.Option value="last-name-descending">Last name (Z to A)</Select.Option>
+  </Select>
+```
+
 ### Numbered pagination component
 
 The [pagination](https://service-manual.nhs.uk/design-system/components/pagination) component from NHS.UK frontend v10.1 has been updated to support numbered pagination:

From 504718a6f9db47b1ec3d1c97d6058a84867811c5 Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Tue, 16 Dec 2025 10:19:55 +0000
Subject: [PATCH 19/19] Reduce duplicate button code

---
 .../form-elements/button/Button.tsx           | 47 ++++++++-----------
 1 file changed, 20 insertions(+), 27 deletions(-)

diff --git a/src/components/form-elements/button/Button.tsx b/src/components/form-elements/button/Button.tsx
index bba85b60..d2fb207e 100644
--- a/src/components/form-elements/button/Button.tsx
+++ b/src/components/form-elements/button/Button.tsx
@@ -14,29 +14,38 @@ import {
 
 import { type AsElementLink } from '#util/types/LinkTypes.js';
 
-export interface ButtonProps extends AsElementLink<HTMLButtonElement> {
+export interface ButtonProps extends ButtonBaseProps, AsElementLink<HTMLButtonElement> {
   href?: never;
-  secondary?: boolean;
-  reverse?: boolean;
-  warning?: boolean;
-  login?: boolean;
-  small?: boolean;
   as?: 'button';
-  preventDoubleClick?: boolean;
 }
 
-export interface ButtonLinkProps extends AsElementLink<HTMLAnchorElement> {
+export interface ButtonLinkProps extends ButtonBaseProps, AsElementLink<HTMLAnchorElement> {
   href: string;
   type?: never;
+  as?: 'a';
+}
+
+interface ButtonBaseProps {
   secondary?: boolean;
   reverse?: boolean;
   warning?: boolean;
   login?: boolean;
   small?: boolean;
-  as?: 'a';
   preventDoubleClick?: boolean;
 }
 
+function getButtonClassNames(props: ButtonProps | ButtonLinkProps) {
+  return classNames(
+    'nhsuk-button',
+    { 'nhsuk-button--secondary': props.secondary },
+    { 'nhsuk-button--reverse': props.reverse },
+    { 'nhsuk-button--warning': props.warning },
+    { 'nhsuk-button--login': props.login },
+    { 'nhsuk-button--small': props.small },
+    props.className,
+  );
+}
+
 const ButtonComponent = forwardRef<HTMLButtonElement, ButtonProps>((props, forwardedRef) => {
   const {
     className,
@@ -76,15 +85,7 @@ const ButtonComponent = forwardRef<HTMLButtonElement, ButtonProps>((props, forwa
 
   return (
     <Element
-      className={classNames(
-        'nhsuk-button',
-        { 'nhsuk-button--secondary': secondary },
-        { 'nhsuk-button--reverse': reverse },
-        { 'nhsuk-button--warning': warning },
-        { 'nhsuk-button--login': login },
-        { 'nhsuk-button--small': small },
-        className,
-      )}
+      className={getButtonClassNames(props)}
       data-module="nhsuk-button"
       data-prevent-double-click={preventDoubleClick === true ? 'true' : undefined}
       disabled={disabled}
@@ -142,15 +143,7 @@ const ButtonLinkComponent = forwardRef<HTMLAnchorElement, ButtonLinkProps>(
 
     return (
       <Element
-        className={classNames(
-          'nhsuk-button',
-          { 'nhsuk-button--secondary': secondary },
-          { 'nhsuk-button--reverse': reverse },
-          { 'nhsuk-button--warning': warning },
-          { 'nhsuk-button--login': login },
-          { 'nhsuk-button--small': small },
-          className,
-        )}
+        className={getButtonClassNames(props)}
         data-module="nhsuk-button"
         data-prevent-double-click={preventDoubleClick === true ? 'true' : undefined}
         role="button"