From b361863188aecd1e106ed857e38e43fb86604a6c Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Wed, 15 Oct 2025 17:42:14 +0100
Subject: [PATCH 1/6] Use `defaultValue` and `defaultChecked` without change
 handlers

---
 stories/Form Elements/Radios.stories.tsx | 6 +++---
 stories/Form Elements/Select.stories.tsx | 6 ++----
 2 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/stories/Form Elements/Radios.stories.tsx b/stories/Form Elements/Radios.stories.tsx
index 67c4dd63..34e75b68 100644
--- a/stories/Form Elements/Radios.stories.tsx	
+++ b/stories/Form Elements/Radios.stories.tsx	
@@ -19,7 +19,7 @@ export const StandardRadios: Story = {
       id="standard-example"
     >
       <Radios.Item value="yes">Yes</Radios.Item>
-      <Radios.Item value="no" checked>
+      <Radios.Item value="no" defaultChecked>
         No
       </Radios.Item>
     </Radios>
@@ -37,7 +37,7 @@ export const InlineRadios: Story = {
       inline
     >
       <Radios.Item value="yes">Yes</Radios.Item>
-      <Radios.Item value="no" checked>
+      <Radios.Item value="no" defaultChecked>
         No
       </Radios.Item>
     </Radios>
@@ -168,7 +168,7 @@ export const RadiosWithError: Story = {
           <Radios.Item id="example-1" value="yes">
             Yes
           </Radios.Item>
-          <Radios.Item id="example-2" value="no" checked>
+          <Radios.Item id="example-2" value="no" defaultChecked>
             No
           </Radios.Item>
         </Radios>
diff --git a/stories/Form Elements/Select.stories.tsx b/stories/Form Elements/Select.stories.tsx
index bfb6ed24..b8a9dcc1 100644
--- a/stories/Form Elements/Select.stories.tsx	
+++ b/stories/Form Elements/Select.stories.tsx	
@@ -11,11 +11,9 @@ type Story = StoryObj<typeof Select>;
 
 export const Standard: Story = {
   render: (args) => (
-    <Select label="Label text goes here" labelProps={{ size: 'l' }}>
+    <Select label="Label text goes here" labelProps={{ size: 'l' }} defaultValue="2">
       <Select.Option value="1">NHS.UK frontend option 1</Select.Option>
-      <Select.Option value="2" selected>
-        NHS.UK frontend option 2
-      </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>

From 9da0890f40fe25663037e44ed0ad4e87c63502a3 Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Wed, 15 Oct 2025 17:56:53 +0100
Subject: [PATCH 2/6] Update form examples with `isPageHeading`

---
 stories/Form Elements/Checkboxes.stories.tsx | 31 +++++---------------
 stories/Form Elements/DateInput.stories.tsx  | 16 +++++-----
 stories/Form Elements/Fieldset.stories.tsx   | 30 ++++++++++---------
 stories/Form Elements/Label.stories.tsx      |  8 ++---
 stories/Form Elements/Radios.stories.tsx     | 14 ++++-----
 stories/Form Elements/Select.stories.tsx     | 20 ++++++++++---
 stories/Form Elements/TextInput.stories.tsx  | 19 +-----------
 stories/Form Elements/Textarea.stories.tsx   | 13 ++------
 8 files changed, 61 insertions(+), 90 deletions(-)

diff --git a/stories/Form Elements/Checkboxes.stories.tsx b/stories/Form Elements/Checkboxes.stories.tsx
index 54ea1909..747269e6 100644
--- a/stories/Form Elements/Checkboxes.stories.tsx	
+++ b/stories/Form Elements/Checkboxes.stories.tsx	
@@ -48,7 +48,7 @@ export const Standard: Story = {
     <form>
       <Checkboxes
         legend="What is your nationality?"
-        legendProps={{ size: 'l' }}
+        legendProps={{ isPageHeading: true, size: 'l' }}
         hint="If you have more than 1 nationality, select all options that are relevant to you"
         idPrefix={args.idPrefix}
         name="nationality"
@@ -65,7 +65,10 @@ export const Standard: Story = {
 export const WithHintText: Story = {
   render: (args) => (
     <form>
-      <Checkboxes legend="How do you want to sign in?" legendProps={{ size: 'l' }}>
+      <Checkboxes
+        legend="How do you want to sign in?"
+        legendProps={{ isPageHeading: true, size: 'l' }}
+      >
         <Checkboxes.Item
           id="government-gateway"
           name="gateway"
@@ -107,7 +110,7 @@ export const WithConditionalContent: Story = {
     <form>
       <Checkboxes
         legend="What types of waste do you transport regularly?"
-        legendProps={{ size: 'l' }}
+        legendProps={{ isPageHeading: true, size: 'l' }}
         hint="Select all that apply"
         id="waste"
         name="waste"
@@ -120,30 +123,12 @@ export const WithConditionalContent: Story = {
   ),
 };
 
-export const WithLegendAsPageHeading: Story = {
-  render: (args) => (
-    <form>
-      <Checkboxes
-        legend="Which types of waste do you transport regularly?"
-        legendProps={{ isPageHeading: true, size: 'l' }}
-        hint="Select all that apply"
-        id="waste"
-        name="waste"
-      >
-        <Checkboxes.Item value="animal">Waste from animal carcasses</Checkboxes.Item>
-        <Checkboxes.Item value="mines">Waste from mines or quarries</Checkboxes.Item>
-        <Checkboxes.Item value="farm">Farm or agricultural waste</Checkboxes.Item>
-      </Checkboxes>
-    </form>
-  ),
-};
-
 export const WithExclusiveNoneOption: Story = {
   render: (args) => (
     <form>
       <Checkboxes
         legend="Do you have any of these symptoms?"
-        legendProps={{ size: 'l' }}
+        legendProps={{ isPageHeading: true, size: 'l' }}
         hint="Select all the symptoms you have"
         id="symptoms"
         name="symptoms"
@@ -168,7 +153,7 @@ export const WithError: Story = {
       <form>
         <Checkboxes
           legend="Which types of waste do you transport regularly?"
-          legendProps={{ size: 'l' }}
+          legendProps={{ isPageHeading: true, size: 'l' }}
           hint="Select all that apply"
           error={error}
           id="waste"
diff --git a/stories/Form Elements/DateInput.stories.tsx b/stories/Form Elements/DateInput.stories.tsx
index 516f13a3..af162dc4 100644
--- a/stories/Form Elements/DateInput.stories.tsx	
+++ b/stories/Form Elements/DateInput.stories.tsx	
@@ -21,7 +21,7 @@ export const Standard: Story = {
       <h5>Component</h5>
       <DateInput
         legend="What is your date of birth?"
-        legendProps={{ size: 'l' }}
+        legendProps={{ isPageHeading: true, size: 'l' }}
         hint="For example, 15 3 1984"
         onChange={(e) => console.log(e.target.value)}
       />
@@ -41,7 +41,7 @@ export const StandardWithError: Story = {
       <h5>Component</h5>
       <DateInput
         legend="What is your date of birth?"
-        legendProps={{ size: 'l' }}
+        legendProps={{ isPageHeading: true, size: 'l' }}
         hint="For example, 15 3 1984"
         error="Enter your date of birth"
         onChange={(e) => console.log(e.target.value)}
@@ -51,7 +51,7 @@ export const StandardWithError: Story = {
       <DateInput
         hint="For example, 15 3 1984"
         legend="What is your date of birth?"
-        legendProps={{ size: 'l' }}
+        legendProps={{ isPageHeading: true, size: 'l' }}
         error="Date of birth must include a day"
         onChange={(e) => console.log(e.target.value)}
       >
@@ -71,7 +71,7 @@ export const PrePopulatedIndividualComponents: Story = {
         <h5>Component</h5>
         <DateInput
           legend="What is your date of birth?"
-          legendProps={{ size: 'l' }}
+          legendProps={{ isPageHeading: true, size: 'l' }}
           hint="For example, 15 3 1984"
         >
           <DateInput.Day defaultValue={defaultValue.day} />
@@ -91,7 +91,7 @@ export const PrePopulatedWrapper: Story = {
         <h5>Component</h5>
         <DateInput
           legend="What is your date of birth?"
-          legendProps={{ size: 'l' }}
+          legendProps={{ isPageHeading: true, size: 'l' }}
           hint="For example, 15 3 1984"
           defaultValue={defaultValue}
         />
@@ -108,7 +108,7 @@ export const ControlledElementIndividualComponents: Story = {
         <h5>Component</h5>
         <DateInput
           legend="What is your date of birth?"
-          legendProps={{ size: 'l' }}
+          legendProps={{ isPageHeading: true, size: 'l' }}
           hint="For example, 15 3 1984"
         >
           <DateInput.Day value={value.day} />
@@ -128,7 +128,7 @@ export const ControlledElementWrapper: Story = {
         <h5>Component</h5>
         <DateInput
           legend="What is your date of birth?"
-          legendProps={{ size: 'l' }}
+          legendProps={{ isPageHeading: true, size: 'l' }}
           hint="For example, 15 3 1984"
           value={value}
         />
@@ -148,7 +148,7 @@ export const ChangeableControlledElement: Story = {
     return (
       <DateInput
         legend="What is your date of birth?"
-        legendProps={{ size: 'l' }}
+        legendProps={{ isPageHeading: true, size: 'l' }}
         hint="For example, 15 3 1984"
         value={value}
         onChange={(e) => setValue(e.currentTarget.value)}
diff --git a/stories/Form Elements/Fieldset.stories.tsx b/stories/Form Elements/Fieldset.stories.tsx
index 9441b6c0..e1d68378 100644
--- a/stories/Form Elements/Fieldset.stories.tsx	
+++ b/stories/Form Elements/Fieldset.stories.tsx	
@@ -20,7 +20,7 @@ import { Fieldset, TextInput } from '#components';
  * const Element = () => {
  *     return (
  *         <Fieldset>
- *             <Fieldset.Legend size="l">What is your address?</Fieldset.Legend>
+ *             <Fieldset.Legend isPageHeading size="l">What is your address?</Fieldset.Legend>
  *         </Fieldset>
  *     );
  * }
@@ -36,7 +36,9 @@ type Story = StoryObj<typeof Fieldset>;
 export const Standard: Story = {
   render: (args) => (
     <Fieldset>
-      <Fieldset.Legend size="l">What is your address?</Fieldset.Legend>
+      <Fieldset.Legend isPageHeading size="l">
+        What is your address?
+      </Fieldset.Legend>
       <TextInput
         label="Address line 1"
         id="address-line-1"
@@ -67,19 +69,13 @@ export const Standard: Story = {
   ),
 };
 
-export const WithLegendAsAPageHeading: Story = {
-  render: (args) => (
-    <Fieldset>
-      <Fieldset.Legend isPageHeading>What is your address?</Fieldset.Legend>
-    </Fieldset>
-  ),
-};
-
 export const WithCustomLegendSizeS: Story = {
   name: 'With Bold Text (S)',
   render: (args) => (
     <Fieldset>
-      <Fieldset.Legend size="s">What is your address?</Fieldset.Legend>
+      <Fieldset.Legend isPageHeading size="s">
+        What is your address?
+      </Fieldset.Legend>
     </Fieldset>
   ),
 };
@@ -88,7 +84,9 @@ export const WithCustomLegendSizeM: Story = {
   name: 'With Custom Size (M)',
   render: (args) => (
     <Fieldset>
-      <Fieldset.Legend size="m">What is your address?</Fieldset.Legend>
+      <Fieldset.Legend isPageHeading size="m">
+        What is your address?
+      </Fieldset.Legend>
     </Fieldset>
   ),
 };
@@ -97,7 +95,9 @@ export const WithCustomLegendSizeL: Story = {
   name: 'With Custom Size (L)',
   render: (args) => (
     <Fieldset>
-      <Fieldset.Legend size="l">What is your address?</Fieldset.Legend>
+      <Fieldset.Legend isPageHeading size="l">
+        What is your address?
+      </Fieldset.Legend>
     </Fieldset>
   ),
 };
@@ -106,7 +106,9 @@ export const WithCustomLegendSizeXL: Story = {
   name: 'With Custom Size (XL)',
   render: (args) => (
     <Fieldset>
-      <Fieldset.Legend size="xl">What is your address?</Fieldset.Legend>
+      <Fieldset.Legend isPageHeading size="xl">
+        What is your address?
+      </Fieldset.Legend>
     </Fieldset>
   ),
 };
diff --git a/stories/Form Elements/Label.stories.tsx b/stories/Form Elements/Label.stories.tsx
index bf8a793b..a9a559ef 100644
--- a/stories/Form Elements/Label.stories.tsx	
+++ b/stories/Form Elements/Label.stories.tsx	
@@ -7,7 +7,7 @@ const meta: Meta<typeof Label> = {
   args: {
     children: 'National Insurance Number',
     size: undefined,
-    isPageHeading: false,
+    isPageHeading: true,
   },
   argTypes: {
     size: { control: 'select', options: [undefined, 's', 'm', 'l', 'xl'] },
@@ -16,11 +16,9 @@ const meta: Meta<typeof Label> = {
 export default meta;
 type Story = StoryObj<typeof Label>;
 
-export const Standard: Story = {};
-
-export const AsPageHeading: Story = {
+export const Standard: Story = {
   args: {
-    isPageHeading: true,
+    size: 'l',
   },
 };
 
diff --git a/stories/Form Elements/Radios.stories.tsx b/stories/Form Elements/Radios.stories.tsx
index 34e75b68..5eb53994 100644
--- a/stories/Form Elements/Radios.stories.tsx	
+++ b/stories/Form Elements/Radios.stories.tsx	
@@ -13,7 +13,7 @@ export const StandardRadios: Story = {
   render: (args) => (
     <Radios
       legend="Have you changed your name?"
-      legendProps={{ size: 'l' }}
+      legendProps={{ isPageHeading: true, size: 'l' }}
       hint="This includes changing your last name or spelling your name differently"
       name="example"
       id="standard-example"
@@ -30,7 +30,7 @@ export const InlineRadios: Story = {
   render: (args) => (
     <Radios
       legend="Have you changed your name?"
-      legendProps={{ size: 'l' }}
+      legendProps={{ isPageHeading: true, size: 'l' }}
       hint="This includes changing your last name or spelling your name differently"
       name="example"
       id="inline-example"
@@ -48,7 +48,7 @@ export const DisabledRadios: Story = {
   render: (args) => (
     <Radios
       legend="Have you changed your name?"
-      legendProps={{ size: 'l' }}
+      legendProps={{ isPageHeading: true, size: 'l' }}
       hint="This includes changing your last name or spelling your name differently"
       name="example"
       id="disabled-example"
@@ -86,7 +86,7 @@ export const RadiosWithConditionalContent: Story = {
       <form style={{ padding: 20 }}>
         <Radios
           legend="Impairment requirement"
-          legendProps={{ size: 'l' }}
+          legendProps={{ isPageHeading: true, size: 'l' }}
           hint="Select relevant options"
           name="example"
           id="example-conditional"
@@ -107,7 +107,7 @@ export const RadiosWithADivider: Story = {
   render: (args) => (
     <Radios
       legend="How do you want to sign in?"
-      legendProps={{ size: 'l' }}
+      legendProps={{ isPageHeading: true, size: 'l' }}
       name="example"
       id="example-divider"
     >
@@ -123,7 +123,7 @@ export const RadiosWithHintsOnItems: Story = {
   render: (args) => (
     <Radios
       legend="How do you want to sign in?"
-      legendProps={{ size: 'l' }}
+      legendProps={{ isPageHeading: true, size: 'l' }}
       name="example"
       id="example-with-hints"
     >
@@ -160,7 +160,7 @@ export const RadiosWithError: Story = {
       <>
         <Radios
           legend="Have you changed your name?"
-          legendProps={{ size: 'l' }}
+          legendProps={{ isPageHeading: true, size: 'l' }}
           hint="This includes changing your last name or spelling your name differently"
           name="example-with-err-string"
           error={error}
diff --git a/stories/Form Elements/Select.stories.tsx b/stories/Form Elements/Select.stories.tsx
index b8a9dcc1..a4e74e18 100644
--- a/stories/Form Elements/Select.stories.tsx	
+++ b/stories/Form Elements/Select.stories.tsx	
@@ -11,7 +11,11 @@ type Story = StoryObj<typeof Select>;
 
 export const Standard: Story = {
   render: (args) => (
-    <Select label="Label text goes here" labelProps={{ size: 'l' }} defaultValue="2">
+    <Select
+      label="Label text goes here"
+      labelProps={{ isPageHeading: true, size: 'l' }}
+      defaultValue="2"
+    >
       <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>
@@ -23,7 +27,11 @@ export const Standard: Story = {
 
 export const SelectWithHintText: Story = {
   render: (args) => (
-    <Select label="Label text goes here" labelProps={{ size: 'l' }} hint="Hint text goes here">
+    <Select
+      label="Label text goes here"
+      labelProps={{ isPageHeading: true, size: 'l' }}
+      hint="Hint text goes here"
+    >
       <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>
@@ -36,7 +44,11 @@ export const SelectWithError: Story = {
     const [error, setError] = useState<string>('Error message goes here');
     return (
       <>
-        <Select label="Label text goes here" labelProps={{ size: 'l' }} error={error}>
+        <Select
+          label="Label text goes here"
+          labelProps={{ isPageHeading: true, size: 'l' }}
+          error={error}
+        >
           <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>
@@ -56,7 +68,7 @@ export const SelectWithErrorAndHintString: Story = {
       <>
         <Select
           label="Label text goes here"
-          labelProps={{ size: 'l' }}
+          labelProps={{ isPageHeading: true, size: 'l' }}
           hint="Hint text goes here"
           error={error}
         >
diff --git a/stories/Form Elements/TextInput.stories.tsx b/stories/Form Elements/TextInput.stories.tsx
index 277c7c99..9cc2228c 100644
--- a/stories/Form Elements/TextInput.stories.tsx	
+++ b/stories/Form Elements/TextInput.stories.tsx	
@@ -8,6 +8,7 @@ const meta: Meta<typeof TextInput> = {
     id: 'input-example',
     name: 'test-name',
     label: 'National Insurance number',
+    labelProps: { isPageHeading: true, size: 'l' },
   },
   argTypes: {
     ref: { table: { disable: true } },
@@ -24,24 +25,6 @@ export const WithHintText: Story = {
   },
 };
 
-export const WithLabelAsPageHeading: Story = {
-  args: {
-    labelProps: {
-      isPageHeading: true,
-      size: 'l',
-    },
-    hint: 'It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34 56 C’.',
-  },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'To be used when the input label should also be a page heading - such as when it is the main question on a page.',
-      },
-    },
-  },
-};
-
 export const WithError: Story = {
   args: {
     error: 'Error message goes here',
diff --git a/stories/Form Elements/Textarea.stories.tsx b/stories/Form Elements/Textarea.stories.tsx
index b61009d0..4ba9dae1 100644
--- a/stories/Form Elements/Textarea.stories.tsx	
+++ b/stories/Form Elements/Textarea.stories.tsx	
@@ -15,26 +15,17 @@ export default meta;
 type Story = StoryObj<typeof Textarea>;
 
 export const Standard: Story = {
-  args: {
-    label: 'Can you provide more detail?',
-    labelProps: { size: 'l' },
-    hint: 'Do not include personal information, like your name, date of birth or NHS number',
-  },
-};
-
-export const WithLabelAsPageHeading: Story = {
   args: {
     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',
-    autoComplete: 'street-address',
   },
 };
 
 export const TextareaWithAutoCompleteAttribute: Story = {
   args: {
     label: 'Can you provide more detail?',
-    labelProps: { size: 'l' },
+    labelProps: { isPageHeading: true, size: 'l' },
     hint: 'Do not include personal information, like your name, date of birth or NHS number',
     autoComplete: 'street-address',
   },
@@ -47,7 +38,7 @@ export const TextareaWithError: Story = {
       <>
         <Textarea
           label="Can you provide more detail?"
-          labelProps={{ size: 'l' }}
+          labelProps={{ isPageHeading: true, size: 'l' }}
           hint="Do not include personal information, like your name, date of birth or NHS number"
           error={error}
           id="with-error-message"

From d72389343f997b3d0f90db84422792f6561297ed Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Thu, 16 Oct 2025 10:01:01 +0100
Subject: [PATCH 3/6] Always pass args to storybook examples

---
 .../DoAndDontList.stories.tsx                 |  17 +-
 .../NotificationBanner.stories.tsx            |  32 ++--
 .../Content Presentation/Panel.stories.tsx    |   8 +-
 stories/Content Presentation/Tabs.stories.tsx |   8 +-
 stories/Content Presentation/Tag.stories.tsx  |   2 +-
 .../WarningCallout.stories.tsx                |   6 +-
 .../Form Elements/CharacterCount.stories.tsx  |  48 ++----
 stories/Form Elements/Checkboxes.stories.tsx  |  75 ++++-----
 stories/Form Elements/DateInput.stories.tsx   | 102 ++++++------
 .../Form Elements/ErrorMessage.stories.tsx    |  12 +-
 .../Form Elements/ErrorSummary.stories.tsx    |   9 +-
 stories/Form Elements/Fieldset.stories.tsx    |  10 +-
 stories/Form Elements/HintText.stories.tsx    |  10 +-
 stories/Form Elements/Radios.stories.tsx      | 130 +++++++---------
 stories/Form Elements/Select.stories.tsx      |  44 +++---
 stories/Form Elements/Textarea.stories.tsx    |  26 +---
 stories/Navigation/Breadcrumb.stories.tsx     |  10 +-
 stories/Navigation/Card.stories.tsx           |  70 ++++++---
 stories/Navigation/ContentsList.stories.tsx   |  16 +-
 stories/Navigation/Footer.stories.tsx         |   4 +-
 stories/Navigation/Header.stories.tsx         | 147 ++++++++++--------
 stories/Navigation/Pagination.stories.tsx     |   2 +-
 stories/Navigation/SkipLink.stories.tsx       |   2 +-
 23 files changed, 400 insertions(+), 390 deletions(-)

diff --git a/stories/Content Presentation/DoAndDontList.stories.tsx b/stories/Content Presentation/DoAndDontList.stories.tsx
index a72d912f..5cdcf768 100644
--- a/stories/Content Presentation/DoAndDontList.stories.tsx	
+++ b/stories/Content Presentation/DoAndDontList.stories.tsx	
@@ -45,8 +45,11 @@ export default meta;
 type Story = StoryObj<typeof DoAndDontList>;
 
 export const Do: Story = {
+  args: {
+    listType: 'do',
+  },
   render: (args) => (
-    <DoAndDontList listType="do">
+    <DoAndDontList {...args}>
       <DoAndDontList.Item>
         cover blisters that are likely to burst with a soft plaster or dressing
       </DoAndDontList.Item>
@@ -59,8 +62,11 @@ export const Do: Story = {
 };
 
 export const Dont: Story = {
+  args: {
+    listType: 'dont',
+  },
   render: (args) => (
-    <DoAndDontList listType="dont">
+    <DoAndDontList {...args}>
       <DoAndDontList.Item>burst a blister yourself</DoAndDontList.Item>
       <DoAndDontList.Item>peel the skin off a burst blister</DoAndDontList.Item>
       <DoAndDontList.Item>pick at the edges of the remaining skin</DoAndDontList.Item>
@@ -90,8 +96,11 @@ export const Dont: Story = {
  * | JSX       | The JSX will be rendered, such as `<span>`  |
  */
 export const CustomPrefixText: Story = {
-  render: () => (
-    <DoAndDontList listType="dont">
+  args: {
+    listType: 'dont',
+  },
+  render: (args) => (
+    <DoAndDontList {...args}>
       <DoAndDontList.Item prefixText="You must not">burst a blister yourself</DoAndDontList.Item>
       <DoAndDontList.Item prefixText={undefined}>
         peel the skin off a burst blister
diff --git a/stories/Content Presentation/NotificationBanner.stories.tsx b/stories/Content Presentation/NotificationBanner.stories.tsx
index d247ba9d..854cf26e 100644
--- a/stories/Content Presentation/NotificationBanner.stories.tsx	
+++ b/stories/Content Presentation/NotificationBanner.stories.tsx	
@@ -41,8 +41,8 @@ type Story = StoryObj<typeof NotificationBanner>;
 
 export const StandardPanel: Story = {
   args: {},
-  render: () => (
-    <NotificationBanner>
+  render: (args) => (
+    <NotificationBanner {...args}>
       <NotificationBanner.Heading>
         The service will be unavailable from 8pm to 9pm on Thursday 1 January 2025.
       </NotificationBanner.Heading>
@@ -51,9 +51,11 @@ export const StandardPanel: Story = {
 };
 
 export const SuccessPanel: Story = {
-  args: {},
-  render: () => (
-    <NotificationBanner success>
+  args: {
+    success: true,
+  },
+  render: (args) => (
+    <NotificationBanner {...args}>
       <NotificationBanner.Heading>Patient record updated</NotificationBanner.Heading>
       <p>
         Contact{' '}
@@ -66,8 +68,8 @@ export const SuccessPanel: Story = {
 
 export const StandardPanelWithLink: Story = {
   args: {},
-  render: () => (
-    <NotificationBanner>
+  render: (args) => (
+    <NotificationBanner {...args}>
       <NotificationBanner.Heading>
         You have 7 days left to send your application.{' '}
         <NotificationBanner.Link href="#">View application</NotificationBanner.Link>.
@@ -80,8 +82,8 @@ export const StandardPanelWithCustomTitle: Story = {
   args: {
     title: 'Important Message',
   },
-  render: () => (
-    <NotificationBanner>
+  render: (args) => (
+    <NotificationBanner {...args}>
       <NotificationBanner.Heading>Upcoming maintenance</NotificationBanner.Heading>
       <p>The service will be unavailable from 8pm to 9pm on Thursday 1 January 2025.</p>
     </NotificationBanner>
@@ -90,8 +92,8 @@ export const StandardPanelWithCustomTitle: Story = {
 
 export const StandardPanelWithCustomTitleElement: Story = {
   args: {},
-  render: () => (
-    <NotificationBanner>
+  render: (args) => (
+    <NotificationBanner {...args}>
       <NotificationBanner.Title>
         Maintenance <time dateTime="2025-01-01">January 1</time>
       </NotificationBanner.Title>
@@ -103,8 +105,8 @@ export const StandardPanelWithCustomTitleElement: Story = {
 
 export const StandardPanelWithList: Story = {
   args: {},
-  render: () => (
-    <NotificationBanner>
+  render: (args) => (
+    <NotificationBanner {...args}>
       <NotificationBanner.Heading>4 files uploaded</NotificationBanner.Heading>
       <ul>
         <li>
@@ -126,8 +128,8 @@ export const StandardPanelWithList: Story = {
 
 export const StandardPanelWithLotsOfContent: Story = {
   args: {},
-  render: () => (
-    <NotificationBanner>
+  render: (args) => (
+    <NotificationBanner {...args}>
       <NotificationBanner.Heading>
         Check if you need to apply the reverse charge to this application
       </NotificationBanner.Heading>
diff --git a/stories/Content Presentation/Panel.stories.tsx b/stories/Content Presentation/Panel.stories.tsx
index d8f289cd..2e519947 100644
--- a/stories/Content Presentation/Panel.stories.tsx	
+++ b/stories/Content Presentation/Panel.stories.tsx	
@@ -9,8 +9,8 @@ export default meta;
 type Story = StoryObj<typeof Panel>;
 
 export const StandardPanel: Story = {
-  render: () => (
-    <Panel>
+  render: (args) => (
+    <Panel {...args}>
       <Panel.Title>Booking complete</Panel.Title>
       We have sent you a confirmation email
     </Panel>
@@ -18,8 +18,8 @@ export const StandardPanel: Story = {
 };
 
 export const PanelWithCustomHeadingLevel: Story = {
-  render: () => (
-    <Panel>
+  render: (args) => (
+    <Panel {...args}>
       <Panel.Title headingLevel="h2">Booking complete</Panel.Title>
       We have sent you a confirmation email
     </Panel>
diff --git a/stories/Content Presentation/Tabs.stories.tsx b/stories/Content Presentation/Tabs.stories.tsx
index 9f91fbbb..01a66a61 100644
--- a/stories/Content Presentation/Tabs.stories.tsx	
+++ b/stories/Content Presentation/Tabs.stories.tsx	
@@ -18,8 +18,8 @@ export default meta;
 type Story = StoryObj<typeof Tabs>;
 
 export const Standard: Story = {
-  render: () => (
-    <Tabs>
+  render: (args) => (
+    <Tabs {...args}>
       <Tabs.Title>Contents</Tabs.Title>
       <Tabs.List>
         <Tabs.ListItem id="past-day">Past day</Tabs.ListItem>
@@ -48,8 +48,8 @@ export const Standard: Story = {
  * It also displays if the user has JavaScript disabled.
  */
 export const DifferentAccessibleHeading: Story = {
-  render: () => (
-    <Tabs>
+  render: (args) => (
+    <Tabs {...args}>
       <Tabs.Title headingLevel="h1">Tabs title</Tabs.Title>
       <Tabs.List>
         <Tabs.ListItem id="past-day-2">Past day</Tabs.ListItem>
diff --git a/stories/Content Presentation/Tag.stories.tsx b/stories/Content Presentation/Tag.stories.tsx
index cbd3a0ec..2bf3cef5 100644
--- a/stories/Content Presentation/Tag.stories.tsx	
+++ b/stories/Content Presentation/Tag.stories.tsx	
@@ -11,7 +11,7 @@ type Story = StoryObj<typeof Tag>;
 export const StandardTag: Story = { args: { children: 'Standard' } };
 
 export const AllColours: Story = {
-  render: (args) => (
+  render: () => (
     <div className="tag-wrapper">
       <Tag modifier="white">Started</Tag>
       <Tag modifier="grey">Not started</Tag>
diff --git a/stories/Content Presentation/WarningCallout.stories.tsx b/stories/Content Presentation/WarningCallout.stories.tsx
index 97913c62..2f4210df 100644
--- a/stories/Content Presentation/WarningCallout.stories.tsx	
+++ b/stories/Content Presentation/WarningCallout.stories.tsx	
@@ -10,7 +10,7 @@ type Story = StoryObj<typeof WarningCallout>;
 
 export const StandardWarningCallout: Story = {
   render: (args) => (
-    <WarningCallout>
+    <WarningCallout {...args}>
       <WarningCallout.Heading>Important</WarningCallout.Heading>
       <p>
         For safety, tell your doctor or pharmacist if you&apos;re taking any other medicines,
@@ -24,7 +24,7 @@ export const StandardWarningCallout: Story = {
 
 export const WarningCalloutWithCustomHeading: Story = {
   render: (args) => (
-    <WarningCallout>
+    <WarningCallout {...args}>
       <WarningCallout.Heading>School, nursery or work</WarningCallout.Heading>
       <p>
         Stay away from school, nursery or work until all the spots have crusted over. This is
@@ -36,7 +36,7 @@ export const WarningCalloutWithCustomHeading: Story = {
 
 export const WarningCalloutWithCustomHeadingLevel: Story = {
   render: (args) => (
-    <WarningCallout>
+    <WarningCallout {...args}>
       <WarningCallout.Heading headingLevel="h4">School, nursery or work</WarningCallout.Heading>
       <p>
         Stay away from school, nursery or work until all the spots have crusted over. This is
diff --git a/stories/Form Elements/CharacterCount.stories.tsx b/stories/Form Elements/CharacterCount.stories.tsx
index d11fa615..9074bac4 100644
--- a/stories/Form Elements/CharacterCount.stories.tsx	
+++ b/stories/Form Elements/CharacterCount.stories.tsx	
@@ -12,22 +12,22 @@ import { CharacterCount } from '#components';
 const meta: Meta<typeof CharacterCount> = {
   title: 'Form Elements/CharacterCount',
   component: CharacterCount,
+  args: {
+    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',
+    name: 'example',
+    rows: 5,
+  },
 };
 
 export default meta;
 type Story = StoryObj<typeof CharacterCount>;
 
 export const Standard: Story = {
-  render: () => (
-    <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"
-      name="example"
-      maxLength={200}
-      rows={5}
-    />
-  ),
+  args: {
+    maxLength: 200,
+  },
 };
 
 /**
@@ -36,16 +36,9 @@ export const Standard: Story = {
  * Use the `countType` prop to vary this behaviour.
  */
 export const WordCountLimit: Story = {
-  render: () => (
-    <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"
-      name="example"
-      maxWords={150}
-      rows={5}
-    />
-  ),
+  args: {
+    maxWords: 150,
+  },
 };
 
 /**
@@ -54,15 +47,8 @@ export const WordCountLimit: Story = {
  * Use the `threshold` prop to only show the count message when users have reached that percentage of the limit.
  */
 export const MessageThreshold: Story = {
-  render: () => (
-    <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"
-      name="example"
-      maxLength={112}
-      threshold={75}
-      rows={5}
-    />
-  ),
+  args: {
+    maxLength: 112,
+    threshold: 75,
+  },
 };
diff --git a/stories/Form Elements/Checkboxes.stories.tsx b/stories/Form Elements/Checkboxes.stories.tsx
index 747269e6..0ff4c0f7 100644
--- a/stories/Form Elements/Checkboxes.stories.tsx	
+++ b/stories/Form Elements/Checkboxes.stories.tsx	
@@ -33,6 +33,12 @@ import { Checkboxes, TextInput } from '#components';
 const meta: Meta<typeof Checkboxes> = {
   title: 'Form Elements/Checkboxes',
   component: Checkboxes,
+  args: {
+    legend: 'What is your nationality?',
+    legendProps: { isPageHeading: true, size: 'l' },
+    hint: 'If you have more than 1 nationality, select all options that are relevant to you',
+    name: 'example',
+  },
 };
 export default meta;
 type Story = StoryObj<typeof Checkboxes>;
@@ -46,14 +52,7 @@ type CheckboxState = {
 export const Standard: Story = {
   render: (args) => (
     <form>
-      <Checkboxes
-        legend="What is your nationality?"
-        legendProps={{ isPageHeading: true, size: 'l' }}
-        hint="If you have more than 1 nationality, select all options that are relevant to you"
-        idPrefix={args.idPrefix}
-        name="nationality"
-        id="nationality"
-      >
+      <Checkboxes {...args}>
         <Checkboxes.Item value="british">British</Checkboxes.Item>
         <Checkboxes.Item value="irish">Irish</Checkboxes.Item>
         <Checkboxes.Item value="other">Citizen of another country</Checkboxes.Item>
@@ -63,14 +62,14 @@ export const Standard: Story = {
 };
 
 export const WithHintText: Story = {
+  args: {
+    legend: 'How do you want to sign in?',
+    hint: undefined,
+  },
   render: (args) => (
     <form>
-      <Checkboxes
-        legend="How do you want to sign in?"
-        legendProps={{ isPageHeading: true, size: 'l' }}
-      >
+      <Checkboxes {...args}>
         <Checkboxes.Item
-          id="government-gateway"
           name="gateway"
           type="checkbox"
           value="gov-gateway"
@@ -79,7 +78,6 @@ export const WithHintText: Story = {
           Sign in with Government Gateway
         </Checkboxes.Item>
         <Checkboxes.Item
-          id="nhsuk-login"
           name="verify"
           value="nhsuk-verify"
           hint="You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity."
@@ -94,11 +92,11 @@ export const WithHintText: Story = {
 export const WithDisabledItem: Story = {
   render: (args) => (
     <form>
-      <Checkboxes id="colours" name="colours">
-        <Checkboxes.Item value="red">Red</Checkboxes.Item>
-        <Checkboxes.Item value="green">Green</Checkboxes.Item>
-        <Checkboxes.Item value="red" disabled>
-          Blue
+      <Checkboxes {...args}>
+        <Checkboxes.Item value="british">British</Checkboxes.Item>
+        <Checkboxes.Item value="irish">Irish</Checkboxes.Item>
+        <Checkboxes.Item value="other" disabled>
+          Citizen of another country
         </Checkboxes.Item>
       </Checkboxes>
     </form>
@@ -106,15 +104,13 @@ export const WithDisabledItem: Story = {
 };
 
 export const WithConditionalContent: Story = {
+  args: {
+    legend: 'What types of waste do you transport regularly?',
+    hint: 'Select all that apply',
+  },
   render: (args) => (
     <form>
-      <Checkboxes
-        legend="What types of waste do you transport regularly?"
-        legendProps={{ isPageHeading: true, size: 'l' }}
-        hint="Select all that apply"
-        id="waste"
-        name="waste"
-      >
+      <Checkboxes {...args}>
         <Checkboxes.Item conditional={<p>This includes rocks and earth.</p>} value="mines">
           Waste from mines or quarries
         </Checkboxes.Item>
@@ -124,15 +120,13 @@ export const WithConditionalContent: Story = {
 };
 
 export const WithExclusiveNoneOption: Story = {
+  args: {
+    legend: 'Do you have any of these symptoms?',
+    hint: 'Select all the symptoms you have',
+  },
   render: (args) => (
     <form>
-      <Checkboxes
-        legend="Do you have any of these symptoms?"
-        legendProps={{ isPageHeading: true, size: 'l' }}
-        hint="Select all the symptoms you have"
-        id="symptoms"
-        name="symptoms"
-      >
+      <Checkboxes {...args}>
         <Checkboxes.Item value="sore-throat">Sore throat</Checkboxes.Item>
         <Checkboxes.Item value="runny-nose">Runny nose</Checkboxes.Item>
         <Checkboxes.Item value="muscle-pain">Muscle or joint pain</Checkboxes.Item>
@@ -146,19 +140,16 @@ export const WithExclusiveNoneOption: Story = {
 };
 
 export const WithError: Story = {
+  args: {
+    legend: 'What types of waste do you transport regularly?',
+    hint: 'Select all that apply',
+  },
   render: (args) => {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const [error, setError] = useState('Please select an option');
     return (
       <form>
-        <Checkboxes
-          legend="Which types of waste do you transport regularly?"
-          legendProps={{ isPageHeading: true, size: 'l' }}
-          hint="Select all that apply"
-          error={error}
-          id="waste"
-          name="waste"
-        >
+        <Checkboxes error={error} {...args}>
           <Checkboxes.Item value="animal">Waste from animal carcasses</Checkboxes.Item>
           <Checkboxes.Item value="mines">Waste from mines or quarries</Checkboxes.Item>
           <Checkboxes.Item value="farm">Farm or agricultural waste</Checkboxes.Item>
@@ -502,7 +493,7 @@ export const IDPrefixAndNameSupplied: Story = {
           </li>
         </ul>
         <h5>Component</h5>
-        <Checkboxes idPrefix="idprefix" name="testname">
+        <Checkboxes idPrefix="idprefix-name" name="testname">
           <Checkboxes.Item ref={checkbox1Ref}>Box 1</Checkboxes.Item>
           <Checkboxes.Item ref={checkbox2Ref}>Box 2</Checkboxes.Item>
           <Checkboxes.Item ref={checkbox3Ref}>Box 3</Checkboxes.Item>
diff --git a/stories/Form Elements/DateInput.stories.tsx b/stories/Form Elements/DateInput.stories.tsx
index af162dc4..5ce48a5f 100644
--- a/stories/Form Elements/DateInput.stories.tsx	
+++ b/stories/Form Elements/DateInput.stories.tsx	
@@ -5,12 +5,17 @@ import { DateInput, type DateInputValue } from '#components';
 const meta: Meta<typeof DateInput> = {
   title: 'Form Elements/DateInput',
   component: DateInput,
+  args: {
+    legend: 'What is your date of birth?',
+    legendProps: { isPageHeading: true, size: 'l' },
+    hint: 'For example, 15 3 1984',
+  },
 };
 export default meta;
 type Story = StoryObj<typeof DateInput>;
 
 export const Standard: Story = {
-  render: () => (
+  render: (args) => (
     <div style={{ padding: 20 }}>
       <h2>Scenario: onChange and onInput handlers are bound without any other props</h2>
       <h5>Expected Behaviour</h5>
@@ -19,18 +24,13 @@ export const Standard: Story = {
         <li>The value is passed through</li>
       </ul>
       <h5>Component</h5>
-      <DateInput
-        legend="What is your date of birth?"
-        legendProps={{ isPageHeading: true, size: 'l' }}
-        hint="For example, 15 3 1984"
-        onChange={(e) => console.log(e.target.value)}
-      />
+      <DateInput onChange={(e) => console.log(e.target.value)} {...args} />
     </div>
   ),
 };
 
 export const StandardWithError: Story = {
-  render: () => (
+  render: (args) => (
     <div style={{ padding: 20 }}>
       <h2>Scenario: onChange and onInput handlers are bound without any other props</h2>
       <h5>Expected Behaviour</h5>
@@ -40,20 +40,16 @@ export const StandardWithError: Story = {
       </ul>
       <h5>Component</h5>
       <DateInput
-        legend="What is your date of birth?"
-        legendProps={{ isPageHeading: true, size: 'l' }}
-        hint="For example, 15 3 1984"
         error="Enter your date of birth"
         onChange={(e) => console.log(e.target.value)}
+        {...args}
       />
-      <h5>Component with specific field errors</h5>
 
+      <h5>Component with specific field errors</h5>
       <DateInput
-        hint="For example, 15 3 1984"
-        legend="What is your date of birth?"
-        legendProps={{ isPageHeading: true, size: 'l' }}
         error="Date of birth must include a day"
         onChange={(e) => console.log(e.target.value)}
+        {...args}
       >
         <DateInput.Day />
         <DateInput.Month error={false} />
@@ -64,16 +60,12 @@ export const StandardWithError: Story = {
 };
 
 export const PrePopulatedIndividualComponents: Story = {
-  render: () => {
+  render: (args) => {
     const defaultValue = { day: '20', month: '09', year: '1996' };
     return (
       <div style={{ padding: 20 }}>
         <h5>Component</h5>
-        <DateInput
-          legend="What is your date of birth?"
-          legendProps={{ isPageHeading: true, size: 'l' }}
-          hint="For example, 15 3 1984"
-        >
+        <DateInput {...args}>
           <DateInput.Day defaultValue={defaultValue.day} />
           <DateInput.Month defaultValue={defaultValue.month} />
           <DateInput.Year defaultValue={defaultValue.year} />
@@ -84,36 +76,39 @@ export const PrePopulatedIndividualComponents: Story = {
 };
 
 export const PrePopulatedWrapper: Story = {
-  render: () => {
-    const defaultValue = { day: '20', month: '09', year: '1996' };
+  args: {
+    defaultValue: {
+      day: '20',
+      month: '09',
+      year: '1996',
+    },
+  },
+  render: (args) => {
     return (
       <div style={{ padding: 20 }}>
         <h5>Component</h5>
-        <DateInput
-          legend="What is your date of birth?"
-          legendProps={{ isPageHeading: true, size: 'l' }}
-          hint="For example, 15 3 1984"
-          defaultValue={defaultValue}
-        />
+        <DateInput {...args} />
       </div>
     );
   },
 };
 
 export const ControlledElementIndividualComponents: Story = {
-  render: () => {
-    const value = { day: '20', month: '09', year: '1996' };
+  args: {
+    value: {
+      day: '20',
+      month: '09',
+      year: '1996',
+    },
+  },
+  render: ({ value, ...args }) => {
     return (
       <div style={{ padding: 20 }}>
         <h5>Component</h5>
-        <DateInput
-          legend="What is your date of birth?"
-          legendProps={{ isPageHeading: true, size: 'l' }}
-          hint="For example, 15 3 1984"
-        >
-          <DateInput.Day value={value.day} />
-          <DateInput.Month value={value.month} />
-          <DateInput.Year value={value.year} />
+        <DateInput {...args}>
+          <DateInput.Day value={value?.day} />
+          <DateInput.Month value={value?.month} />
+          <DateInput.Year value={value?.year} />
         </DateInput>
       </div>
     );
@@ -121,38 +116,31 @@ export const ControlledElementIndividualComponents: Story = {
 };
 
 export const ControlledElementWrapper: Story = {
-  render: () => {
-    const value = { day: '20', month: '09', year: '1996' };
+  args: {
+    value: {
+      day: '20',
+      month: '09',
+      year: '1996',
+    },
+  },
+  render: (args) => {
     return (
       <div style={{ padding: 20 }}>
         <h5>Component</h5>
-        <DateInput
-          legend="What is your date of birth?"
-          legendProps={{ isPageHeading: true, size: 'l' }}
-          hint="For example, 15 3 1984"
-          value={value}
-        />
+        <DateInput {...args} />
       </div>
     );
   },
 };
 
 export const ChangeableControlledElement: Story = {
-  render: function ChangeableControlledElementRender() {
+  render: function ChangeableControlledElementRender(args) {
     const [value, setValue] = useState<Partial<DateInputValue> | undefined>({
       day: '20',
       month: '09',
       year: '1996',
     });
 
-    return (
-      <DateInput
-        legend="What is your date of birth?"
-        legendProps={{ isPageHeading: true, size: 'l' }}
-        hint="For example, 15 3 1984"
-        value={value}
-        onChange={(e) => setValue(e.currentTarget.value)}
-      />
-    );
+    return <DateInput value={value} onChange={(e) => setValue(e.currentTarget.value)} {...args} />;
   },
 };
diff --git a/stories/Form Elements/ErrorMessage.stories.tsx b/stories/Form Elements/ErrorMessage.stories.tsx
index a60c23d3..2d255229 100644
--- a/stories/Form Elements/ErrorMessage.stories.tsx	
+++ b/stories/Form Elements/ErrorMessage.stories.tsx	
@@ -28,13 +28,19 @@ const meta: Meta<typeof ErrorMessage> = {
   args: {
     children: 'Enter your full name',
   },
+  argTypes: {
+    visuallyHiddenText: {
+      control: 'text',
+      table: {
+        defaultValue: { summary: 'Error' },
+      },
+    },
+  },
 };
 export default meta;
 type Story = StoryObj<typeof ErrorMessage>;
 
-export const Standard: Story = {
-  argTypes: { visuallyHiddenText: { control: false } },
-};
+export const Standard: Story = {};
 
 export const CustomVisuallyHiddenText: Story = {
   args: { visuallyHiddenText: 'Custom' },
diff --git a/stories/Form Elements/ErrorSummary.stories.tsx b/stories/Form Elements/ErrorSummary.stories.tsx
index 16efba9b..1b6b6ed2 100644
--- a/stories/Form Elements/ErrorSummary.stories.tsx	
+++ b/stories/Form Elements/ErrorSummary.stories.tsx	
@@ -43,7 +43,7 @@ type Story = StoryObj<typeof ErrorSummary>;
 
 export const Standard: Story = {
   render: (args) => (
-    <ErrorSummary>
+    <ErrorSummary {...args}>
       <ErrorSummary.Title>There is a problem</ErrorSummary.Title>
       <ErrorSummary.List>
         <ErrorSummary.ListItem href="#example-error-1">Enter your full name</ErrorSummary.ListItem>
@@ -54,7 +54,7 @@ export const Standard: Story = {
 
 export const WithDescription: Story = {
   render: (args) => (
-    <ErrorSummary>
+    <ErrorSummary {...args}>
       <ErrorSummary.Title>There is a problem</ErrorSummary.Title>
       <p>Describe the errors and how to correct them</p>
       <ErrorSummary.List>
@@ -67,8 +67,11 @@ export const WithDescription: Story = {
 };
 
 export const WithAutoFocusDisabled: Story = {
+  args: {
+    disableAutoFocus: true,
+  },
   render: (args) => (
-    <ErrorSummary disableAutoFocus={true}>
+    <ErrorSummary {...args}>
       <ErrorSummary.Title>There is a problem</ErrorSummary.Title>
       <ErrorSummary.List>
         <ErrorSummary.ListItem href="#example-error-1">
diff --git a/stories/Form Elements/Fieldset.stories.tsx b/stories/Form Elements/Fieldset.stories.tsx
index e1d68378..7b7e36e0 100644
--- a/stories/Form Elements/Fieldset.stories.tsx	
+++ b/stories/Form Elements/Fieldset.stories.tsx	
@@ -35,7 +35,7 @@ type Story = StoryObj<typeof Fieldset>;
 
 export const Standard: Story = {
   render: (args) => (
-    <Fieldset>
+    <Fieldset {...args}>
       <Fieldset.Legend isPageHeading size="l">
         What is your address?
       </Fieldset.Legend>
@@ -72,7 +72,7 @@ export const Standard: Story = {
 export const WithCustomLegendSizeS: Story = {
   name: 'With Bold Text (S)',
   render: (args) => (
-    <Fieldset>
+    <Fieldset {...args}>
       <Fieldset.Legend isPageHeading size="s">
         What is your address?
       </Fieldset.Legend>
@@ -83,7 +83,7 @@ export const WithCustomLegendSizeS: Story = {
 export const WithCustomLegendSizeM: Story = {
   name: 'With Custom Size (M)',
   render: (args) => (
-    <Fieldset>
+    <Fieldset {...args}>
       <Fieldset.Legend isPageHeading size="m">
         What is your address?
       </Fieldset.Legend>
@@ -94,7 +94,7 @@ export const WithCustomLegendSizeM: Story = {
 export const WithCustomLegendSizeL: Story = {
   name: 'With Custom Size (L)',
   render: (args) => (
-    <Fieldset>
+    <Fieldset {...args}>
       <Fieldset.Legend isPageHeading size="l">
         What is your address?
       </Fieldset.Legend>
@@ -105,7 +105,7 @@ export const WithCustomLegendSizeL: Story = {
 export const WithCustomLegendSizeXL: Story = {
   name: 'With Custom Size (XL)',
   render: (args) => (
-    <Fieldset>
+    <Fieldset {...args}>
       <Fieldset.Legend isPageHeading size="xl">
         What is your address?
       </Fieldset.Legend>
diff --git a/stories/Form Elements/HintText.stories.tsx b/stories/Form Elements/HintText.stories.tsx
index 3c003262..995f4e0e 100644
--- a/stories/Form Elements/HintText.stories.tsx	
+++ b/stories/Form Elements/HintText.stories.tsx	
@@ -9,10 +9,8 @@ export default meta;
 type Story = StoryObj<typeof HintText>;
 
 export const Standard: Story = {
-  render: (args) => (
-    <HintText>
-      It’s on your National Insurance card, benefit letter, payslip or P60. For example, ‘QQ 12 34
-      56 C’.
-    </HintText>
-  ),
+  args: {
+    children: 'Do not include personal information like your name, date of birth or NHS number',
+  },
+  render: (args) => <HintText {...args} />,
 };
diff --git a/stories/Form Elements/Radios.stories.tsx b/stories/Form Elements/Radios.stories.tsx
index 5eb53994..9156dc76 100644
--- a/stories/Form Elements/Radios.stories.tsx	
+++ b/stories/Form Elements/Radios.stories.tsx	
@@ -5,19 +5,21 @@ import { Checkboxes, Radios, TextInput } from '#components';
 const meta: Meta<typeof Radios> = {
   title: 'Form Elements/Radios',
   component: Radios,
+  args: {
+    legend: 'Have you changed your name?',
+    legendProps: { isPageHeading: true, size: 'l' },
+    hint: 'This includes changing your last name or spelling your name differently',
+  },
 };
 export default meta;
 type Story = StoryObj<typeof Radios>;
 
 export const StandardRadios: Story = {
+  args: {
+    idPrefix: 'standard',
+  },
   render: (args) => (
-    <Radios
-      legend="Have you changed your name?"
-      legendProps={{ isPageHeading: true, size: 'l' }}
-      hint="This includes changing your last name or spelling your name differently"
-      name="example"
-      id="standard-example"
-    >
+    <Radios {...args}>
       <Radios.Item value="yes">Yes</Radios.Item>
       <Radios.Item value="no" defaultChecked>
         No
@@ -27,15 +29,12 @@ export const StandardRadios: Story = {
 };
 
 export const InlineRadios: Story = {
+  args: {
+    idPrefix: 'inline',
+    inline: true,
+  },
   render: (args) => (
-    <Radios
-      legend="Have you changed your name?"
-      legendProps={{ isPageHeading: true, size: 'l' }}
-      hint="This includes changing your last name or spelling your name differently"
-      name="example"
-      id="inline-example"
-      inline
-    >
+    <Radios {...args}>
       <Radios.Item value="yes">Yes</Radios.Item>
       <Radios.Item value="no" defaultChecked>
         No
@@ -44,26 +43,12 @@ export const InlineRadios: Story = {
   ),
 };
 
-export const DisabledRadios: Story = {
-  render: (args) => (
-    <Radios
-      legend="Have you changed your name?"
-      legendProps={{ isPageHeading: true, size: 'l' }}
-      hint="This includes changing your last name or spelling your name differently"
-      name="example"
-      id="disabled-example"
-    >
-      <Radios.Item disabled value="yes">
-        Yes
-      </Radios.Item>
-      <Radios.Item disabled value="no">
-        No
-      </Radios.Item>
-    </Radios>
-  ),
-};
-
 export const RadiosWithConditionalContent: Story = {
+  args: {
+    legend: 'Impairment requirement',
+    hint: 'Select relevant options',
+    idPrefix: 'conditional',
+  },
   render: (args) => {
     const impairmentsForm = (
       <Checkboxes name="impairments" id="impairments">
@@ -84,19 +69,11 @@ export const RadiosWithConditionalContent: Story = {
 
     return (
       <form style={{ padding: 20 }}>
-        <Radios
-          legend="Impairment requirement"
-          legendProps={{ isPageHeading: true, size: 'l' }}
-          hint="Select relevant options"
-          name="example"
-          id="example-conditional"
-        >
-          <Radios.Item id="hello1" value="yes" conditional={impairmentsForm}>
+        <Radios {...args}>
+          <Radios.Item value="yes" conditional={impairmentsForm}>
             Patient requires an impairment to be added
           </Radios.Item>
-          <Radios.Item id="hello2" value="no">
-            Patient would prefer not to say
-          </Radios.Item>
+          <Radios.Item value="no">Patient would prefer not to say</Radios.Item>
         </Radios>
       </form>
     );
@@ -104,13 +81,13 @@ export const RadiosWithConditionalContent: Story = {
 };
 
 export const RadiosWithADivider: Story = {
+  args: {
+    legend: 'How do you want to sign in?',
+    hint: undefined,
+    idPrefix: 'divider',
+  },
   render: (args) => (
-    <Radios
-      legend="How do you want to sign in?"
-      legendProps={{ isPageHeading: true, size: 'l' }}
-      name="example"
-      id="example-divider"
-    >
+    <Radios {...args}>
       <Radios.Item value="government-gateway">Use Government Gateway</Radios.Item>
       <Radios.Item value="nhsuk-login">Use NHS.UK login</Radios.Item>
       <Radios.Divider>or</Radios.Divider>
@@ -120,22 +97,22 @@ export const RadiosWithADivider: Story = {
 };
 
 export const RadiosWithHintsOnItems: Story = {
+  args: {
+    legend: 'How do you want to sign in?',
+    hint: undefined,
+    idPrefix: 'hints',
+  },
   render: (args) => (
-    <Radios
-      legend="How do you want to sign in?"
-      legendProps={{ isPageHeading: true, size: 'l' }}
-      name="example"
-      id="example-with-hints"
-    >
+    <Radios {...args}>
       <Radios.Item
         value="government-gateway"
-        hint="You&#39;ll have a user ID if you've registered for self-assessment or filed a tax return online before."
+        hint="You'll have a user ID if you've registered for self-assessment or filed a tax return online before."
       >
         Use Government Gateway
       </Radios.Item>
       <Radios.Item
         value="nhsuk-login"
-        hint="You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity."
+        hint="You'll have an account if you've already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity."
       >
         Use NHS.UK login
       </Radios.Item>
@@ -143,32 +120,33 @@ export const RadiosWithHintsOnItems: Story = {
   ),
 };
 
-export const RadiosWithoutFieldset: Story = {
+export const DisabledRadios: Story = {
+  args: {
+    idPrefix: 'disabled',
+  },
   render: (args) => (
-    <Radios name="colours" id="colours">
-      <Radios.Item value="red">Red</Radios.Item>
-      <Radios.Item value="green">Green</Radios.Item>
-      <Radios.Item value="blue">Blue</Radios.Item>
+    <Radios {...args}>
+      <Radios.Item disabled value="yes">
+        Yes
+      </Radios.Item>
+      <Radios.Item disabled value="no">
+        No
+      </Radios.Item>
     </Radios>
   ),
 };
 
 export const RadiosWithError: Story = {
-  render: function RadiosWithErrorRender() {
+  args: {
+    idPrefix: 'error',
+  },
+  render: function RadiosWithErrorRender(args) {
     const [error, setError] = useState('Select yes if you have changed your name');
     return (
       <>
-        <Radios
-          legend="Have you changed your name?"
-          legendProps={{ isPageHeading: true, size: 'l' }}
-          hint="This includes changing your last name or spelling your name differently"
-          name="example-with-err-string"
-          error={error}
-        >
-          <Radios.Item id="example-1" value="yes">
-            Yes
-          </Radios.Item>
-          <Radios.Item id="example-2" value="no" defaultChecked>
+        <Radios error={error} {...args}>
+          <Radios.Item value="yes">Yes</Radios.Item>
+          <Radios.Item value="no" defaultChecked>
             No
           </Radios.Item>
         </Radios>
diff --git a/stories/Form Elements/Select.stories.tsx b/stories/Form Elements/Select.stories.tsx
index a4e74e18..ea9180da 100644
--- a/stories/Form Elements/Select.stories.tsx	
+++ b/stories/Form Elements/Select.stories.tsx	
@@ -5,17 +5,20 @@ import { Select, TextInput } from '#components';
 const meta: Meta<typeof Select> = {
   title: 'Form Elements/Select',
   component: Select,
+  args: {
+    label: 'Label text goes here',
+    labelProps: { isPageHeading: true, size: 'l' },
+  },
 };
 export default meta;
 type Story = StoryObj<typeof Select>;
 
 export const Standard: Story = {
+  args: {
+    defaultValue: '2',
+  },
   render: (args) => (
-    <Select
-      label="Label text goes here"
-      labelProps={{ isPageHeading: true, size: 'l' }}
-      defaultValue="2"
-    >
+    <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>
@@ -26,12 +29,11 @@ export const Standard: Story = {
 };
 
 export const SelectWithHintText: Story = {
+  args: {
+    hint: 'Hint text goes here',
+  },
   render: (args) => (
-    <Select
-      label="Label text goes here"
-      labelProps={{ isPageHeading: true, size: 'l' }}
-      hint="Hint text goes here"
-    >
+    <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>
@@ -40,15 +42,11 @@ export const SelectWithHintText: Story = {
 };
 
 export const SelectWithError: Story = {
-  render: function SelectWithErrorRender() {
+  render: function SelectWithErrorRender(args) {
     const [error, setError] = useState<string>('Error message goes here');
     return (
       <>
-        <Select
-          label="Label text goes here"
-          labelProps={{ isPageHeading: true, size: 'l' }}
-          error={error}
-        >
+        <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>
@@ -61,17 +59,15 @@ export const SelectWithError: Story = {
   name: 'Select With Error (String)',
 };
 
-export const SelectWithErrorAndHintString: Story = {
-  render: function SelectWithErrorAndHintStringRender() {
+export const SelectWithErrorAndHintText: Story = {
+  args: {
+    hint: 'Hint text goes here',
+  },
+  render: function SelectWithErrorAndHintTextRender(args) {
     const [error, setError] = useState<string>('Error message goes here');
     return (
       <>
-        <Select
-          label="Label text goes here"
-          labelProps={{ isPageHeading: true, size: 'l' }}
-          hint="Hint text goes here"
-          error={error}
-        >
+        <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>
diff --git a/stories/Form Elements/Textarea.stories.tsx b/stories/Form Elements/Textarea.stories.tsx
index 4ba9dae1..10077c82 100644
--- a/stories/Form Elements/Textarea.stories.tsx	
+++ b/stories/Form Elements/Textarea.stories.tsx	
@@ -6,6 +6,9 @@ const meta: Meta<typeof Textarea> = {
   title: 'Form Elements/Textarea',
   component: Textarea,
   args: {
+    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: 'example',
     name: 'example',
     rows: 5,
@@ -14,37 +17,20 @@ const meta: Meta<typeof Textarea> = {
 export default meta;
 type Story = StoryObj<typeof Textarea>;
 
-export const Standard: Story = {
-  args: {
-    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',
-  },
-};
+export const Standard: Story = {};
 
 export const TextareaWithAutoCompleteAttribute: Story = {
   args: {
-    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',
     autoComplete: 'street-address',
   },
 };
 
 export const TextareaWithError: Story = {
-  render: function TextareaWithErrorRender() {
+  render: function TextareaWithErrorRender(args) {
     const [error, setError] = useState<string>('You must provide an explanation');
     return (
       <>
-        <Textarea
-          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"
-          error={error}
-          id="with-error-message"
-          name="with-error-message"
-          rows={5}
-        />
+        <Textarea error={error} {...args} />
         <TextInput onChange={(e) => setError(e.currentTarget.value)} value={error} />
       </>
     );
diff --git a/stories/Navigation/Breadcrumb.stories.tsx b/stories/Navigation/Breadcrumb.stories.tsx
index dfbfeea6..a08b4837 100644
--- a/stories/Navigation/Breadcrumb.stories.tsx
+++ b/stories/Navigation/Breadcrumb.stories.tsx
@@ -34,9 +34,17 @@ import { Breadcrumb, Container } from '#components';
 const meta: Meta<typeof Breadcrumb> = {
   title: 'Navigation/Breadcrumb',
   component: Breadcrumb,
+  argTypes: {
+    'aria-label': {
+      control: 'text',
+      table: {
+        defaultValue: { summary: 'Breadcrumb' },
+      },
+    },
+  },
   render: (args) => (
     <Container>
-      <Breadcrumb aria-label={args['aria-label']}>
+      <Breadcrumb {...args}>
         <Breadcrumb.Item href="/level/one">Level One</Breadcrumb.Item>
         <Breadcrumb.Item href="/level/two">Level Two</Breadcrumb.Item>
         <Breadcrumb.Item href="/level/three">Level Three</Breadcrumb.Item>
diff --git a/stories/Navigation/Card.stories.tsx b/stories/Navigation/Card.stories.tsx
index fa336ab6..cc8d2985 100644
--- a/stories/Navigation/Card.stories.tsx
+++ b/stories/Navigation/Card.stories.tsx
@@ -12,7 +12,7 @@ type StoryGroup = StoryObj<typeof Card.GroupItem>;
 
 export const Standard: Story = {
   render: (args) => (
-    <Card>
+    <Card {...args}>
       <Card.Content>
         <Card.Heading>If you need help now but it&apos;s not an emergency</Card.Heading>
         <Card.Description>
@@ -24,9 +24,11 @@ export const Standard: Story = {
 };
 
 export const ClickableCard: Story = {
-  args: { clickable: true },
+  args: {
+    clickable: true,
+  },
   render: (args) => (
-    <Card clickable={args.clickable}>
+    <Card {...args}>
       <Card.Content>
         <Card.Heading className="nhsuk-heading-m">
           <Card.Link href="#">Introduction to care and support</Card.Link>
@@ -40,9 +42,11 @@ export const ClickableCard: Story = {
 };
 
 export const CardWithImage: Story = {
-  args: { clickable: true },
+  args: {
+    clickable: true,
+  },
   render: (args) => (
-    <Card clickable={args.clickable}>
+    <Card {...args}>
       <Card.Image
         src="https://assets.nhs.uk/prod/images/A_0218_exercise-main_FKW1X7.width-690.jpg"
         alt=""
@@ -60,8 +64,11 @@ export const CardWithImage: Story = {
 };
 
 export const FeatureCard: Story = {
-  render: () => (
-    <Card cardType="feature">
+  args: {
+    cardType: 'feature',
+  },
+  render: (args) => (
+    <Card {...args}>
       <Card.Content>
         <Card.Heading>Feature card heading</Card.Heading>
         <Card.Description>Feature card description</Card.Description>
@@ -71,8 +78,11 @@ export const FeatureCard: Story = {
 };
 
 export const FeatureCardWithList: Story = {
-  render: () => (
-    <Card cardType="feature">
+  args: {
+    cardType: 'feature',
+  },
+  render: (args) => (
+    <Card {...args}>
       <Card.Content>
         <Card.Heading>Feature card heading</Card.Heading>
         <ul className="nhsuk-list nhsuk-list--border">
@@ -92,8 +102,12 @@ export const FeatureCardWithList: Story = {
 };
 
 export const PrimaryCardWithChevron: Story = {
-  render: () => (
-    <Card clickable cardType="primary">
+  args: {
+    cardType: 'primary',
+    clickable: true,
+  },
+  render: (args) => (
+    <Card {...args}>
       <Card.Content>
         <Card.Heading>
           <Card.Link href="#">Primary card heading</Card.Link>
@@ -106,8 +120,12 @@ export const PrimaryCardWithChevron: Story = {
 };
 
 export const SecondaryCard: Story = {
-  render: () => (
-    <Card clickable cardType="secondary">
+  args: {
+    cardType: 'secondary',
+    clickable: true,
+  },
+  render: (args) => (
+    <Card {...args}>
       <Card.Content>
         <Card.Heading>
           <Card.Link href="#">Secondary card heading</Card.Link>
@@ -128,7 +146,7 @@ export const CardGroup: StoryGroup = {
   },
   render: (args) => (
     <Card.Group>
-      <Card.GroupItem width={args.width}>
+      <Card.GroupItem {...args}>
         <Card clickable>
           <Card.Content>
             <Card.Heading className="nhsuk-heading-m">
@@ -140,7 +158,7 @@ export const CardGroup: StoryGroup = {
           </Card.Content>
         </Card>
       </Card.GroupItem>
-      <Card.GroupItem width={args.width}>
+      <Card.GroupItem {...args}>
         <Card clickable>
           <Card.Content>
             <Card.Heading className="nhsuk-heading-m">
@@ -152,7 +170,7 @@ export const CardGroup: StoryGroup = {
           </Card.Content>
         </Card>
       </Card.GroupItem>
-      <Card.GroupItem width={args.width}>
+      <Card.GroupItem {...args}>
         <Card clickable>
           <Card.Content>
             <Card.Heading className="nhsuk-heading-m">
@@ -164,7 +182,7 @@ export const CardGroup: StoryGroup = {
           </Card.Content>
         </Card>
       </Card.GroupItem>
-      <Card.GroupItem width={args.width}>
+      <Card.GroupItem {...args}>
         <Card clickable>
           <Card.Content>
             <Card.Heading className="nhsuk-heading-m">
@@ -181,9 +199,11 @@ export const CardGroup: StoryGroup = {
 };
 
 export const NonUrgentCareCard: Story = {
-  args: { cardType: 'non-urgent' },
+  args: {
+    cardType: 'non-urgent',
+  },
   render: (args) => (
-    <Card cardType={args.cardType}>
+    <Card {...args}>
       <Card.Heading>Speak to a GP if:</Card.Heading>
       <Card.Content>
         <ul>
@@ -204,9 +224,11 @@ export const NonUrgentCareCard: Story = {
 };
 
 export const UrgentCareCard: Story = {
-  args: { cardType: 'urgent' },
+  args: {
+    cardType: 'urgent',
+  },
   render: (args) => (
-    <Card cardType={args.cardType}>
+    <Card {...args}>
       <Card.Heading>Ask for an urgent GP appointment if:</Card.Heading>
       <Card.Content>
         <ul>
@@ -230,9 +252,11 @@ export const UrgentCareCard: Story = {
 };
 
 export const EmergencyCareCard: Story = {
-  args: { cardType: 'emergency' },
+  args: {
+    cardType: 'emergency',
+  },
   render: (args) => (
-    <Card cardType={args.cardType}>
+    <Card {...args}>
       <Card.Heading>Call 999 or go to A&E now if:</Card.Heading>
       <Card.Content>
         <ul>
diff --git a/stories/Navigation/ContentsList.stories.tsx b/stories/Navigation/ContentsList.stories.tsx
index 50940b91..cd5821ad 100644
--- a/stories/Navigation/ContentsList.stories.tsx
+++ b/stories/Navigation/ContentsList.stories.tsx
@@ -48,8 +48,22 @@ export default meta;
 type Story = StoryObj<typeof ContentsList>;
 
 export const Standard: Story = {
+  argTypes: {
+    'aria-label': {
+      control: 'text',
+      table: {
+        defaultValue: { summary: 'Pages in this guide' },
+      },
+    },
+    'visuallyHiddenText': {
+      control: 'text',
+      table: {
+        defaultValue: { summary: 'Contents' },
+      },
+    },
+  },
   render: (args) => (
-    <ContentsList aria-label="Pages in this guide">
+    <ContentsList {...args}>
       <ContentsList.Item current>What is AMD?</ContentsList.Item>
       <ContentsList.Item href="https://www.nhs.uk/conditions/age-related-macular-degeneration-amd/symptoms/">
         Symptoms
diff --git a/stories/Navigation/Footer.stories.tsx b/stories/Navigation/Footer.stories.tsx
index a8988e2e..489d65f6 100644
--- a/stories/Navigation/Footer.stories.tsx
+++ b/stories/Navigation/Footer.stories.tsx
@@ -10,7 +10,7 @@ type Story = StoryObj<typeof Footer>;
 
 export const Standard: Story = {
   render: (args) => (
-    <Footer>
+    <Footer {...args}>
       <Footer.Meta>
         <Footer.ListItem href="#">About us</Footer.ListItem>
         <Footer.ListItem href="#">Accessibility statement</Footer.ListItem>
@@ -25,7 +25,7 @@ export const Standard: Story = {
 
 export const WithLinksArrangedInColumns: Story = {
   render: (args) => (
-    <Footer>
+    <Footer {...args}>
       <Footer.List>
         <Footer.ListItem href="#">Home</Footer.ListItem>
         <Footer.ListItem href="#">Health A to Z</Footer.ListItem>
diff --git a/stories/Navigation/Header.stories.tsx b/stories/Navigation/Header.stories.tsx
index e5e58e69..39ee41c7 100644
--- a/stories/Navigation/Header.stories.tsx
+++ b/stories/Navigation/Header.stories.tsx
@@ -10,13 +10,14 @@ export default meta;
 type Story = StoryObj<typeof Header>;
 
 export const HeaderDefault: Story = {
+  args: {
+    service: {
+      text: 'Digital service manual',
+      href: '/',
+    },
+  },
   render: (args) => (
-    <Header
-      service={{
-        text: 'Digital service manual',
-        href: '/',
-      }}
-    >
+    <Header {...args}>
       <Header.Search
         placeholder="Search"
         visuallyHiddenLabel="Search the NHS digital service manual"
@@ -33,31 +34,45 @@ export const HeaderDefault: Story = {
 };
 
 export const HeaderBasic: Story = {
-  render: (args) => <Header logo={{ href: '/' }} />,
+  args: {
+    logo: {
+      href: '/',
+    },
+  },
+  render: (args) => <Header {...args} />,
 };
 
 export const HeaderWithServiceName: Story = {
-  render: (args) => (
-    <Header
-      service={{
-        text: 'Manage patients',
-        href: '/',
-      }}
-    />
-  ),
+  args: {
+    service: {
+      text: 'Manage patients',
+      href: '/',
+    },
+  },
+  render: (args) => <Header {...args} />,
 };
 
 export const HeaderWithSearch: Story = {
+  args: {
+    logo: {
+      href: '/',
+    },
+  },
   render: (args) => (
-    <Header logo={{ href: '/' }}>
+    <Header {...args}>
       <Header.Search />
     </Header>
   ),
 };
 
 export const HeaderWithNavigation: Story = {
+  args: {
+    logo: {
+      href: '/',
+    },
+  },
   render: (args) => (
-    <Header logo={{ href: '/' }}>
+    <Header {...args}>
       <Header.Navigation>
         <Header.NavigationItem href="#">NHS service standard</Header.NavigationItem>
         <Header.NavigationItem href="#" active>
@@ -72,13 +87,14 @@ export const HeaderWithNavigation: Story = {
 };
 
 export const HeaderWithAccount: Story = {
+  args: {
+    service: {
+      text: 'Manage patients',
+      href: '/',
+    },
+  },
   render: (args) => (
-    <Header
-      service={{
-        text: 'Manage patients',
-        href: '/',
-      }}
-    >
+    <Header {...args}>
       <Header.Account>
         <Header.AccountItem href="#" icon>
           florence.nightingale@nhs.net
@@ -92,13 +108,14 @@ export const HeaderWithAccount: Story = {
 };
 
 export const HeaderWithAccountComplex: Story = {
+  args: {
+    service: {
+      text: 'Manage patients',
+      href: '/',
+    },
+  },
   render: (args) => (
-    <Header
-      service={{
-        text: 'Manage patients',
-        href: '/',
-      }}
-    >
+    <Header {...args}>
       <Header.Account>
         <Header.AccountItem href="#" icon>
           Florence Nightingale (Regional Manager)
@@ -118,15 +135,16 @@ export const HeaderWithAccountComplex: Story = {
 };
 
 export const HeaderOrganisationalBlueWithNavigation: Story = {
+  args: {
+    logo: { href: '/' },
+    organisation: {
+      name: 'Anytown Anyplace',
+      split: 'Anywhere',
+      descriptor: 'NHS Foundation Trust',
+    },
+  },
   render: (args) => (
-    <Header
-      logo={{ href: '/' }}
-      organisation={{
-        name: 'Anytown Anyplace',
-        split: 'Anywhere',
-        descriptor: 'NHS Foundation Trust',
-      }}
-    >
+    <Header {...args}>
       <Header.Search visuallyHiddenLabel="Search the Anytown Anyplace Anywhere website" />
       <Header.Navigation>
         <Header.NavigationItem href="#">Your hospital visit</Header.NavigationItem>
@@ -142,16 +160,17 @@ export const HeaderOrganisationalBlueWithNavigation: Story = {
 };
 
 export const HeaderOrganisationalWhiteWithNavigation: Story = {
+  args: {
+    logo: { href: '/' },
+    organisation: {
+      name: 'Anytown Anyplace',
+      split: 'Anywhere',
+      descriptor: 'NHS Foundation Trust',
+    },
+    white: true,
+  },
   render: (args) => (
-    <Header
-      className="nhsuk-header--white"
-      logo={{ href: '/' }}
-      organisation={{
-        name: 'Anytown Anyplace',
-        split: 'Anywhere',
-        descriptor: 'NHS Foundation Trust',
-      }}
-    >
+    <Header {...args}>
       <Header.Search />
       <Header.Navigation>
         <Header.NavigationItem href="#">Your hospital visit</Header.NavigationItem>
@@ -167,16 +186,17 @@ export const HeaderOrganisationalWhiteWithNavigation: Story = {
 };
 
 export const HeaderOrganisationalWhiteWithNavigationWhite: Story = {
+  args: {
+    logo: { href: '/' },
+    organisation: {
+      name: 'Anytown Anyplace',
+      split: 'Anywhere',
+      descriptor: 'NHS Foundation Trust',
+    },
+    white: true,
+  },
   render: (args) => (
-    <Header
-      className="nhsuk-header--white"
-      logo={{ href: '/' }}
-      organisation={{
-        name: 'Anytown Anyplace',
-        split: 'Anywhere',
-        descriptor: 'NHS Foundation Trust',
-      }}
-    >
+    <Header {...args}>
       <Header.Search />
       <Header.Navigation white>
         <Header.NavigationItem href="#">Your hospital visit</Header.NavigationItem>
@@ -192,6 +212,14 @@ export const HeaderOrganisationalWhiteWithNavigationWhite: Story = {
 };
 
 export const HeaderWithCustomNavItemComponent: Story = {
+  args: {
+    logo: { href: '/' },
+    organisation: {
+      name: 'Anytown Anyplace',
+      split: 'Anywhere',
+      descriptor: 'NHS Foundation Trust',
+    },
+  },
   render: (args) => {
     function CustomLink({ children, href, ...rest }: ComponentProps<'a'>) {
       return (
@@ -202,14 +230,7 @@ export const HeaderWithCustomNavItemComponent: Story = {
     }
 
     return (
-      <Header
-        logo={{ href: '/' }}
-        organisation={{
-          name: 'Anytown Anyplace',
-          split: 'Anywhere',
-          descriptor: 'NHS Foundation Trust',
-        }}
-      >
+      <Header {...args}>
         <Header.Search />
         <Header.Navigation white>
           <Header.NavigationItem to="/" asElement={CustomLink}>
diff --git a/stories/Navigation/Pagination.stories.tsx b/stories/Navigation/Pagination.stories.tsx
index f574550f..3d5c46bd 100644
--- a/stories/Navigation/Pagination.stories.tsx
+++ b/stories/Navigation/Pagination.stories.tsx
@@ -10,7 +10,7 @@ type Story = StoryObj<typeof Pagination>;
 
 export const Standard: Story = {
   render: (args) => (
-    <Pagination>
+    <Pagination {...args}>
       <Pagination.Link previous href="/section/treatments">
         Treatments
       </Pagination.Link>
diff --git a/stories/Navigation/SkipLink.stories.tsx b/stories/Navigation/SkipLink.stories.tsx
index ea652b04..ba96f3f4 100644
--- a/stories/Navigation/SkipLink.stories.tsx
+++ b/stories/Navigation/SkipLink.stories.tsx
@@ -29,7 +29,7 @@ const meta: Meta<typeof SkipLink> = {
         <CodeText>tab</CodeText>
         to show the SkipLink
       </HintText>
-      <SkipLink />
+      <SkipLink {...args} />
       <h1>Page heading</h1>
       <div id="maincontent">This is the main content</div>
     </>

From a3198994e05e1c734987f6ec81bdd196cc4e5c58 Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Thu, 16 Oct 2025 10:02:47 +0100
Subject: [PATCH 4/6] Remove out of date comment

---
 stories/Form Elements/CharacterCount.stories.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/stories/Form Elements/CharacterCount.stories.tsx b/stories/Form Elements/CharacterCount.stories.tsx
index 9074bac4..6a5555e3 100644
--- a/stories/Form Elements/CharacterCount.stories.tsx	
+++ b/stories/Form Elements/CharacterCount.stories.tsx	
@@ -32,8 +32,6 @@ export const Standard: Story = {
 
 /**
  * Sometimes, rather than counting the number of characters, it is useful to count the number of words instead.
- *
- * Use the `countType` prop to vary this behaviour.
  */
 export const WordCountLimit: Story = {
   args: {

From c4d4d29890485849e5a8a83bd0507b2c9c345f4c Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Thu, 16 Oct 2025 17:00:50 +0100
Subject: [PATCH 5/6] Remove unnecessary wrappers

---
 stories/Form Elements/Checkboxes.stories.tsx | 120 +++++++++----------
 stories/Form Elements/DateInput.stories.tsx  |  48 +++-----
 stories/Form Elements/Radios.stories.tsx     |  14 +--
 3 files changed, 77 insertions(+), 105 deletions(-)

diff --git a/stories/Form Elements/Checkboxes.stories.tsx b/stories/Form Elements/Checkboxes.stories.tsx
index 0ff4c0f7..1c88dd49 100644
--- a/stories/Form Elements/Checkboxes.stories.tsx	
+++ b/stories/Form Elements/Checkboxes.stories.tsx	
@@ -51,13 +51,11 @@ type CheckboxState = {
 
 export const Standard: Story = {
   render: (args) => (
-    <form>
-      <Checkboxes {...args}>
-        <Checkboxes.Item value="british">British</Checkboxes.Item>
-        <Checkboxes.Item value="irish">Irish</Checkboxes.Item>
-        <Checkboxes.Item value="other">Citizen of another country</Checkboxes.Item>
-      </Checkboxes>
-    </form>
+    <Checkboxes {...args}>
+      <Checkboxes.Item value="british">British</Checkboxes.Item>
+      <Checkboxes.Item value="irish">Irish</Checkboxes.Item>
+      <Checkboxes.Item value="other">Citizen of another country</Checkboxes.Item>
+    </Checkboxes>
   ),
 };
 
@@ -67,39 +65,35 @@ export const WithHintText: Story = {
     hint: undefined,
   },
   render: (args) => (
-    <form>
-      <Checkboxes {...args}>
-        <Checkboxes.Item
-          name="gateway"
-          type="checkbox"
-          value="gov-gateway"
-          hint="You’ll have a user ID if you’ve registered for Self Assessment or filed a tax return online before."
-        >
-          Sign in with Government Gateway
-        </Checkboxes.Item>
-        <Checkboxes.Item
-          name="verify"
-          value="nhsuk-verify"
-          hint="You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity."
-        >
-          Sign in with NHS.UK login
-        </Checkboxes.Item>
-      </Checkboxes>
-    </form>
+    <Checkboxes {...args}>
+      <Checkboxes.Item
+        name="gateway"
+        type="checkbox"
+        value="gov-gateway"
+        hint="You’ll have a user ID if you’ve registered for Self Assessment or filed a tax return online before."
+      >
+        Sign in with Government Gateway
+      </Checkboxes.Item>
+      <Checkboxes.Item
+        name="verify"
+        value="nhsuk-verify"
+        hint="You’ll have an account if you’ve already proved your identity with either Barclays, CitizenSafe, Digidentity, Experian, Post Office, Royal Mail or SecureIdentity."
+      >
+        Sign in with NHS.UK login
+      </Checkboxes.Item>
+    </Checkboxes>
   ),
 };
 
 export const WithDisabledItem: Story = {
   render: (args) => (
-    <form>
-      <Checkboxes {...args}>
-        <Checkboxes.Item value="british">British</Checkboxes.Item>
-        <Checkboxes.Item value="irish">Irish</Checkboxes.Item>
-        <Checkboxes.Item value="other" disabled>
-          Citizen of another country
-        </Checkboxes.Item>
-      </Checkboxes>
-    </form>
+    <Checkboxes {...args}>
+      <Checkboxes.Item value="british">British</Checkboxes.Item>
+      <Checkboxes.Item value="irish">Irish</Checkboxes.Item>
+      <Checkboxes.Item value="other" disabled>
+        Citizen of another country
+      </Checkboxes.Item>
+    </Checkboxes>
   ),
 };
 
@@ -109,13 +103,11 @@ export const WithConditionalContent: Story = {
     hint: 'Select all that apply',
   },
   render: (args) => (
-    <form>
-      <Checkboxes {...args}>
-        <Checkboxes.Item conditional={<p>This includes rocks and earth.</p>} value="mines">
-          Waste from mines or quarries
-        </Checkboxes.Item>
-      </Checkboxes>
-    </form>
+    <Checkboxes {...args}>
+      <Checkboxes.Item conditional={<p>This includes rocks and earth.</p>} value="mines">
+        Waste from mines or quarries
+      </Checkboxes.Item>
+    </Checkboxes>
   ),
 };
 
@@ -125,17 +117,15 @@ export const WithExclusiveNoneOption: Story = {
     hint: 'Select all the symptoms you have',
   },
   render: (args) => (
-    <form>
-      <Checkboxes {...args}>
-        <Checkboxes.Item value="sore-throat">Sore throat</Checkboxes.Item>
-        <Checkboxes.Item value="runny-nose">Runny nose</Checkboxes.Item>
-        <Checkboxes.Item value="muscle-pain">Muscle or joint pain</Checkboxes.Item>
-        <Checkboxes.Divider />
-        <Checkboxes.Item value="none" exclusive>
-          None
-        </Checkboxes.Item>
-      </Checkboxes>
-    </form>
+    <Checkboxes {...args}>
+      <Checkboxes.Item value="sore-throat">Sore throat</Checkboxes.Item>
+      <Checkboxes.Item value="runny-nose">Runny nose</Checkboxes.Item>
+      <Checkboxes.Item value="muscle-pain">Muscle or joint pain</Checkboxes.Item>
+      <Checkboxes.Divider />
+      <Checkboxes.Item value="none" exclusive>
+        None
+      </Checkboxes.Item>
+    </Checkboxes>
   ),
 };
 
@@ -148,7 +138,7 @@ export const WithError: Story = {
     // eslint-disable-next-line react-hooks/rules-of-hooks
     const [error, setError] = useState('Please select an option');
     return (
-      <form>
+      <>
         <Checkboxes error={error} {...args}>
           <Checkboxes.Item value="animal">Waste from animal carcasses</Checkboxes.Item>
           <Checkboxes.Item value="mines">Waste from mines or quarries</Checkboxes.Item>
@@ -159,7 +149,7 @@ export const WithError: Story = {
           value={error}
           onChange={(e) => setError(e.currentTarget.value)}
         />
-      </form>
+      </>
     );
   },
   name: 'With Error (String)',
@@ -204,7 +194,7 @@ export const NoIDSupplied: Story = {
     }, []);
 
     return (
-      <form style={{ padding: 20 }}>
+      <>
         <h2>Scenario: No ID Supplied</h2>
         <h5>Expected Behaviour</h5>
         <ul className="nhsuk-hint">
@@ -244,7 +234,7 @@ export const NoIDSupplied: Story = {
           <Checkboxes.Item ref={checkbox2Ref}>Box 2</Checkboxes.Item>
           <Checkboxes.Item ref={checkbox3Ref}>Box 3</Checkboxes.Item>
         </Checkboxes>
-      </form>
+      </>
     );
   },
 };
@@ -288,7 +278,7 @@ export const NameSupplied: Story = {
     }, []);
 
     return (
-      <form style={{ padding: 20 }}>
+      <>
         <h2>Scenario: Name Supplied</h2>
         <h5>Expected Behaviour</h5>
         <ul className="nhsuk-hint">
@@ -328,7 +318,7 @@ export const NameSupplied: Story = {
           <Checkboxes.Item ref={checkbox2Ref}>Box 2</Checkboxes.Item>
           <Checkboxes.Item ref={checkbox3Ref}>Box 3</Checkboxes.Item>
         </Checkboxes>
-      </form>
+      </>
     );
   },
 };
@@ -372,7 +362,7 @@ export const IDPrefixSupplied: Story = {
     }, []);
 
     return (
-      <form style={{ padding: 20 }}>
+      <>
         <h2>Scenario: ID Prefix Supplied</h2>
         <h5>Expected Behaviour</h5>
         <ul className="nhsuk-hint">
@@ -413,7 +403,7 @@ export const IDPrefixSupplied: Story = {
           <Checkboxes.Item ref={checkbox2Ref}>Box 2</Checkboxes.Item>
           <Checkboxes.Item ref={checkbox3Ref}>Box 3</Checkboxes.Item>
         </Checkboxes>
-      </form>
+      </>
     );
   },
 };
@@ -457,7 +447,7 @@ export const IDPrefixAndNameSupplied: Story = {
     }, []);
 
     return (
-      <form style={{ padding: 20 }}>
+      <>
         <h2>Scenario: ID Prefix and Name Supplied</h2>
         <h5>Expected Behaviour</h5>
         <ul className="nhsuk-hint">
@@ -498,7 +488,7 @@ export const IDPrefixAndNameSupplied: Story = {
           <Checkboxes.Item ref={checkbox2Ref}>Box 2</Checkboxes.Item>
           <Checkboxes.Item ref={checkbox3Ref}>Box 3</Checkboxes.Item>
         </Checkboxes>
-      </form>
+      </>
     );
   },
 };
@@ -531,7 +521,7 @@ export const OnChangeAndOnInputHandlers: Story = {
     };
 
     return (
-      <form style={{ padding: 20 }}>
+      <>
         <h2>Scenario: onChange and onInput handlers are bound without any other props</h2>
         <h5>Expected Behaviour</h5>
         <ul className="nhsuk-hint">
@@ -559,7 +549,7 @@ export const OnChangeAndOnInputHandlers: Story = {
             <li key={index}>{event}</li>
           ))}
         </ul>
-      </form>
+      </>
     );
   },
 };
diff --git a/stories/Form Elements/DateInput.stories.tsx b/stories/Form Elements/DateInput.stories.tsx
index 5ce48a5f..674c1855 100644
--- a/stories/Form Elements/DateInput.stories.tsx	
+++ b/stories/Form Elements/DateInput.stories.tsx	
@@ -16,7 +16,7 @@ type Story = StoryObj<typeof DateInput>;
 
 export const Standard: Story = {
   render: (args) => (
-    <div style={{ padding: 20 }}>
+    <>
       <h2>Scenario: onChange and onInput handlers are bound without any other props</h2>
       <h5>Expected Behaviour</h5>
       <ul className="nhsuk-hint">
@@ -25,13 +25,13 @@ export const Standard: Story = {
       </ul>
       <h5>Component</h5>
       <DateInput onChange={(e) => console.log(e.target.value)} {...args} />
-    </div>
+    </>
   ),
 };
 
 export const StandardWithError: Story = {
   render: (args) => (
-    <div style={{ padding: 20 }}>
+    <>
       <h2>Scenario: onChange and onInput handlers are bound without any other props</h2>
       <h5>Expected Behaviour</h5>
       <ul className="nhsuk-hint">
@@ -55,7 +55,7 @@ export const StandardWithError: Story = {
         <DateInput.Month error={false} />
         <DateInput.Year error={false} />
       </DateInput>
-    </div>
+    </>
   ),
 };
 
@@ -63,14 +63,11 @@ export const PrePopulatedIndividualComponents: Story = {
   render: (args) => {
     const defaultValue = { day: '20', month: '09', year: '1996' };
     return (
-      <div style={{ padding: 20 }}>
-        <h5>Component</h5>
-        <DateInput {...args}>
-          <DateInput.Day defaultValue={defaultValue.day} />
-          <DateInput.Month defaultValue={defaultValue.month} />
-          <DateInput.Year defaultValue={defaultValue.year} />
-        </DateInput>
-      </div>
+      <DateInput {...args}>
+        <DateInput.Day defaultValue={defaultValue.day} />
+        <DateInput.Month defaultValue={defaultValue.month} />
+        <DateInput.Year defaultValue={defaultValue.year} />
+      </DateInput>
     );
   },
 };
@@ -84,12 +81,7 @@ export const PrePopulatedWrapper: Story = {
     },
   },
   render: (args) => {
-    return (
-      <div style={{ padding: 20 }}>
-        <h5>Component</h5>
-        <DateInput {...args} />
-      </div>
-    );
+    return <DateInput {...args} />;
   },
 };
 
@@ -103,14 +95,11 @@ export const ControlledElementIndividualComponents: Story = {
   },
   render: ({ value, ...args }) => {
     return (
-      <div style={{ padding: 20 }}>
-        <h5>Component</h5>
-        <DateInput {...args}>
-          <DateInput.Day value={value?.day} />
-          <DateInput.Month value={value?.month} />
-          <DateInput.Year value={value?.year} />
-        </DateInput>
-      </div>
+      <DateInput {...args}>
+        <DateInput.Day value={value?.day} />
+        <DateInput.Month value={value?.month} />
+        <DateInput.Year value={value?.year} />
+      </DateInput>
     );
   },
 };
@@ -124,12 +113,7 @@ export const ControlledElementWrapper: Story = {
     },
   },
   render: (args) => {
-    return (
-      <div style={{ padding: 20 }}>
-        <h5>Component</h5>
-        <DateInput {...args} />
-      </div>
-    );
+    return <DateInput {...args} />;
   },
 };
 
diff --git a/stories/Form Elements/Radios.stories.tsx b/stories/Form Elements/Radios.stories.tsx
index 9156dc76..e7b0dc3e 100644
--- a/stories/Form Elements/Radios.stories.tsx	
+++ b/stories/Form Elements/Radios.stories.tsx	
@@ -68,14 +68,12 @@ export const RadiosWithConditionalContent: Story = {
     );
 
     return (
-      <form style={{ padding: 20 }}>
-        <Radios {...args}>
-          <Radios.Item value="yes" conditional={impairmentsForm}>
-            Patient requires an impairment to be added
-          </Radios.Item>
-          <Radios.Item value="no">Patient would prefer not to say</Radios.Item>
-        </Radios>
-      </form>
+      <Radios {...args}>
+        <Radios.Item value="yes" conditional={impairmentsForm}>
+          Patient requires an impairment to be added
+        </Radios.Item>
+        <Radios.Item value="no">Patient would prefer not to say</Radios.Item>
+      </Radios>
     );
   },
 };

From 47a9f42e608d31b40c65477e3a0f3cc642e77a84 Mon Sep 17 00:00:00 2001
From: Colin Rotherham <work@colinr.com>
Date: Thu, 16 Oct 2025 10:27:14 +0100
Subject: [PATCH 6/6] Remove implementation notes duplicated in args or
 examples

---
 .../navigation/action-link/README.md          |  2 +-
 .../Content Presentation/Details.stories.tsx  | 32 +----------------
 .../DoAndDontList.stories.tsx                 | 25 +------------
 .../NotificationBanner.stories.tsx            | 21 +----------
 stories/Form Elements/Button.stories.tsx      | 16 ++++-----
 stories/Form Elements/Checkboxes.stories.tsx  | 20 +----------
 .../Form Elements/ErrorMessage.stories.tsx    | 18 ----------
 .../Form Elements/ErrorSummary.stories.tsx    | 24 +------------
 stories/Form Elements/Fieldset.stories.tsx    | 22 ------------
 stories/Navigation/Breadcrumb.stories.tsx     | 27 --------------
 stories/Navigation/ContentsList.stories.tsx   | 36 -------------------
 11 files changed, 14 insertions(+), 229 deletions(-)

diff --git a/src/components/navigation/action-link/README.md b/src/components/navigation/action-link/README.md
index 0550c327..2d434cc7 100644
--- a/src/components/navigation/action-link/README.md
+++ b/src/components/navigation/action-link/README.md
@@ -2,7 +2,7 @@
 
 This component can be found in the `nhsuk-frontend` repository [here](https://github.com/nhsuk/nhsuk-frontend/tree/main/packages/nhsuk-frontend/src/nhsuk/components/action-link).
 
-## Implementation Notes
+## Implementation notes
 
 The ActionLink component does not use the `nhsuk-frontend` "openInNewWindow" property, instead it allows the user to add the `target="_blank"` property (if desired).
 
diff --git a/stories/Content Presentation/Details.stories.tsx b/stories/Content Presentation/Details.stories.tsx
index 4b474163..2c9a1606 100644
--- a/stories/Content Presentation/Details.stories.tsx	
+++ b/stories/Content Presentation/Details.stories.tsx	
@@ -4,43 +4,13 @@ import { Details } from '#components';
 /**
  * This component can be found in the `nhsuk-frontend` repository <a href="https://github.com/nhsuk/nhsuk-frontend/tree/main/packages/nhsuk-frontend/src/nhsuk/components/contents-list" target="_blank">here</a>.
  *
- * ## Implementation Notes
+ * ## Implementation notes
  *
  * The `Details` component has three subcomponents:
  *
  * - `Details.Summary`
  * - `Details.Text`
  * - `Details.ExpanderGroup`
- *
- * ## Usage
- *
- * ### Standard
- *
- * ```jsx
- * import { Details } from "nhsuk-react-components";
- *
- * const Element = () => {
- *     return (
- *         <Details>
- *             <Details.Summary>Where can I find my NHS number?</Details.Summary>
- *             <Details.Text>
- *                 <p>An NHS number is a 10 digit number, like 485 777 3456.</p>
- *                 <p>
- *                 You can find your NHS number on any document sent to you by the NHS. This may include:
- *                 </p>
- *                 <ul>
- *                     <li>prescriptions</li>
- *                     <li>test results</li>
- *                     <li>hospital referral letters</li>
- *                     <li>appointment letters</li>
- *                     <li>your NHS medical card</li>
- *                 </ul>
- *                 <p>Ask your GP practice for help if you can't find your NHS number.</p>
- *             </Details.Text>
- *         </Details>
- *     );
- * }
- * ```
  */
 const meta: Meta<typeof Details> = {
   title: 'Content Presentation/Details',
diff --git a/stories/Content Presentation/DoAndDontList.stories.tsx b/stories/Content Presentation/DoAndDontList.stories.tsx
index 5cdcf768..0089f79c 100644
--- a/stories/Content Presentation/DoAndDontList.stories.tsx	
+++ b/stories/Content Presentation/DoAndDontList.stories.tsx	
@@ -4,38 +4,15 @@ import { DoAndDontList } from '#components';
 /**
  * This component can be found in the `nhsuk-frontend` repository <a href="https://github.com/nhsuk/nhsuk-frontend/tree/main/packages/nhsuk-frontend/src/nhsuk/components/do-dont-list" target="_blank" rel="noopener noreferrer">here</a>.
  *
- * ## Implementation Notes
+ * ## Implementation notes
  *
  * The `DoAndDontList` component has one subcomponent: `DoAndDontList.Item`.
  *
  * As long as a `listType` is supplied to the `DoAndDontList` component, all subcomponents will render as desired. If you require a `DoAndDontList.Item` to be different, a `listItemType` prop can be supplied to force the type.
  *
- *
  * The `DoAndDontList.Item` component can also accept a `prefixText` prop, which can be used to override the default prefix text.
  *
  * See the <b><a href="#custom-prefix-text" >custom prefix text</a></b> story for an example.
- *
- * ## Usage
- *
- * ### Standard
- *
- * ```jsx
- * import { DoAndDontList } from "nhsuk-react-components";
- *
- * const Element = () => {
- *     return (
- *         <DoAndDontList listType="do">
- *             <DoAndDontList.Item>
- *                 cover blisters that are likely to burst with a soft plaster or dressing
- *             </DoAndDontList.Item>
- *             <DoAndDontList.Item>wash your hands before touching a burst blister</DoAndDontList.Item>
- *             <DoAndDontList.Item>
- *                 allow the fluid in a burst blister to drain before covering it with a plaster or dressing
- *             </DoAndDontList.Item>
- *         </DoAndDontList>
- *     );
- * }
- * ```
  */
 const meta: Meta<typeof DoAndDontList> = {
   title: 'Content Presentation/DoAndDontList',
diff --git a/stories/Content Presentation/NotificationBanner.stories.tsx b/stories/Content Presentation/NotificationBanner.stories.tsx
index 854cf26e..d5d4bae2 100644
--- a/stories/Content Presentation/NotificationBanner.stories.tsx	
+++ b/stories/Content Presentation/NotificationBanner.stories.tsx	
@@ -5,32 +5,13 @@ import { NotificationBannerLink } from '#components/content-presentation/notific
 /**
  * This component can be found in the `nhsuk-frontend` repository <a href="https://github.com/nhsuk/nhsuk-frontend/tree/main/packages/nhsuk-frontend/src/nhsuk/components/notification-banner" target="_blank">here</a>.
  *
- * ## Implementation Notes
+ * ## Implementation notes
  *
  * The `NotificationBanner` component has three subcomponents:
  *
  * - `NotificationBanner.Title`
  * - `NotificationBanner.Heading`
  * - `NotificationBanner.Link`
- *
- * ## Usage
- *
- * ### Standard
- *
- * ```jsx
- * import { NotificationBanner } from "nhsuk-react-components";
- *
- * const Element = () => {
- *     return (
- *         <NotificationBanner>
- *             <NotificationBanner.Heading>Patient record updated</Details.Summary>
- *             <p>
- *                 Contact <NotificationBanner.Link href="#">example@department.nhs.uk</NotificationBanner.Link> if you think there&#39;s a problem.
- *             </p>
- *         </NotificationBanner>
- *     );
- * }
- * ```
  */
 const meta: Meta<typeof NotificationBanner> = {
   title: 'Content Presentation/Notification Banner',
diff --git a/stories/Form Elements/Button.stories.tsx b/stories/Form Elements/Button.stories.tsx
index caaa98f3..0e6c64ca 100644
--- a/stories/Form Elements/Button.stories.tsx	
+++ b/stories/Form Elements/Button.stories.tsx	
@@ -4,7 +4,7 @@ import { Button } from '#components';
 /**
  * This component can be found in the `nhsuk-frontend` repository <a href="https://github.com/nhsuk/nhsuk-frontend/tree/main/packages/components/button" target="_blank" rel="noopener noreferrer">here</a>.
  *
- * ## Implementation Notes
+ * ## Implementation notes
  *
  * The `Button` component from `nhsuk-react-components` will either render a standard `<button>` or `<a>` element depending on whether an `href` prop is supplied.
  *
@@ -12,29 +12,29 @@ import { Button } from '#components';
  *
  * ## Usage
  *
- * ### Standard
+ * ### As a button
  *
  * ```jsx
  * import { Button } from "nhsuk-react-components";
  *
  * const Element = () => {
- *     return (
- *         <Button>Button</Button>
- *     );
+ *   return (
+ *     <Button>Button</Button>
+ *   );
  * }
  * ```
  *
- * ### As a Link
+ * ### As a link
  *
  * ```jsx
  * import { Button } from "nhsuk-react-components";
  *
  * const ButtonEl = () => (
- *     <Button as="a">Anchor</Button>
+ *   <Button as="a">Anchor</Button>
  * );
  *
  * const ButtonEl2 = () => (
- *     <Button href="/link">Anchor</Button>
+ *   <Button href="/link">Anchor</Button>
  * );
  * ```
  */
diff --git a/stories/Form Elements/Checkboxes.stories.tsx b/stories/Form Elements/Checkboxes.stories.tsx
index 1c88dd49..7972b20c 100644
--- a/stories/Form Elements/Checkboxes.stories.tsx	
+++ b/stories/Form Elements/Checkboxes.stories.tsx	
@@ -5,29 +5,11 @@ import { Checkboxes, TextInput } from '#components';
 /**
  * This component can be found in the `nhsuk-frontend` repository <a href="https://github.com/nhsuk/nhsuk-frontend/tree/main/packages/nhsuk-frontend/src/nhsuk/components/checkboxes" target="_blank" rel="noopener noreferrer">here</a>.
  *
- * ## Implementation Notes
+ * ## Implementation notes
  *
  * For details on the new form design pattern, check the documentation for the `Form` component.
  *
  * The `Checkbox` component provides a `CheckboxesContext` context, which the `Checkboxes.Item` components use. When each box initially renders, it will attempt to assign itself an `id` by calling the `getBoxId` method in the context. This will assign each box a sequential ID using either the `idPrefix` or `name` supplied to the Checkbox. If neither are provided, the element will generate it's own unique identifier.
- *
- * ## Usage
- *
- * ### Standard
- *
- * ```jsx
- * import { Checkboxes } from "nhsuk-react-components";
- *
- * const Element = () => {
- *     return (
- *         <Checkboxes name="nationality" id="nationality">
- *             <Checkboxes.Item value="british">British</Checkboxes.Item>
- *             <Checkboxes.Item value="irish">Irish</Checkboxes.Item>
- *             <Checkboxes.Item value="other">Citizen of another country</Checkboxes.Item>
- *         </Checkboxes>
- *     );
- * }
- * ```
  */
 
 const meta: Meta<typeof Checkboxes> = {
diff --git a/stories/Form Elements/ErrorMessage.stories.tsx b/stories/Form Elements/ErrorMessage.stories.tsx
index 2d255229..f72a05fd 100644
--- a/stories/Form Elements/ErrorMessage.stories.tsx	
+++ b/stories/Form Elements/ErrorMessage.stories.tsx	
@@ -3,24 +3,6 @@ import { ErrorMessage } from '#components';
 
 /**
  * This component can be found in the `nhsuk-frontend` repository <a href="https://github.com/nhsuk/nhsuk-frontend/tree/main/packages/nhsuk-frontend/src/nhsuk/components/error-message" target="_blank" rel="noopener noreferrer">here</a>.
- *
- * ## Implementation Notes
- *
- * The `ErrorMessage` component has a default `visuallyHiddenText` of "Error: ". This can be overriden using `visuallyHiddenText`.
- *
- * ## Usage
- *
- * ### Standard
- *
- * ```jsx
- * import { ErrorMessage } from "nhsuk-react-components";
- *
- * const Element = () => {
- *     return (
- *         <ErrorMessage>Enter your full name</ErrorMessage>
- *     );
- * }
- * ```
  */
 const meta: Meta<typeof ErrorMessage> = {
   title: 'Form Elements/ErrorMessage',
diff --git a/stories/Form Elements/ErrorSummary.stories.tsx b/stories/Form Elements/ErrorSummary.stories.tsx
index 1b6b6ed2..79002df3 100644
--- a/stories/Form Elements/ErrorSummary.stories.tsx	
+++ b/stories/Form Elements/ErrorSummary.stories.tsx	
@@ -4,35 +4,13 @@ import { ErrorSummary } from '#components';
 /**
  * This component can be found in the `nhsuk-frontend` repository <a href="https://github.com/nhsuk/nhsuk-frontend/tree/main/packages/nhsuk-frontend/src/nhsuk/components/error-summary" target="_blank" rel="noopener noreferrer">here</a>.
  *
- * ## Implementation Notes
+ * ## Implementation notes
  *
  * The `ErrorSummary` component has three subcomponents:
  *
  * - `ErrorSummary.Title`
  * - `ErrorSummary.List`
  * - `ErrorSummary.ListItem`
- *
- * ## Usage
- *
- * ### Standard
- *
- * ```jsx
- * import { ErrorSummary } from "nhsuk-react-components";
- *
- * const Element = () => {
- *     return (
- *         <ErrorSummary>
- *             <ErrorSummary.Title>There is a problem</ErrorSummary.Title>
- *             <p>Describe the errors and how to correct them</p>
- *             <ErrorSummary.List>
- *                 <ErrorSummary.ListItem href="#example-error-1">
- *                     Date of birth must be in the past
- *                 </ErrorSummary.ListItem>
- *             </ErrorSummary.List>
- *         </ErrorSummary>
- *     );
- * }
- * ```
  */
 const meta: Meta<typeof ErrorSummary> = {
   title: 'Form Elements/ErrorSummary',
diff --git a/stories/Form Elements/Fieldset.stories.tsx b/stories/Form Elements/Fieldset.stories.tsx
index 7b7e36e0..cb4e4c16 100644
--- a/stories/Form Elements/Fieldset.stories.tsx	
+++ b/stories/Form Elements/Fieldset.stories.tsx	
@@ -3,28 +3,6 @@ import { Fieldset, TextInput } from '#components';
 
 /**
  * This component can be found in the `nhsuk-frontend` repository <a href="https://github.com/nhsuk/nhsuk-frontend/tree/main/packages/nhsuk-frontend/src/nhsuk/components/fieldset" target="_blank" rel="noopener noreferrer">here</a>.
- *
- * ## Implementation Notes
- *
- * The `Fieldset` component has one subcomponent: `Fieldset.Legend`.
- *
- * The `Fieldset.Legend` component has one default prop: `headingLevel: 'h1'`. This can be overridden and any valid heading level can be used (i.e. `h1`, `h2`).
- *
- * ## Usage
- *
- * ### Standard
- *
- * ```jsx
- * import { Fieldset } from "nhsuk-react-components";
- *
- * const Element = () => {
- *     return (
- *         <Fieldset>
- *             <Fieldset.Legend isPageHeading size="l">What is your address?</Fieldset.Legend>
- *         </Fieldset>
- *     );
- * }
- * ```
  */
 const meta: Meta<typeof Fieldset> = {
   title: 'Form Elements/Fieldset',
diff --git a/stories/Navigation/Breadcrumb.stories.tsx b/stories/Navigation/Breadcrumb.stories.tsx
index a08b4837..14d7072b 100644
--- a/stories/Navigation/Breadcrumb.stories.tsx
+++ b/stories/Navigation/Breadcrumb.stories.tsx
@@ -3,33 +3,6 @@ import { Breadcrumb, Container } from '#components';
 
 /**
  * This component can be found in the `nhsuk-frontend` repository <a href="https://github.com/nhsuk/nhsuk-frontend/tree/main/packages/components/breadcrumb" target="_blank">here</a>.
- *
- *
- * ## Implementation Notes
- *
- * The `Breadcrumb` component contains two subcomponents: `Breadcrumb.Item` and `Breadcrumb.Back`. These are both anchor elements.
- *
- * The base `Breadcrumb` component has the default prop `aria-label` set to `"Breadcrumb"`. This is only a default prop and can be overridden.
- *
- * ## Usage
- *
- * ```jsx
- * import { Breadcrumb } from "nhsuk-react-components";
- *
- * const Link = () => {
- *     return (
- *         <Container>
- *           <Breadcrumb>
- *             <Breadcrumb.Item href="/level-one">Level one</Breadcrumb.Item>
- *             <Breadcrumb.Item href="/level-one/level-two">Level two</Breadcrumb.Item>
- *             <Breadcrumb.Item href="/level-one/level-two/level-three">Level three</Breadcrumb.Item>
- *             <Breadcrumb.Back href="/level-one/level-two/level-three">Level three</Breadcrumb.Back>
- *           </Breadcrumb>
- *         </Container>
- *
- *     );
- * }
- * ```
  */
 const meta: Meta<typeof Breadcrumb> = {
   title: 'Navigation/Breadcrumb',
diff --git a/stories/Navigation/ContentsList.stories.tsx b/stories/Navigation/ContentsList.stories.tsx
index cd5821ad..1da0b7b4 100644
--- a/stories/Navigation/ContentsList.stories.tsx
+++ b/stories/Navigation/ContentsList.stories.tsx
@@ -3,42 +3,6 @@ import { ContentsList } from '#components';
 
 /**
  * This component can be found in the `nhsuk-frontend` repository <a href="https://github.com/nhsuk/nhsuk-frontend/tree/main/packages/nhsuk-frontend/src/nhsuk/components/contents-list" target="_blank" rel="noopener noreferrer">here</a>.
- *
- * ## Implementation Notes
- *
- * The `ContentsList` component has one subcomponent: `ContentsList.Item`.
- *
- * There are two default props set to the ContentsList: `role: 'navigation'` and `visuallyHiddenText: 'Contents'`. These are only default props and can be overriden.
- *
- * ## Usage
- *
- * ### Standard
- *
- * ```jsx
- * import { ContentsList } from "nhsuk-react-components";
- *
- * const Element = () => {
- *     return (
- *         <ContentsList aria-label="Pages in this guide">
- *             <ContentsList.Item current>
- *                 What is AMD?
- *             </ContentsList.Item>
- *             <ContentsList.Item href="https://www.nhs.uk/conditions/age-related-macular-degeneration-amd/symptoms/">
- *                 Symptoms
- *             </ContentsList.Item>
- *             <ContentsList.Item href="https://www.nhs.uk/conditions/age-related-macular-degeneration-amd/getting-diagnosed/">
- *                 Getting diagnosed
- *             </ContentsList.Item>
- *             <ContentsList.Item href="https://www.nhs.uk/conditions/age-related-macular-degeneration-amd/treatment/">
- *                 Treatments
- *             </ContentsList.Item>
- *             <ContentsList.Item href="https://www.nhs.uk/conditions/age-related-macular-degeneration-amd/living-with-amd/">
- *                 Living with AMD
- *             </ContentsList.Item>
- *         </ContentsList>
- *     );
- * }
- * ```
  */
 const meta: Meta<typeof ContentsList> = {
   title: 'Navigation/ContentsList',