Add examples with captions

Author: colinrotherham

stories/Form Elements/Checkboxes.stories.tsx

@@ -43,6 +43,23 @@ export const Standard: Story = {
   ),
 };
 
+export const WithCaption: Story = {
+  args: {
+    legend: (
+      <>
+        <span className="nhsuk-caption-l">About you</span> What is your nationality?
+      </>
+    ),
+  },
+  render: (args) => (
+    <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>
+  ),
+};
+
 export const WithHintText: Story = {
   args: {
     legend: 'How do you want to sign in?',

stories/Form Elements/Radios.stories.tsx

@@ -46,6 +46,24 @@ export const InlineRadios: Story = {
   ),
 };
 
+export const RadiosWithCaption: Story = {
+  args: {
+    legend: (
+      <>
+        <span className="nhsuk-caption-l">About you</span> Have you changed your name?
+      </>
+    ),
+  },
+  render: (args) => (
+    <Radios {...args}>
+      <Radios.Item value="yes">Yes</Radios.Item>
+      <Radios.Item value="no" defaultChecked>
+        No
+      </Radios.Item>
+    </Radios>
+  ),
+};
+
 export const RadiosWithConditionalContent: Story = {
   args: {
     legend: 'Impairment requirement',