diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8fe1314da..c2ec28a00 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:
diff --git a/docs/upgrade-to-6.0.md b/docs/upgrade-to-6.0.md
index 9c0026167..3ed03af05 100644
--- a/docs/upgrade-to-6.0.md
+++ b/docs/upgrade-to-6.0.md
@@ -18,10 +18,76 @@ 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.
+
+#### Secondary buttons with solid white background
+
+By default, the secondary button is transparent and has no colour.
+
+You can now make the [button](https://service-manual.nhs.uk/design-system/components/button) component white when you use it on darker backgrounds by adding the `secondarySolid` 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:
diff --git a/package.json b/package.json
index 5375d9e0a..5f632a13b 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/src/__tests__/index.test.ts b/src/__tests__/index.test.ts
index c6a86f285..9daf3b7ff 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',
@@ -110,6 +111,7 @@ describe('Index', () => {
       'Row',
       'SearchIcon',
       'Select',
+      'SelectDivider',
       'SelectOption',
       'SkipLink',
       'SummaryList',
diff --git a/src/components/content-presentation/do-and-dont-list/DoAndDontList.tsx b/src/components/content-presentation/do-and-dont-list/DoAndDontList.tsx
index 38280ca2e..be6aeb060 100644
--- a/src/components/content-presentation/do-and-dont-list/DoAndDontList.tsx
+++ b/src/components/content-presentation/do-and-dont-list/DoAndDontList.tsx
@@ -20,12 +20,14 @@ const DoAndDontListComponent = forwardRef<HTMLDivElement, DoAndDontListProps>(
       <HeadingLevel className="nhsuk-do-dont-list__label" headingLevel={headingLevel}>
         {heading || (listType === 'do' ? 'Do' : "Don't")}
       </HeadingLevel>
+      {/* eslint-disable-next-line jsx-a11y/no-redundant-roles */}
       <ul
         className={classNames(
           'nhsuk-list',
           { 'nhsuk-list--tick': listType === 'do' },
           { 'nhsuk-list--cross': listType === 'dont' },
         )}
+        role="list"
       >
         <DoAndDontListContext.Provider value={listType}>{children}</DoAndDontListContext.Provider>
       </ul>
diff --git a/src/components/content-presentation/do-and-dont-list/__tests__/__snapshots__/DoAndDontList.test.tsx.snap b/src/components/content-presentation/do-and-dont-list/__tests__/__snapshots__/DoAndDontList.test.tsx.snap
index 549880e7e..8dd10330e 100644
--- a/src/components/content-presentation/do-and-dont-list/__tests__/__snapshots__/DoAndDontList.test.tsx.snap
+++ b/src/components/content-presentation/do-and-dont-list/__tests__/__snapshots__/DoAndDontList.test.tsx.snap
@@ -33,6 +33,7 @@ exports[`DoAndDontList list type "do" matches snapshot (via server): client 1`]
     </h3>
     <ul
       class="nhsuk-list nhsuk-list--tick"
+      role="list"
     />
   </div>
 </div>
@@ -50,6 +51,7 @@ exports[`DoAndDontList list type "do" matches snapshot (via server): server 1`]
     </h3>
     <ul
       class="nhsuk-list nhsuk-list--tick"
+      role="list"
     />
   </div>
 </div>
@@ -67,6 +69,7 @@ exports[`DoAndDontList list type "do" matches snapshot: DoDontList-Do 1`] = `
     </h3>
     <ul
       class="nhsuk-list nhsuk-list--tick"
+      role="list"
     />
   </div>
 </div>
@@ -84,6 +87,7 @@ exports[`DoAndDontList list type "dont" matches snapshot (via server): client 1`
     </h3>
     <ul
       class="nhsuk-list nhsuk-list--cross"
+      role="list"
     />
   </div>
 </div>
@@ -101,6 +105,7 @@ exports[`DoAndDontList list type "dont" matches snapshot (via server): server 1`
     </h3>
     <ul
       class="nhsuk-list nhsuk-list--cross"
+      role="list"
     />
   </div>
 </div>
@@ -118,6 +123,7 @@ exports[`DoAndDontList list type "dont" matches snapshot: DoDontList-Dont 1`] =
     </h3>
     <ul
       class="nhsuk-list nhsuk-list--cross"
+      role="list"
     />
   </div>
 </div>
diff --git a/src/components/form-elements/button/Button.tsx b/src/components/form-elements/button/Button.tsx
index 0d03b9c52..2faf14b61 100644
--- a/src/components/form-elements/button/Button.tsx
+++ b/src/components/form-elements/button/Button.tsx
@@ -14,33 +14,51 @@ 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;
   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;
+  secondarySolid?: boolean;
   reverse?: boolean;
   warning?: boolean;
-  as?: 'a';
+  login?: boolean;
+  small?: boolean;
   preventDoubleClick?: boolean;
 }
 
+function getButtonClassNames(props: ButtonProps | ButtonLinkProps) {
+  return classNames(
+    'nhsuk-button',
+    { 'nhsuk-button--secondary': props.secondary },
+    { 'nhsuk-button--secondary-solid': props.secondarySolid },
+    { '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,
     asElement: Element = 'button',
     disabled,
     secondary,
+    secondarySolid,
     reverse,
     warning,
+    login,
+    small,
     type = 'submit',
     preventDoubleClick,
     onClick,
@@ -70,13 +88,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 },
-        className,
-      )}
+      className={getButtonClassNames(props)}
       data-module="nhsuk-button"
       data-prevent-double-click={preventDoubleClick === true ? 'true' : undefined}
       disabled={disabled}
@@ -102,8 +114,11 @@ const ButtonLinkComponent = forwardRef<HTMLAnchorElement, ButtonLinkProps>(
       className,
       asElement: Element = 'a',
       secondary,
+      secondarySolid,
       reverse,
       warning,
+      login,
+      small,
       preventDoubleClick,
       onClick,
       ...rest
@@ -132,13 +147,7 @@ const ButtonLinkComponent = forwardRef<HTMLAnchorElement, ButtonLinkProps>(
 
     return (
       <Element
-        className={classNames(
-          'nhsuk-button',
-          { 'nhsuk-button--secondary': secondary },
-          { 'nhsuk-button--reverse': reverse },
-          { 'nhsuk-button--warning': warning },
-          className,
-        )}
+        className={getButtonClassNames(props)}
         data-module="nhsuk-button"
         data-prevent-double-click={preventDoubleClick === true ? 'true' : undefined}
         role="button"
diff --git a/src/components/form-elements/button/__tests__/Button.test.tsx b/src/components/form-elements/button/__tests__/Button.test.tsx
index e529b6cc9..f797ae57c 100644
--- a/src/components/form-elements/button/__tests__/Button.test.tsx
+++ b/src/components/form-elements/button/__tests__/Button.test.tsx
@@ -4,6 +4,39 @@ import { Button } from '..';
 
 import { renderClient, renderServer } from '#util/components';
 
+const buttonTypes = [
+  {
+    type: 'secondary',
+    text: 'Find my location',
+    className: 'nhsuk-button--secondary',
+  },
+  {
+    type: 'secondarySolid',
+    text: 'Find my location',
+    className: 'nhsuk-button--secondary-solid',
+  },
+  {
+    type: 'reverse',
+    text: 'Log out',
+    className: 'nhsuk-button--reverse',
+  },
+  {
+    type: 'warning',
+    text: 'Yes, delete this vaccine',
+    className: 'nhsuk-button--warning',
+  },
+  {
+    type: 'login',
+    text: 'Continue to NHS login',
+    className: 'nhsuk-button--login',
+  },
+  {
+    type: 'small',
+    text: 'Search',
+    className: 'nhsuk-button--small',
+  },
+];
+
 describe('Button', () => {
   it('matches snapshot', async () => {
     const { container } = await renderClient(<Button type="submit">Save and continue</Button>, {
@@ -108,66 +141,42 @@ describe('Button', () => {
       expect(container).toMatchSnapshot('DisabledButton');
     });
 
-    it('adds correct attributes for button type', async () => {
+    it('adds aria props and disabled to disabled button', async () => {
       const { modules } = await renderClient(<Button disabled>Save and continue</Button>, {
         moduleName: 'nhsuk-button',
       });
 
       const [buttonEl] = modules;
+
       expect(buttonEl).toBeDisabled();
+      expect(buttonEl).toHaveAttribute('type', 'submit');
+      expect(buttonEl).toHaveAttribute('aria-disabled', 'true');
     });
   });
 
-  describe('secondary', () => {
-    it('matches snapshot', async () => {
-      const { container } = await renderClient(<Button secondary>Save and continue</Button>, {
-        moduleName: 'nhsuk-button',
-      });
-
-      expect(container).toMatchSnapshot('SecondaryButton');
-    });
+  describe('button types', () => {
+    describe.each(buttonTypes)('$type', ({ type, className }) => {
+      it('matches snapshot', async () => {
+        const { container } = await renderClient(
+          <Button {...{ [type]: true }}>Find my location</Button>,
+          { moduleName: 'nhsuk-button' },
+        );
 
-    it('adds correct classes for button type', async () => {
-      const { modules } = await renderClient(<Button secondary>Save and continue</Button>, {
-        moduleName: 'nhsuk-button',
+        expect(container).toMatchSnapshot();
       });
 
-      const [buttonEl] = modules;
-      expect(buttonEl).toHaveClass('nhsuk-button--secondary');
-    });
-  });
+      it(`adds correct classes for type - ${type}`, async () => {
+        const { modules } = await renderClient(
+          <Button {...{ [type]: true }}>Find my location</Button>,
+          { moduleName: 'nhsuk-button' },
+        );
 
-  describe('reverse', () => {
-    it('matches snapshot', async () => {
-      const { container } = await renderClient(<Button reverse>Save and continue</Button>, {
-        moduleName: 'nhsuk-button',
+        const [buttonEl] = modules;
+        expect(buttonEl).toHaveClass(className);
       });
-
-      expect(container).toMatchSnapshot('ReverseButton');
-    });
-
-    it('adds correct classes for button type', async () => {
-      const { modules } = await renderClient(<Button reverse>Save and continue</Button>, {
-        moduleName: 'nhsuk-button',
-      });
-
-      const [buttonEl] = modules;
-      expect(buttonEl).toHaveClass('nhsuk-button--reverse');
     });
   });
 
-  it('adds aria props and disabled to disabled button', async () => {
-    const { modules } = await renderClient(<Button disabled>Save and continue</Button>, {
-      moduleName: 'nhsuk-button',
-    });
-
-    const [buttonEl] = modules;
-
-    expect(buttonEl).toBeDisabled();
-    expect(buttonEl).toHaveAttribute('type', 'submit');
-    expect(buttonEl).toHaveAttribute('aria-disabled', 'true');
-  });
-
   it('preventDoubleClick calls debounced function', async () => {
     jest.useFakeTimers();
     const clickHandler = jest.fn();
@@ -235,53 +244,28 @@ describe('Button as a link', () => {
   });
 
   describe('button types', () => {
-    describe('secondary', () => {
+    describe.each(buttonTypes)('$type', ({ type, className }) => {
       it('matches snapshot', async () => {
         const { container } = await renderClient(
-          <Button href="/" secondary>
+          <Button href="/" {...{ [type]: true }}>
             Find my location
           </Button>,
           { moduleName: 'nhsuk-button' },
         );
 
-        expect(container).toMatchSnapshot('SecondaryButton');
+        expect(container).toMatchSnapshot();
       });
 
-      it('adds correct classes for type - secondary', async () => {
+      it(`adds correct classes for type - ${type}`, async () => {
         const { modules } = await renderClient(
-          <Button href="/" secondary>
+          <Button href="/" {...{ [type]: true }}>
             Find my location
           </Button>,
           { moduleName: 'nhsuk-button' },
         );
 
         const [buttonEl] = modules;
-        expect(buttonEl).toHaveClass('nhsuk-button--secondary');
-      });
-    });
-
-    describe('reverse', () => {
-      it('matches snapshot', async () => {
-        const { container } = await renderClient(
-          <Button href="/" reverse>
-            Log out
-          </Button>,
-          { moduleName: 'nhsuk-button' },
-        );
-
-        expect(container).toMatchSnapshot('ReverseButton');
-      });
-
-      it('adds correct classes for type - reverse', async () => {
-        const { modules } = await renderClient(
-          <Button href="/" reverse>
-            Log out
-          </Button>,
-          { moduleName: 'nhsuk-button' },
-        );
-
-        const [buttonEl] = modules;
-        expect(buttonEl).toHaveClass('nhsuk-button--reverse');
+        expect(buttonEl).toHaveClass(className);
       });
     });
   });
diff --git a/src/components/form-elements/button/__tests__/__snapshots__/Button.test.tsx.snap b/src/components/form-elements/button/__tests__/__snapshots__/Button.test.tsx.snap
index 6fb5f9597..a7841f2ac 100644
--- a/src/components/form-elements/button/__tests__/__snapshots__/Button.test.tsx.snap
+++ b/src/components/form-elements/button/__tests__/__snapshots__/Button.test.tsx.snap
@@ -1,6 +1,21 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
-exports[`Button as a link button types reverse matches snapshot: ReverseButton 1`] = `
+exports[`Button as a link button types login matches snapshot 1`] = `
+<div>
+  <a
+    class="nhsuk-button nhsuk-button--login"
+    data-module="nhsuk-button"
+    data-nhsuk-button-init=""
+    draggable="false"
+    href="/"
+    role="button"
+  >
+    Find my location
+  </a>
+</div>
+`;
+
+exports[`Button as a link button types reverse matches snapshot 1`] = `
 <div>
   <a
     class="nhsuk-button nhsuk-button--reverse"
@@ -10,12 +25,12 @@ exports[`Button as a link button types reverse matches snapshot: ReverseButton 1
     href="/"
     role="button"
   >
-    Log out
+    Find my location
   </a>
 </div>
 `;
 
-exports[`Button as a link button types secondary matches snapshot: SecondaryButton 1`] = `
+exports[`Button as a link button types secondary matches snapshot 1`] = `
 <div>
   <a
     class="nhsuk-button nhsuk-button--secondary"
@@ -30,6 +45,51 @@ exports[`Button as a link button types secondary matches snapshot: SecondaryButt
 </div>
 `;
 
+exports[`Button as a link button types secondarySolid matches snapshot 1`] = `
+<div>
+  <a
+    class="nhsuk-button nhsuk-button--secondary-solid"
+    data-module="nhsuk-button"
+    data-nhsuk-button-init=""
+    draggable="false"
+    href="/"
+    role="button"
+  >
+    Find my location
+  </a>
+</div>
+`;
+
+exports[`Button as a link button types small matches snapshot 1`] = `
+<div>
+  <a
+    class="nhsuk-button nhsuk-button--small"
+    data-module="nhsuk-button"
+    data-nhsuk-button-init=""
+    draggable="false"
+    href="/"
+    role="button"
+  >
+    Find my location
+  </a>
+</div>
+`;
+
+exports[`Button as a link button types warning matches snapshot 1`] = `
+<div>
+  <a
+    class="nhsuk-button nhsuk-button--warning"
+    data-module="nhsuk-button"
+    data-nhsuk-button-init=""
+    draggable="false"
+    href="/"
+    role="button"
+  >
+    Find my location
+  </a>
+</div>
+`;
+
 exports[`Button as a link matches snapshot: LinkButton 1`] = `
 <div>
   <a
@@ -45,39 +105,92 @@ exports[`Button as a link matches snapshot: LinkButton 1`] = `
 </div>
 `;
 
-exports[`Button disabled matches snapshot: DisabledButton 1`] = `
+exports[`Button button types login matches snapshot 1`] = `
 <div>
   <button
-    aria-disabled="true"
-    class="nhsuk-button"
+    class="nhsuk-button nhsuk-button--login"
     data-module="nhsuk-button"
     data-nhsuk-button-init=""
-    disabled=""
     type="submit"
   >
-    Save and continue
+    Find my location
   </button>
 </div>
 `;
 
-exports[`Button matches snapshot (via server): client 1`] = `
+exports[`Button button types reverse matches snapshot 1`] = `
 <div>
   <button
-    class="nhsuk-button"
+    class="nhsuk-button nhsuk-button--reverse"
     data-module="nhsuk-button"
     data-nhsuk-button-init=""
     type="submit"
   >
-    Save and continue
+    Find my location
   </button>
 </div>
 `;
 
-exports[`Button matches snapshot (via server): server 1`] = `
+exports[`Button button types secondary matches snapshot 1`] = `
+<div>
+  <button
+    class="nhsuk-button nhsuk-button--secondary"
+    data-module="nhsuk-button"
+    data-nhsuk-button-init=""
+    type="submit"
+  >
+    Find my location
+  </button>
+</div>
+`;
+
+exports[`Button button types secondarySolid matches snapshot 1`] = `
 <div>
   <button
+    class="nhsuk-button nhsuk-button--secondary-solid"
+    data-module="nhsuk-button"
+    data-nhsuk-button-init=""
+    type="submit"
+  >
+    Find my location
+  </button>
+</div>
+`;
+
+exports[`Button button types small matches snapshot 1`] = `
+<div>
+  <button
+    class="nhsuk-button nhsuk-button--small"
+    data-module="nhsuk-button"
+    data-nhsuk-button-init=""
+    type="submit"
+  >
+    Find my location
+  </button>
+</div>
+`;
+
+exports[`Button button types warning matches snapshot 1`] = `
+<div>
+  <button
+    class="nhsuk-button nhsuk-button--warning"
+    data-module="nhsuk-button"
+    data-nhsuk-button-init=""
+    type="submit"
+  >
+    Find my location
+  </button>
+</div>
+`;
+
+exports[`Button disabled matches snapshot: DisabledButton 1`] = `
+<div>
+  <button
+    aria-disabled="true"
     class="nhsuk-button"
     data-module="nhsuk-button"
+    data-nhsuk-button-init=""
+    disabled=""
     type="submit"
   >
     Save and continue
@@ -85,7 +198,7 @@ exports[`Button matches snapshot (via server): server 1`] = `
 </div>
 `;
 
-exports[`Button matches snapshot 1`] = `
+exports[`Button matches snapshot (via server): client 1`] = `
 <div>
   <button
     class="nhsuk-button"
@@ -98,12 +211,11 @@ exports[`Button matches snapshot 1`] = `
 </div>
 `;
 
-exports[`Button reverse matches snapshot: ReverseButton 1`] = `
+exports[`Button matches snapshot (via server): server 1`] = `
 <div>
   <button
-    class="nhsuk-button nhsuk-button--reverse"
+    class="nhsuk-button"
     data-module="nhsuk-button"
-    data-nhsuk-button-init=""
     type="submit"
   >
     Save and continue
@@ -111,10 +223,10 @@ exports[`Button reverse matches snapshot: ReverseButton 1`] = `
 </div>
 `;
 
-exports[`Button secondary matches snapshot: SecondaryButton 1`] = `
+exports[`Button matches snapshot 1`] = `
 <div>
   <button
-    class="nhsuk-button nhsuk-button--secondary"
+    class="nhsuk-button"
     data-module="nhsuk-button"
     data-nhsuk-button-init=""
     type="submit"
diff --git a/src/components/form-elements/character-count/CharacterCount.tsx b/src/components/form-elements/character-count/CharacterCount.tsx
index 22e9980cf..2a29ea262 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,
@@ -70,7 +73,7 @@ export const CharacterCount = forwardRef<HTMLTextAreaElement, CharacterCountProp
                 className,
               )}
               id={id}
-              aria-describedby={`${id}-info ${ariaDescribedBy}`}
+              aria-describedby={ariaDescribedBy ? `${id}-info ${ariaDescribedBy}` : `${id}-info`}
               ref={forwardedRef}
               {...rest}
             />
diff --git a/src/components/form-elements/character-count/__tests__/CharacterCount.test.tsx b/src/components/form-elements/character-count/__tests__/CharacterCount.test.tsx
index cb4d8221c..44122b23e 100644
--- a/src/components/form-elements/character-count/__tests__/CharacterCount.test.tsx
+++ b/src/components/form-elements/character-count/__tests__/CharacterCount.test.tsx
@@ -129,4 +129,41 @@ describe('Character Count', () => {
     expect(characterCountEl).not.toHaveAttribute('data-maxwords');
     expect(characterCountEl).toHaveAttribute('data-threshold', '50');
   });
+
+  it('sets textarea aria-describedby attribute without hint text', async () => {
+    const { container } = await renderClient(
+      <CharacterCount
+        label="Can you provide more detail?"
+        labelProps={{ isPageHeading: true, size: 'l' }}
+        id="more-detail"
+        name="more-detail"
+        maxLength={200}
+        rows={5}
+      />,
+      { moduleName: 'nhsuk-character-count' },
+    );
+
+    const textareaEl = container.querySelector('textarea');
+
+    expect(textareaEl).toHaveAttribute('aria-describedby', 'more-detail-info');
+  });
+
+  it('sets textarea aria-describedby attribute with hint text', async () => {
+    const { container } = await renderClient(
+      <CharacterCount
+        label="Can you provide more detail?"
+        labelProps={{ isPageHeading: true, size: 'l' }}
+        hint="Do not include personal information like your name, date of birth or NHS number"
+        id="more-detail"
+        name="more-detail"
+        maxLength={200}
+        rows={5}
+      />,
+      { moduleName: 'nhsuk-character-count' },
+    );
+
+    const textareaEl = container.querySelector('textarea');
+
+    expect(textareaEl).toHaveAttribute('aria-describedby', 'more-detail-info more-detail--hint');
+  });
 });
diff --git a/src/components/form-elements/checkboxes/Checkboxes.tsx b/src/components/form-elements/checkboxes/Checkboxes.tsx
index 5e4902692..28e1ab040 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 a2cc66a63..84d401abd 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 0836e23c5..b34726abf 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 55e02bafc..da36f9ad1 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/index.ts b/src/components/form-elements/index.ts
index 23b427ffa..46a3cde8d 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 000000000..4c4ee1d84
--- /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 000000000..fd1820531
--- /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 000000000..595624c9b
--- /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 000000000..8452522a3
--- /dev/null
+++ b/src/components/form-elements/password-input/index.ts
@@ -0,0 +1 @@
+export * from './PasswordInput.js';
diff --git a/src/components/form-elements/radios/Radios.tsx b/src/components/form-elements/radios/Radios.tsx
index bc77d4e5a..62398ab6c 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 7dfff80a5..ceb668886 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 dbd47b538..eaaff3ad0 100644
--- a/src/components/form-elements/select/Select.tsx
+++ b/src/components/form-elements/select/Select.tsx
@@ -1,17 +1,19 @@
 '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';
 
-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)}
@@ -25,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/src/components/form-elements/text-input/TextInput.tsx b/src/components/form-elements/text-input/TextInput.tsx
index 64dcebc24..9aba917f3 100644
--- a/src/components/form-elements/text-input/TextInput.tsx
+++ b/src/components/form-elements/text-input/TextInput.tsx
@@ -7,15 +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}
@@ -28,14 +32,22 @@ const TextInputSuffix: FC<Pick<TextInputProps, 'suffix'>> = ({ suffix }) => (
   </div>
 );
 
-export const TextInput = forwardRef<HTMLInputElement, TextInputProps>((props, forwardedRef) => (
-  <FormGroup<TextInputProps> {...props} inputType="input">
-    {({ width, className, 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',
             { [`nhsuk-input--width-${width}`]: width },
+            { 'nhsuk-input--code': code },
             { 'nhsuk-input--error': error },
             className,
           )}
@@ -43,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 450573e68..b5ffc1df4 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 1a47453c3..de4cc2143 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/navigation/card/Card.tsx b/src/components/navigation/card/Card.tsx
index c337a555c..4e3551754 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 ce5c815a7..285e38e2a 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 a4ab772b3..bb1716ff7 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 e0e9d1c61..3975f15b9 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 9646fc118..c579b37dd 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/components/utils/FormGroup.tsx b/src/components/utils/FormGroup.tsx
index f33f7e14a..632114d2a 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,59 +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,
-    id,
-    legend,
-    legendProps,
-    fieldsetProps,
-    labelProps,
-    error,
-    hintProps,
-    errorProps,
-    formGroupProps,
-    inputType,
-    name,
-    'aria-describedby': ariaDescribedBy,
-    ...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();
@@ -85,6 +61,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,12 +74,18 @@ export const FormGroup = <T extends BaseFormElementRenderProps>(
     ariaDescribedByIds.push(errorID);
   }
 
+  // Update aria-describedby with new IDs
+  ariaDescribedBy = ariaDescribedByIds.join(' ') || undefined;
+
+  const { beforeInput, afterInput, ...formGroupRest } = formGroupProps ?? {};
+
   const childProps = {
-    error,
-    name: name ?? elementID,
-    id: elementID,
     ...rest,
-  } as FormElementRenderProps<T>;
+    error,
+    'id': elementID,
+    'name': name ?? elementID,
+    'aria-describedby': !hasFieldset ? ariaDescribedBy : undefined,
+  } as FormElementRenderProps<P, T>;
 
   useEffect(() => {
     passError(elementID, disableErrorFromComponents ? false : Boolean(error));
@@ -114,17 +97,25 @@ 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 ? (
-        <Fieldset {...fieldsetProps} aria-describedby={ariaDescribedByIds.join(' ') || undefined}>
+        <Fieldset {...fieldsetProps} aria-describedby={ariaDescribedBy}>
           <Legend {...legendProps}>{legend}</Legend>
           <HintText id={hintID} {...hintProps}>
             {hint}
@@ -132,7 +123,7 @@ export const FormGroup = <T extends BaseFormElementRenderProps>(
           <ErrorMessage id={errorID} {...errorProps}>
             {error}
           </ErrorMessage>
-          {children(childProps)}
+          {input}
         </Fieldset>
       ) : (
         <>
@@ -145,10 +136,14 @@ export const FormGroup = <T extends BaseFormElementRenderProps>(
           <ErrorMessage id={errorID} {...errorProps}>
             {error}
           </ErrorMessage>
-          {children({
-            ...childProps,
-            'aria-describedby': ariaDescribedByIds.join(' ') || undefined,
-          })}
+          {(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 d62e938bb..5fb41ad2e 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 4bd74b32f..33aa7f985 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;
+};
diff --git a/src/util/types/NHSUKTypes.ts b/src/util/types/NHSUKTypes.ts
index 77259880b..c5ee9113e 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'
diff --git a/stories/Content Presentation/Tabs.stories.tsx b/stories/Content Presentation/Tabs.stories.tsx
index 6dbc2b50c..6696911be 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>
   ),
diff --git a/stories/Form Elements/Button.stories.tsx b/stories/Form Elements/Button.stories.tsx
index 8c90fd795..e8c83082f 100644
--- a/stories/Form Elements/Button.stories.tsx	
+++ b/stories/Form Elements/Button.stories.tsx	
@@ -49,12 +49,77 @@ 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 SmallPrimary: Story = {
+  args: {
+    small: true,
+    children: 'Save and continue',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    secondary: true,
+    children: 'Find my location',
+  },
+};
+
+export const SmallSecondary: Story = {
+  args: {
+    secondary: true,
+    small: true,
+    children: 'Find my location',
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    warning: true,
+    children: 'Yes, delete this vaccine',
+  },
+};
+
+export const SmallWarning: Story = {
+  args: {
+    warning: true,
+    small: true,
+    children: 'Yes, delete this vaccine',
+  },
+};
+
+export const Login: Story = {
+  args: {
+    login: true,
+    children: 'Continue to NHS login',
+  },
+};
+
+export const SmallLogin: Story = {
+  args: {
+    login: true,
+    small: true,
+    children: 'Continue to NHS login',
+  },
+};
+
+export const Reverse: Story = {
+  args: {
+    reverse: true,
+    children: 'Log out',
+  },
+};
+
+export const SmallReverse: Story = {
+  args: {
+    reverse: true,
+    small: 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 +141,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 +150,4 @@ export const PreventDoubleClickLinkButton: Story = {
     onClick: () => console.log(new Date()),
     children: 'Debounced Button as Link',
   },
-  render: (args) => <Button {...args} />,
 };
diff --git a/stories/Form Elements/PasswordInput.stories.tsx b/stories/Form Elements/PasswordInput.stories.tsx
new file mode 100644
index 000000000..555fd8171
--- /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',
+  },
+};
diff --git a/stories/Form Elements/Select.stories.tsx b/stories/Form Elements/Select.stories.tsx
index ddc0e998b..a0eb75f21 100644
--- a/stories/Form Elements/Select.stories.tsx	
+++ b/stories/Form Elements/Select.stories.tsx	
@@ -1,83 +1,96 @@
 import { type Meta, type StoryObj } from '@storybook/react-vite';
-import { useState } from 'react';
 
+import { Button } from '#components/form-elements/button/Button.js';
 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',
+    hint: 'This can be different to where you went before',
+    error: 'Select a location',
   },
-  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} />
-      </>
-    );
+};
+
+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: {
+      afterInput: () => (
+        <Button secondary small>
+          Search
+        </Button>
+      ),
+    },
   },
+};
 
-  name: 'Select With Error and Hint (String)',
+export const SelectWithButtonAndError: Story = {
+  args: {
+    error: 'Select a location',
+    formGroupProps: {
+      afterInput: () => (
+        <Button secondary small>
+          Search
+        </Button>
+      ),
+    },
+  },
 };
diff --git a/stories/Form Elements/TextInput.stories.tsx b/stories/Form Elements/TextInput.stories.tsx
index bfb6efff2..4e66f1d00 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> = {
@@ -7,8 +8,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 +23,127 @@ 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?',
+    code: true,
+    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',
+    code: true,
+    inputMode: 'numeric',
+    spellCheck: false,
+  },
+};
+
+export const WithErrorAndHintText: Story = {
+  args: {
+    label: 'What is your NHS number?',
+    error: 'Enter NHS number',
+    code: true,
+    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’.',
+    code: true,
+    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,
+  },
+};
+
+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>
+      ),
+    },
   },
 };
diff --git a/stories/Navigation/Card.stories.tsx b/stories/Navigation/Card.stories.tsx
index da9d84e13..8313e2375 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>
diff --git a/yarn.lock b/yarn.lock
index 12a08f38e..f57438714 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"