From e3e94d16419885234b62c02c14906c78af6bdb7b Mon Sep 17 00:00:00 2001
From: Jeremy Ortiz <jeremy.ortiz@westpac.com.au>
Date: Tue, 30 Jan 2024 21:13:01 +1100
Subject: [PATCH 1/5] feat(badge): add soft style

---
 .changeset/young-days-drop.md                 |  5 ++
 .../src/components/badge/badge.component.tsx  |  4 +-
 .../ui/src/components/badge/badge.spec.tsx    |  2 +-
 .../ui/src/components/badge/badge.stories.tsx | 21 ++++++-
 .../ui/src/components/badge/badge.styles.ts   | 55 ++++++++++++++++++-
 .../ui/src/components/badge/badge.types.ts    |  5 ++
 6 files changed, 86 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/young-days-drop.md

diff --git a/.changeset/young-days-drop.md b/.changeset/young-days-drop.md
new file mode 100644
index 000000000..1a245aa95
--- /dev/null
+++ b/.changeset/young-days-drop.md
@@ -0,0 +1,5 @@
+---
+'@westpac/ui': minor
+---
+
+Added soft style to badges
diff --git a/packages/ui/src/components/badge/badge.component.tsx b/packages/ui/src/components/badge/badge.component.tsx
index fe5e7b8e0..0406ed4a9 100644
--- a/packages/ui/src/components/badge/badge.component.tsx
+++ b/packages/ui/src/components/badge/badge.component.tsx
@@ -6,11 +6,11 @@ import { styles } from './badge.styles.js';
 import { type BadgeProps } from './badge.types.js';
 
 export function BaseBadge(
-  { className, tag: Tag = 'div', color = 'hero', type = 'default', children, ...props }: BadgeProps,
+  { className, tag: Tag = 'div', color = 'hero', type = 'default', soft = false, children, ...props }: BadgeProps,
   ref: any,
 ) {
   return (
-    <Tag {...({ ref } as any)} className={styles({ className, color, type })} {...props}>
+    <Tag {...({ ref } as any)} className={styles({ className, color, type, soft })} {...props}>
       {children}
     </Tag>
   );
diff --git a/packages/ui/src/components/badge/badge.spec.tsx b/packages/ui/src/components/badge/badge.spec.tsx
index 7aaf4fcda..f0fd4c5ae 100644
--- a/packages/ui/src/components/badge/badge.spec.tsx
+++ b/packages/ui/src/components/badge/badge.spec.tsx
@@ -12,7 +12,7 @@ describe('Badge', () => {
     const style = styles({ color: 'primary', type: 'pill' });
     // TODO: use some variants for test
     expect(style).toBe(
-      'inline-block whitespace-nowrap border text-center border-primary bg-primary text-white typography-body-10 rounded-xl px-[0.4375rem] py-[0.25rem] font-bold leading-none',
+      'inline-block whitespace-nowrap border text-center border-primary bg-primary text-white typography-body-10 rounded-xl px-[0.4375rem] py-[0.25rem] font-medium leading-none',
     );
   });
 });
diff --git a/packages/ui/src/components/badge/badge.stories.tsx b/packages/ui/src/components/badge/badge.stories.tsx
index 65f88f298..2541008ce 100644
--- a/packages/ui/src/components/badge/badge.stories.tsx
+++ b/packages/ui/src/components/badge/badge.stories.tsx
@@ -4,7 +4,7 @@ import { Button } from '../index.js';
 
 import { Badge } from './badge.component.js';
 
-const COLORS = ['danger', 'faint', 'hero', 'info', 'neutral', 'primary', 'success', 'warning'] as const;
+const COLORS = ['danger', 'faint', 'hero', 'info', 'neutral', 'muted', 'primary', 'success', 'warning'] as const;
 const INVERTED_COLORS = [
   'danger-inverted',
   'faint-inverted',
@@ -101,6 +101,25 @@ export const Colors = () => (
   </div>
 );
 
+export const Soft = () => (
+  <div className="flex flex-col gap-2">
+    <div className="flex gap-2">
+      {COLORS.map(color => (
+        <Badge color={color} soft>
+          {color}
+        </Badge>
+      ))}
+    </div>
+    <div className="flex gap-2">
+      {COLORS.map(color => (
+        <Badge color={color} type="pill" soft>
+          {color}
+        </Badge>
+      ))}
+    </div>
+  </div>
+);
+
 /**
  * > Example next to link
  */
diff --git a/packages/ui/src/components/badge/badge.styles.ts b/packages/ui/src/components/badge/badge.styles.ts
index 070aaacfc..3fc02ce48 100644
--- a/packages/ui/src/components/badge/badge.styles.ts
+++ b/packages/ui/src/components/badge/badge.styles.ts
@@ -6,10 +6,11 @@ export const styles = tv(
     variants: {
       color: {
         danger: 'border-danger bg-danger text-white',
-        faint: 'border-border bg-white text-muted',
+        faint: 'border-border bg-border text-muted',
         hero: 'border-hero bg-hero text-white',
         info: 'border-info bg-info text-white',
         neutral: 'border-neutral bg-neutral text-white',
+        muted: 'border-muted bg-muted text-white',
         primary: 'border-primary bg-primary text-white',
         success: 'border-success bg-success text-white',
         warning: 'border-warning bg-warning text-white',
@@ -23,10 +24,60 @@ export const styles = tv(
         'warning-inverted': 'border-none bg-white text-warning',
       },
       type: {
-        pill: 'typography-body-10 rounded-xl px-[0.4375rem] py-[0.25rem] font-bold leading-none',
+        pill: 'typography-body-10 rounded-xl px-[0.4375rem] py-[0.25rem] font-medium leading-none',
         default: 'rounded-sm px-1 py-0.5 pb-[0.125rem] text-[0.75rem] leading-none',
       },
+      soft: {
+        true: 'bg-white',
+      },
     },
+    compoundVariants: [
+      {
+        color: 'danger',
+        soft: true,
+        className: 'text-danger',
+      },
+      {
+        color: 'faint',
+        soft: true,
+        className: 'text-muted',
+      },
+      {
+        color: 'hero',
+        soft: true,
+        className: 'text-hero',
+      },
+      {
+        color: 'info',
+        soft: true,
+        className: 'text-info',
+      },
+      {
+        color: 'neutral',
+        soft: true,
+        className: 'text-neutral',
+      },
+      {
+        color: 'muted',
+        soft: true,
+        className: 'text-muted',
+      },
+      {
+        color: 'primary',
+        soft: true,
+        className: 'text-primary',
+      },
+      {
+        color: 'success',
+        soft: true,
+        className: 'text-success',
+      },
+      {
+        color: 'warning',
+        soft: true,
+        className: 'text-warning',
+      },
+    ],
   },
   { responsiveVariants: ['xsl', 'sm', 'md', 'lg', 'xl'] },
 );
diff --git a/packages/ui/src/components/badge/badge.types.ts b/packages/ui/src/components/badge/badge.types.ts
index abe3e250e..5bca2e8ca 100644
--- a/packages/ui/src/components/badge/badge.types.ts
+++ b/packages/ui/src/components/badge/badge.types.ts
@@ -15,6 +15,11 @@ export type BadgeProps = {
    * @default hero
    */
   color?: Variants['color'];
+  /**
+   * Removes background colour and adjusts text colour.
+   * @default false
+   */
+  soft?: Variants['soft'];
   /**
    * Tag to render
    * @default div

From cf72e80a69e3d8bce87043f55b922e92305242ac Mon Sep 17 00:00:00 2001
From: Jeremy Ortiz <jeremy.ortiz@westpac.com.au>
Date: Wed, 31 Jan 2024 11:06:33 +1100
Subject: [PATCH 2/5] chore(badges): update link demo

---
 packages/ui/src/components/badge/badge.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/components/badge/badge.stories.tsx b/packages/ui/src/components/badge/badge.stories.tsx
index 2541008ce..fceff6ace 100644
--- a/packages/ui/src/components/badge/badge.stories.tsx
+++ b/packages/ui/src/components/badge/badge.stories.tsx
@@ -128,7 +128,7 @@ export const Links = () => (
     {COLORS.map(color => (
       <a className="text-link underline" href="#">
         {color}
-        <Badge color={color} type="pill">
+        <Badge color={color} type="pill" className="ml-1">
           12
         </Badge>
       </a>

From 34febd249ebe562510b94ef8c3622d101cb85a0d Mon Sep 17 00:00:00 2001
From: Tom King <tom.jack.king@gmail.com>
Date: Wed, 31 Jan 2024 11:17:56 +1000
Subject: [PATCH 3/5] - updated button group, checkbox group and radio group to
 use slots instead of Children.map or cloneElement - fixed issue with table
 stories - updated docs to reflect changes to components

---
 .../button-dropdown-menu-sizes/content.mdoc   |  26 +-
 .../code/development-examples/content.mdoc    |  49 ++--
 .../design/button-groups/content.mdoc         |  83 ++++---
 .../code/development-examples/content.mdoc    | 235 +++++++++++-------
 .../design/checkbox-sizes/content.mdoc        |  30 ++-
 .../checkbox-with-hint-text/content.mdoc      |  42 ++--
 .../design/checkbox-with-reveal/content.mdoc  |  30 ++-
 .../design/horizontal-layout/content.mdoc     |  13 +-
 .../radio-group/accessibilityDemo.mdoc        |  13 +-
 .../code/development-examples/content.mdoc    | 183 ++++++++------
 .../design/horizontal-layout/content.mdoc     |  29 ++-
 .../design/radio-sizes/content.mdoc           |  28 ++-
 .../design/radios-with-hint-text/content.mdoc |  40 ++-
 .../design/radios-with-reveal/content.mdoc    |  30 ++-
 .../displaying-error-messages/content.mdoc    |  26 +-
 .../design/auto-address/content.mdoc          |  17 +-
 .../design/error-states/content.mdoc          |  19 +-
 .../design/manual-address/content.mdoc        |  13 +-
 .../name/design/full-name/content.mdoc        |  18 +-
 .../button-group/button-group.component.tsx   |  16 +-
 .../button-group/button-group.spec.tsx        | 127 +++++++---
 .../button-group/button-group.stories.tsx     | 139 ++++++++---
 .../button-group/button-group.types.ts        |   9 +-
 .../checkbox-group.component.tsx              |  19 +-
 .../checkbox-group/checkbox-group.spec.tsx    |  94 ++++---
 .../checkbox-group/checkbox-group.stories.tsx | 117 ++++-----
 .../checkbox-group/checkbox-group.types.ts    |   5 +-
 .../radio-group/radio-group.component.tsx     |  19 +-
 .../radio-group/radio-group.spec.tsx          |  68 +++--
 .../radio-group/radio-group.stories.tsx       | 112 ++++-----
 .../radio-group/radio-group.types.ts          |  11 +-
 .../ui/src/components/table/table.stories.tsx |  12 +-
 32 files changed, 1006 insertions(+), 666 deletions(-)

diff --git a/apps/site/src/content/design-system/components/button-dropdown/design/button-dropdown-menu-sizes/content.mdoc b/apps/site/src/content/design-system/components/button-dropdown/design/button-dropdown-menu-sizes/content.mdoc
index a85af7a70..edaa4ca44 100644
--- a/apps/site/src/content/design-system/components/button-dropdown/design/button-dropdown-menu-sizes/content.mdoc
+++ b/apps/site/src/content/design-system/components/button-dropdown/design/button-dropdown-menu-sizes/content.mdoc
@@ -51,17 +51,23 @@ The button dropdown menus come in three sizes or widths. They are triggered by t
 <div className="flex gap-1">
   <ButtonDropdown text="Checkboxes" look="primary">
     <ButtonDropdownHeading>Checkboxes</ButtonDropdownHeading>
-    <CheckboxGroup defaultValue={['Option 1']}>
-      <CheckboxGroupCheckbox value="Option 1">Option 1</CheckboxGroupCheckbox>
-      <CheckboxGroupCheckbox value="Option 2">Option 2</CheckboxGroupCheckbox>
-      <CheckboxGroupCheckbox value="Option 3">Option 3</CheckboxGroupCheckbox>
-    </CheckboxGroup>
+    <CheckboxGroup 
+      defaultValue={['Option 1']}
+      checkboxes={[
+        { value: "Option 1", children: "Option 1" },
+        { value: "Option 2", children: "Option 2" },
+        { value: "Option 3", children: "Option 3" },
+      ]}
+    />
     <ButtonDropdownHeading>Options</ButtonDropdownHeading>
-    <CheckboxGroup defaultValue={['Option 1']}>
-      <CheckboxGroupCheckbox value="Option 1">Option 1</CheckboxGroupCheckbox>
-      <CheckboxGroupCheckbox value="Option 2">Option 2</CheckboxGroupCheckbox>
-      <CheckboxGroupCheckbox value="Option 3">Option 3</CheckboxGroupCheckbox>
-    </CheckboxGroup>
+    <CheckboxGroup 
+      defaultValue={['Option 1']}
+      checkboxes={[
+        { value: "Option 1", children: "Option 1" },
+        { value: "Option 2", children: "Option 2" },
+        { value: "Option 3", children: "Option 3" },
+      ]}
+    />
   </ButtonDropdown>
 
   <ButtonDropdown text="Switches" look="primary">
diff --git a/apps/site/src/content/design-system/components/button-group/code/development-examples/content.mdoc b/apps/site/src/content/design-system/components/button-group/code/development-examples/content.mdoc
index 56a2828ed..f4c8ad149 100644
--- a/apps/site/src/content/design-system/components/button-group/code/development-examples/content.mdoc
+++ b/apps/site/src/content/design-system/components/button-group/code/development-examples/content.mdoc
@@ -1,11 +1,14 @@
 ### ButtonGroup sizes
 
 ```jsx
-<ButtonGroup>
-  <ButtonGroupButton value="Left">Left</ButtonGroupButton>
-  <ButtonGroupButton value="Middle">Middle</ButtonGroupButton>
-  <ButtonGroupButton value="Right">Right</ButtonGroupButton>
-</ButtonGroup>
+<ButtonGroup 
+  buttons={[
+    { value: "Left", children: "Left"}, 
+    { value: "Middle", children: "Middle" }, 
+    { value: "Right", children: "Right"}
+  ]} 
+/>
+
 ```
 
 ### ButtonGroup looks
@@ -15,19 +18,21 @@
   <ButtonGroup
     defaultValue={0}
     label={<p className="typography-body-10 text-muted italic mb-[0.875rem]">Index (integer)</p>}
-  >
-    <ButtonGroupButton value={0}>Left</ButtonGroupButton>
-    <ButtonGroupButton value={1}>Middle</ButtonGroupButton>
-    <ButtonGroupButton value={2}>Right</ButtonGroupButton>
-  </ButtonGroup>
+    buttons={[
+      { value: 0, children: "Left" }, 
+      { value: 1, children: "Middle" }, 
+      { value: 2, children: "Right"}
+    ]}
+  />
   <ButtonGroup
     defaultValue="right"
     label={<p className="typography-body-10 text-muted italic mb-[0.875rem]">Key (string)</p>}
-  >
-    <ButtonGroupButton value="left">Left</ButtonGroupButton>
-    <ButtonGroupButton value="middle">Middle</ButtonGroupButton>
-    <ButtonGroupButton value="right">Right</ButtonGroupButton>
-  </ButtonGroup>
+    buttons={[
+      { value: "left", children: "Left" }, 
+      { value: "middle", children: "Middle" }, 
+      { value: "right", children: "Right"}
+    ]}
+  />
 </div>
 ```
 
@@ -53,11 +58,15 @@
           reset
         </Button>
       </div>
-      <ButtonGroup look="hero" value={controlled}>
-        <ButtonGroupButton value="yes">Yes</ButtonGroupButton>
-        <ButtonGroupButton value="maybe">Maybe</ButtonGroupButton>
-        <ButtonGroupButton value="no">No</ButtonGroupButton>
-      </ButtonGroup>
+      <ButtonGroup 
+        look="hero" 
+        value={controlled}
+        buttons={[
+          { value: "yes", children: "Yes"}, 
+          { value: "maybe", children: "Maybe" }, 
+          { value: "no", children: "No"}
+        ]}
+      />
     </div>
   );
 };
diff --git a/apps/site/src/content/design-system/components/button-group/design/button-groups/content.mdoc b/apps/site/src/content/design-system/components/button-group/design/button-groups/content.mdoc
index 83694d2f6..6cafbf0dc 100644
--- a/apps/site/src/content/design-system/components/button-group/design/button-groups/content.mdoc
+++ b/apps/site/src/content/design-system/components/button-group/design/button-groups/content.mdoc
@@ -2,22 +2,34 @@
 
 ```tsx
 <div className="grid gap-3">
-  <ButtonGroup size="small">
-    <ButtonGroupButton value="sm">Sm - 30px</ButtonGroupButton>
-    <ButtonGroupButton value="Label">Label</ButtonGroupButton>
-  </ButtonGroup>
-  <ButtonGroup size="medium">
-    <ButtonGroupButton value="md">Md - 36px</ButtonGroupButton>
-    <ButtonGroupButton value="Label">Label</ButtonGroupButton>
-  </ButtonGroup>
-  <ButtonGroup size="large">
-    <ButtonGroupButton value="lg">Lg - 42px</ButtonGroupButton>
-    <ButtonGroupButton value="Label">Label</ButtonGroupButton>
-  </ButtonGroup>
-  <ButtonGroup size="xlarge">
-    <ButtonGroupButton value="xl">Xl - 48px</ButtonGroupButton>
-    <ButtonGroupButton value="Label">Label</ButtonGroupButton>
-  </ButtonGroup>
+  <ButtonGroup 
+    size="small"
+    buttons={[
+      { value: "sm", children: "Sm - 30px"}, 
+      { value: "Label", children: "Label" }
+    ]}
+  />
+  <ButtonGroup 
+    size="medium"
+    buttons={[
+      { value: "md", children: "Md - 36px"}, 
+      { value: "Label", children: "Label" }
+    ]}
+    />
+  <ButtonGroup 
+    size="large"
+    buttons={[
+      { value: "lg", children: "Lg - 42px"}, 
+      { value: "Label", children: "Label" }
+    ]}
+  />
+  <ButtonGroup 
+    size="xlarge"
+    buttons={[
+      { value: "xl", children: "Xl - 48px"}, 
+      { value: "Label", children: "Label" }
+    ]}
+  />
 </div>
 ```
 
@@ -25,15 +37,22 @@
 
 ```tsx
 <div className="grid gap-3">
-  <ButtonGroup look="hero">
-    <ButtonGroupButton value="Yes">Yes</ButtonGroupButton>
-    <ButtonGroupButton value="No">No</ButtonGroupButton>
-  </ButtonGroup>
-  <ButtonGroup look="hero">
-    <ButtonGroupButton value="Email">Email</ButtonGroupButton>
-    <ButtonGroupButton value="Phone">Phone</ButtonGroupButton>
-    <ButtonGroupButton value="SMS">SMS</ButtonGroupButton>
-  </ButtonGroup>
+  <ButtonGroup 
+    look="hero"
+    buttons={[
+      { value: "Yes", children: "Yes"}, 
+      { value: "No", children: "No" }
+    ]}
+  />
+
+  <ButtonGroup 
+    look="hero"
+    buttons={[
+      { value: "Email", children: "Email"}, 
+      { value: "Phone", children: "Phone" },
+      { value: "SMS", children: "SMS" }
+    ]}
+  />
 </div>
 ```
 
@@ -41,10 +60,14 @@
 
 ```jsx
 <div className="grid gap-3">
-  <ButtonGroup look="hero" block>
-    <ButtonGroupButton value="Email">Email</ButtonGroupButton>
-    <ButtonGroupButton value="Phone">Phone</ButtonGroupButton>
-    <ButtonGroupButton value="Label">Label</ButtonGroupButton>
-  </ButtonGroup>
+  <ButtonGroup 
+    look="hero" 
+    block
+    buttons={[
+      { value: "Email", children: "Email"}, 
+      { value: "Phone", children: "Phone" },
+      { value: "SMS", children: "SMS" }
+    ]}
+  />
 </div>
 ```
diff --git a/apps/site/src/content/design-system/components/checkbox-group/code/development-examples/content.mdoc b/apps/site/src/content/design-system/components/checkbox-group/code/development-examples/content.mdoc
index d89de64ab..5212b9505 100644
--- a/apps/site/src/content/design-system/components/checkbox-group/code/development-examples/content.mdoc
+++ b/apps/site/src/content/design-system/components/checkbox-group/code/development-examples/content.mdoc
@@ -4,24 +4,30 @@ This component was combined with RadioGroup in the old GEL, it is now it's own c
 
 ```jsx
 <div className="grid grid-cols-2">
-  <CheckboxGroup className="col-span-1" label={<ComponentTitle>Checkbox</ComponentTitle>}>
-    <CheckboxGroupCheckbox value="Option 1">Option 1</CheckboxGroupCheckbox>
-    <CheckboxGroupCheckbox value="Option 2">Option 2</CheckboxGroupCheckbox>
-    <CheckboxGroupCheckbox value="Option 3">Option 3</CheckboxGroupCheckbox>
-  </CheckboxGroup>
+  <CheckboxGroup 
+    className="col-span-1" 
+    label={<ComponentTitle>Checkbox</ComponentTitle>}
+    checkboxes={[
+      { value: "Option 1", children: "Option 1" },
+      { value: "Option 2", children: "Option 2" },
+      { value: "Option 3", children: "Option 3" },
+    ]}
+  />
 </div>
 ```
 
 ### With default value
 
 ```jsx
-<CheckboxGroup label={<ComponentTitle>Checkbox</ComponentTitle>} defaultValue={['1', '3']}>
-  <CheckboxGroupCheckbox value="1" isDisabled>
-    Option 1
-  </CheckboxGroupCheckbox>
-  <CheckboxGroupCheckbox value="2">Option 2</CheckboxGroupCheckbox>
-  <CheckboxGroupCheckbox value="3">Option 3</CheckboxGroupCheckbox>
-</CheckboxGroup>
+<CheckboxGroup 
+  label={<ComponentTitle>Checkbox</ComponentTitle>} 
+  defaultValue={['1', '3']}
+  checkboxes={[
+    { value: "1", children: "Option 1", isDisabled: true},
+    { value: "2", children: "Option 2" },
+    { value: "3", children: "Option 3" },
+  ]}
+/>
 ```
 
 ### With onChange
@@ -35,11 +41,12 @@ This component was combined with RadioGroup in the old GEL, it is now it's own c
       value={formCheckValue}
       onChange={(value, event) => setFormCheckValue(value)}
       label={<ComponentTitle>Checkbox</ComponentTitle>}
-    >
-      <CheckboxGroupCheckbox value="1">Option 1</CheckboxGroupCheckbox>
-      <CheckboxGroupCheckbox value="2">Option 2</CheckboxGroupCheckbox>
-      <CheckboxGroupCheckbox value="3">Option 3</CheckboxGroupCheckbox>
-    </CheckboxGroup>
+      checkboxes={[
+        { value: "1", children: "Option 1" },
+        { value: "2", children: "Option 2" },
+        { value: "3", children: "Option 3" },
+      ]}
+    />
   );
 };
 ```
@@ -48,16 +55,26 @@ This component was combined with RadioGroup in the old GEL, it is now it's own c
 
 ```jsx
 <div className="grid grid-cols-2">
-  <CheckboxGroup className="col-span-1" label={<ComponentTitle>Medium</ComponentTitle>} size="medium">
-    <CheckboxGroupCheckbox value="Option 1">Option 1</CheckboxGroupCheckbox>
-    <CheckboxGroupCheckbox value="Option 2">Option 2</CheckboxGroupCheckbox>
-    <CheckboxGroupCheckbox value="Option 3">Option 3</CheckboxGroupCheckbox>
-  </CheckboxGroup>
-  <CheckboxGroup className="col-span-1" label={<ComponentTitle>Large</ComponentTitle>} size="large">
-    <CheckboxGroupCheckbox value="Option 1">Option 1</CheckboxGroupCheckbox>
-    <CheckboxGroupCheckbox value="Option 2">Option 2</CheckboxGroupCheckbox>
-    <CheckboxGroupCheckbox value="Option 3">Option 3</CheckboxGroupCheckbox>
-  </CheckboxGroup>
+  <CheckboxGroup 
+    className="col-span-1" 
+    label={<ComponentTitle>Medium</ComponentTitle>} 
+    size="medium"
+    checkboxes={[
+      { value: "Option 1", children: "Option 1" },
+      { value: "Option 2", children: "Option 2" },
+      { value: "Option 3", children: "Option 3" },
+    ]}
+  />
+  <CheckboxGroup 
+    className="col-span-1" 
+    label={<ComponentTitle>Large</ComponentTitle>} 
+    size="large"
+    checkboxes={[
+      { value: "Option 1", children: "Option 1" },
+      { value: "Option 2", children: "Option 2" },
+      { value: "Option 3", children: "Option 3" },
+    ]}
+  />
 </div>
 ```
 
@@ -65,28 +82,26 @@ This component was combined with RadioGroup in the old GEL, it is now it's own c
 
 ```jsx
 <div className="grid grid-cols-2">
-  <CheckboxGroup className="col-span-1" label={<ComponentTitle>Medium</ComponentTitle>} size="medium">
-    <CheckboxGroupCheckbox value="Option 1" hint="This is hint text">
-      Option 1
-    </CheckboxGroupCheckbox>
-    <CheckboxGroupCheckbox value="Option 2" hint="This is hint text">
-      Option 2
-    </CheckboxGroupCheckbox>
-    <CheckboxGroupCheckbox value="Option 3" hint="This is hint text">
-      Option 3
-    </CheckboxGroupCheckbox>
-  </CheckboxGroup>
-  <CheckboxGroup className="col-span-1" label={<ComponentTitle>Large</ComponentTitle>} size="large">
-    <CheckboxGroupCheckbox value="Option 1" hint="This is hint text">
-      Option 1
-    </CheckboxGroupCheckbox>
-    <CheckboxGroupCheckbox value="Option 2" hint="This is hint text">
-      Option 2
-    </CheckboxGroupCheckbox>
-    <CheckboxGroupCheckbox value="Option 3" hint="This is hint text">
-      Option 3
-    </CheckboxGroupCheckbox>
-  </CheckboxGroup>
+  <CheckboxGroup 
+    className="col-span-1" 
+    label={<ComponentTitle>Medium</ComponentTitle>} 
+    size="medium"
+    checkboxes={[
+      { value: "Option 1", children: "Option 1", hint: "This is hint text" },
+      { value: "Option 2", children: "Option 2", hint: "This is hint text" },
+      { value: "Option 3", children: "Option 3", hint: "This is hint text" },
+    ]}
+  />
+  <CheckboxGroup 
+    className="col-span-1" 
+    label={<ComponentTitle>Large</ComponentTitle>} 
+    size="large"
+    checkboxes={[
+      { value: "Option 1", children: "Option 1", hint: "This is hint text" },
+      { value: "Option 2", children: "Option 2", hint: "This is hint text" },
+      { value: "Option 3", children: "Option 3", hint: "This is hint text" },
+    ]}
+  />
 </div>
 ```
 
@@ -94,17 +109,26 @@ This component was combined with RadioGroup in the old GEL, it is now it's own c
 
 ```jsx
 <div className="grid grid-cols-2">
-  <CheckboxGroup label={<ComponentTitle>Medium</ComponentTitle>} orientation="horizontal">
-    <CheckboxGroupCheckbox value="Option 1">Option 1</CheckboxGroupCheckbox>
-    <CheckboxGroupCheckbox value="Option 2">Option 2</CheckboxGroupCheckbox>
-    <CheckboxGroupCheckbox value="Option 3">Option 3</CheckboxGroupCheckbox>
-  </CheckboxGroup>
-
-  <CheckboxGroup label={<ComponentTitle>Large</ComponentTitle>} size="large" orientation="horizontal">
-    <CheckboxGroupCheckbox value="Option 1">Option 1</CheckboxGroupCheckbox>
-    <CheckboxGroupCheckbox value="Option 2">Option 2</CheckboxGroupCheckbox>
-    <CheckboxGroupCheckbox value="Option 3">Option 3</CheckboxGroupCheckbox>
-  </CheckboxGroup>
+  <CheckboxGroup 
+    label={<ComponentTitle>Medium</ComponentTitle>} 
+    orientation="horizontal"
+    checkboxes={[
+      { value: "Option 1", children: "Option 1" },
+      { value: "Option 2", children: "Option 2" },
+      { value: "Option 3", children: "Option 3" },
+    ]}
+  />
+
+  <CheckboxGroup 
+    label={<ComponentTitle>Large</ComponentTitle>} 
+    size="large" 
+    orientation="horizontal"
+    checkboxes={[
+      { value: "Option 1", children: "Option 1" },
+      { value: "Option 2", children: "Option 2" },
+      { value: "Option 3", children: "Option 3" },
+    ]}
+  />
 </div>
 ```
 
@@ -112,16 +136,26 @@ This component was combined with RadioGroup in the old GEL, it is now it's own c
 
 ```jsx
 <div className="grid grid-cols-2">
-  <CheckboxGroup label={<ComponentTitle>Medium</ComponentTitle>} size="medium" showAmount={1}>
-    <CheckboxGroupCheckbox value="Option 1">Option 1</CheckboxGroupCheckbox>
-    <CheckboxGroupCheckbox value="Option 2">Option 2</CheckboxGroupCheckbox>
-    <CheckboxGroupCheckbox value="Option 3">Option 3</CheckboxGroupCheckbox>
-  </CheckboxGroup>
-  <CheckboxGroup label={<ComponentTitle>Large</ComponentTitle>} size="large" showAmount={1}>
-    <CheckboxGroupCheckbox value="Option 1">Option 1</CheckboxGroupCheckbox>
-    <CheckboxGroupCheckbox value="Option 2">Option 2</CheckboxGroupCheckbox>
-    <CheckboxGroupCheckbox value="Option 3">Option 3</CheckboxGroupCheckbox>
-  </CheckboxGroup>
+  <CheckboxGroup 
+    label={<ComponentTitle>Medium</ComponentTitle>} 
+    size="medium" 
+    showAmount={1}
+    checkboxes={[
+      { value: "Option 1", children: "Option 1" },
+      { value: "Option 2", children: "Option 2" },
+      { value: "Option 3", children: "Option 3" },
+    ]}
+  />
+  <CheckboxGroup 
+    label={<ComponentTitle>Large</ComponentTitle>} 
+    size="large" 
+    showAmount={1}
+    checkboxes={[
+      { value: "Option 1", children: "Option 1" },
+      { value: "Option 2", children: "Option 2" },
+      { value: "Option 3", children: "Option 3" },
+    ]}  
+  />
 </div>
 ```
 
@@ -129,16 +163,26 @@ This component was combined with RadioGroup in the old GEL, it is now it's own c
 
 ```jsx
 <div className="grid grid-cols-2">
-  <CheckboxGroup label={<ComponentTitle>Medium</ComponentTitle>} size="medium" isDisabled>
-    <CheckboxGroupCheckbox value="Option 1">Option 1</CheckboxGroupCheckbox>
-    <CheckboxGroupCheckbox value="Option 2">Option 2</CheckboxGroupCheckbox>
-    <CheckboxGroupCheckbox value="Option 3">Option 3</CheckboxGroupCheckbox>
-  </CheckboxGroup>
-  <CheckboxGroup label={<ComponentTitle>Large</ComponentTitle>} size="large" isDisabled>
-    <CheckboxGroupCheckbox value="Option 1">Option 1</CheckboxGroupCheckbox>
-    <CheckboxGroupCheckbox value="Option 2">Option 2</CheckboxGroupCheckbox>
-    <CheckboxGroupCheckbox value="Option 3">Option 3</CheckboxGroupCheckbox>
-  </CheckboxGroup>
+  <CheckboxGroup 
+    label={<ComponentTitle>Medium</ComponentTitle>} 
+    size="medium" 
+    isDisabled
+    checkboxes={[
+      { value: "Option 1", children: "Option 1" },
+      { value: "Option 2", children: "Option 2" },
+      { value: "Option 3", children: "Option 3" },
+    ]}
+  />
+  <CheckboxGroup 
+    label={<ComponentTitle>Large</ComponentTitle>} 
+    size="large" 
+    isDisabled
+    checkboxes={[
+      { value: "Option 1", children: "Option 1" },
+      { value: "Option 2", children: "Option 2" },
+      { value: "Option 3", children: "Option 3" },
+    ]}
+  />
 </div>
 ```
 
@@ -146,19 +190,24 @@ This component was combined with RadioGroup in the old GEL, it is now it's own c
 
 ```jsx
 <div className="grid grid-cols-2">
-  <CheckboxGroup label={<ComponentTitle>Medium</ComponentTitle>} size="medium">
-    <CheckboxGroupCheckbox value="Option 1" isDisabled>
-      Option 1
-    </CheckboxGroupCheckbox>
-    <CheckboxGroupCheckbox value="Option 2">Option 2</CheckboxGroupCheckbox>
-    <CheckboxGroupCheckbox value="Option 3">Option 3</CheckboxGroupCheckbox>
-  </CheckboxGroup>
-  <CheckboxGroup label={<ComponentTitle>Large</ComponentTitle>} size="large">
-    <CheckboxGroupCheckbox value="Option 1">Option 1</CheckboxGroupCheckbox>
-    <CheckboxGroupCheckbox value="Option 2" isDisabled>
-      Option 2
-    </CheckboxGroupCheckbox>
-    <CheckboxGroupCheckbox value="Option 3">Option 3</CheckboxGroupCheckbox>
+  <CheckboxGroup 
+    label={<ComponentTitle>Medium</ComponentTitle>} 
+    size="medium"
+    checkboxes={[
+      { value: "Option 1", children: "Option 1", isDisabled: true },
+      { value: "Option 2", children: "Option 2" },
+      { value: "Option 3", children: "Option 3" },
+    ]}
+  />
+  <CheckboxGroup 
+    label={<ComponentTitle>Large</ComponentTitle>} 
+    size="large"
+    checkboxes={[
+      { value: "Option 1", children: "Option 1" },
+      { value: "Option 2", children: "Option 2", isDisabled: true  },
+      { value: "Option 3", children: "Option 3" },
+    ]}
+  />
   </CheckboxGroup>
 </div>
 ```
diff --git a/apps/site/src/content/design-system/components/checkbox-group/design/checkbox-sizes/content.mdoc b/apps/site/src/content/design-system/components/checkbox-group/design/checkbox-sizes/content.mdoc
index 782e78b90..a67c505c2 100644
--- a/apps/site/src/content/design-system/components/checkbox-group/design/checkbox-sizes/content.mdoc
+++ b/apps/site/src/content/design-system/components/checkbox-group/design/checkbox-sizes/content.mdoc
@@ -2,15 +2,25 @@ There are two checkbox sizes, make sure when laying out forms that your checkbox
 
 ```jsx
 <div className="grid grid-cols-2">
-  <CheckboxGroup className="col-span-1" label={<ComponentTitle>Medium</ComponentTitle>} size="medium">
-    <CheckboxGroupCheckbox value="Option 1">Option 1</CheckboxGroupCheckbox>
-    <CheckboxGroupCheckbox value="Option 2">Option 2</CheckboxGroupCheckbox>
-    <CheckboxGroupCheckbox value="Option 3">Option 3</CheckboxGroupCheckbox>
-  </CheckboxGroup>
-  <CheckboxGroup className="col-span-1" label={<ComponentTitle>Large</ComponentTitle>} size="large">
-    <CheckboxGroupCheckbox value="Option 1">Option 1</CheckboxGroupCheckbox>
-    <CheckboxGroupCheckbox value="Option 2">Option 2</CheckboxGroupCheckbox>
-    <CheckboxGroupCheckbox value="Option 3">Option 3</CheckboxGroupCheckbox>
-  </CheckboxGroup>
+  <CheckboxGroup 
+    className="col-span-1" 
+    label={<ComponentTitle>Medium</ComponentTitle>} 
+    size="medium"
+    checkboxes={[
+      { value: "Option 1", children: "Option 1" },
+      { value: "Option 2", children: "Option 2" },
+      { value: "Option 3", children: "Option 3" },
+    ]}
+  />
+  <CheckboxGroup 
+    className="col-span-1" 
+    label={<ComponentTitle>Large</ComponentTitle>} 
+    size="large"
+    checkboxes={[
+      { value: "Option 1", children: "Option 1" },
+      { value: "Option 2", children: "Option 2" },
+      { value: "Option 3", children: "Option 3" },
+    ]}
+  />
 </div>
 ```
diff --git a/apps/site/src/content/design-system/components/checkbox-group/design/checkbox-with-hint-text/content.mdoc b/apps/site/src/content/design-system/components/checkbox-group/design/checkbox-with-hint-text/content.mdoc
index 8b871eb6b..dec994fd5 100644
--- a/apps/site/src/content/design-system/components/checkbox-group/design/checkbox-with-hint-text/content.mdoc
+++ b/apps/site/src/content/design-system/components/checkbox-group/design/checkbox-with-hint-text/content.mdoc
@@ -2,27 +2,25 @@ This variation allows supporting text to be displayed below the selectable item.
 
 ```jsx
 <div className="grid grid-cols-2">
-  <CheckboxGroup className="col-span-1" label={<ComponentTitle>Medium</ComponentTitle>} size="medium">
-    <CheckboxGroupCheckbox value="Option 1" hint="This is hint text">
-      Option 1
-    </CheckboxGroupCheckbox>
-    <CheckboxGroupCheckbox value="Option 2" hint="This is hint text">
-      Option 2
-    </CheckboxGroupCheckbox>
-    <CheckboxGroupCheckbox value="Option 3" hint="This is hint text">
-      Option 3
-    </CheckboxGroupCheckbox>
-  </CheckboxGroup>
-  <CheckboxGroup className="col-span-1" label={<ComponentTitle>Large</ComponentTitle>} size="large">
-    <CheckboxGroupCheckbox value="Option 1" hint="This is hint text">
-      Option 1
-    </CheckboxGroupCheckbox>
-    <CheckboxGroupCheckbox value="Option 2" hint="This is hint text">
-      Option 2
-    </CheckboxGroupCheckbox>
-    <CheckboxGroupCheckbox value="Option 3" hint="This is hint text">
-      Option 3
-    </CheckboxGroupCheckbox>
-  </CheckboxGroup>
+  <CheckboxGroup 
+    className="col-span-1" 
+    label={<ComponentTitle>Medium</ComponentTitle>} 
+    size="medium"
+    checkboxes={[
+      { value: "Option 1", children: "Option 1", hint: "This is hint text" },
+      { value: "Option 2", children: "Option 2", hint: "This is hint text" },
+      { value: "Option 3", children: "Option 3", hint: "This is hint text" },
+    ]}
+  />
+  <CheckboxGroup 
+    className="col-span-1" 
+    label={<ComponentTitle>Large</ComponentTitle>} 
+    size="large"
+    checkboxes={[
+      { value: "Option 1", children: "Option 1", hint: "This is hint text" },
+      { value: "Option 2", children: "Option 2", hint: "This is hint text" },
+      { value: "Option 3", children: "Option 3", hint: "This is hint text" },
+    ]}
+  />
 </div>
 ```
diff --git a/apps/site/src/content/design-system/components/checkbox-group/design/checkbox-with-reveal/content.mdoc b/apps/site/src/content/design-system/components/checkbox-group/design/checkbox-with-reveal/content.mdoc
index b26ad36d3..26295f01e 100644
--- a/apps/site/src/content/design-system/components/checkbox-group/design/checkbox-with-reveal/content.mdoc
+++ b/apps/site/src/content/design-system/components/checkbox-group/design/checkbox-with-reveal/content.mdoc
@@ -7,15 +7,25 @@ When requirements dictate long lists of choices, and particularly as mobile scre
 
 ```jsx
 <div className="grid grid-cols-2">
-  <CheckboxGroup label={<ComponentTitle>Medium</ComponentTitle>} size="medium" showAmount={1}>
-    <CheckboxGroupCheckbox value="Option 1">Option 1</CheckboxGroupCheckbox>
-    <CheckboxGroupCheckbox value="Option 2">Option 2</CheckboxGroupCheckbox>
-    <CheckboxGroupCheckbox value="Option 3">Option 3</CheckboxGroupCheckbox>
-  </CheckboxGroup>
-  <CheckboxGroup label={<ComponentTitle>Large</ComponentTitle>} size="large" showAmount={1}>
-    <CheckboxGroupCheckbox value="Option 1">Option 1</CheckboxGroupCheckbox>
-    <CheckboxGroupCheckbox value="Option 2">Option 2</CheckboxGroupCheckbox>
-    <CheckboxGroupCheckbox value="Option 3">Option 3</CheckboxGroupCheckbox>
-  </CheckboxGroup>
+  <CheckboxGroup
+    label={<ComponentTitle>Medium</ComponentTitle>}
+    size="medium"
+    showAmount={1}
+    checkboxes={[
+      { value: 'Option 1', children: 'Option 1' },
+      { value: 'Option 2', children: 'Option 2' },
+      { value: 'Option 3', children: 'Option 3' },
+    ]}
+  />
+  <CheckboxGroup
+    label={<ComponentTitle>Large</ComponentTitle>}
+    size="large"
+    showAmount={1}
+    checkboxes={[
+      { value: 'Option 1', children: 'Option 1' },
+      { value: 'Option 2', children: 'Option 2' },
+      { value: 'Option 3', children: 'Option 3' },
+    ]}
+  />
 </div>
 ```
diff --git a/apps/site/src/content/design-system/components/checkbox-group/design/horizontal-layout/content.mdoc b/apps/site/src/content/design-system/components/checkbox-group/design/horizontal-layout/content.mdoc
index b68c9a521..a46ff3364 100644
--- a/apps/site/src/content/design-system/components/checkbox-group/design/horizontal-layout/content.mdoc
+++ b/apps/site/src/content/design-system/components/checkbox-group/design/horizontal-layout/content.mdoc
@@ -1,9 +1,12 @@
 Use this option when you require an inline layout, it's only recommended in very specific circumstances and we suggest never having more than two checkboxes side-by-side.
 
 ```jsx
-<CheckboxGroup orientation="horizontal">
-  <CheckboxGroupCheckbox value="Option 1">Option 1</CheckboxGroupCheckbox>
-  <CheckboxGroupCheckbox value="Option 2">Option 2</CheckboxGroupCheckbox>
-  <CheckboxGroupCheckbox value="Option 3">Option 3</CheckboxGroupCheckbox>
-</CheckboxGroup>
+<CheckboxGroup 
+  orientation="horizontal"
+  checkboxes={[
+    { value: "Option 1", children: "Option 1" },
+    { value: "Option 2", children: "Option 2" },
+    { value: "Option 3", children: "Option 3" },
+  ]}
+/>
 ```
diff --git a/apps/site/src/content/design-system/components/radio-group/accessibilityDemo.mdoc b/apps/site/src/content/design-system/components/radio-group/accessibilityDemo.mdoc
index 4aa304984..03ddc6c2f 100644
--- a/apps/site/src/content/design-system/components/radio-group/accessibilityDemo.mdoc
+++ b/apps/site/src/content/design-system/components/radio-group/accessibilityDemo.mdoc
@@ -1,7 +1,10 @@
 ```tsx
-<RadioGroup orientation="horizontal">
-  <RadioGroupRadio value="Option 1">Option 1</RadioGroupRadio>
-  <RadioGroupRadio value="Option 2">Option 2</RadioGroupRadio>
-  <RadioGroupRadio value="Option 3">Option 3</RadioGroupRadio>
-</RadioGroup>
+<RadioGroup 
+  orientation="horizontal"
+  radios={[
+    { value: 'Option 1', children: 'Option 1' },
+    { value: 'Option 2', children: 'Option 2' },
+    { value: 'Option 3', children: 'Option 3' },
+  ]}
+/>
 ```
diff --git a/apps/site/src/content/design-system/components/radio-group/code/development-examples/content.mdoc b/apps/site/src/content/design-system/components/radio-group/code/development-examples/content.mdoc
index 946f9a4d0..72051ac7d 100644
--- a/apps/site/src/content/design-system/components/radio-group/code/development-examples/content.mdoc
+++ b/apps/site/src/content/design-system/components/radio-group/code/development-examples/content.mdoc
@@ -4,16 +4,24 @@ This component does not contain an option for `checkbox` as it was decided it sh
 
 ```jsx
 <div className="flex gap-3">
-  <RadioGroup label={<p className="font-bold mb-1">Medium</p>} size="medium">
-    <RadioGroupRadio value="Option 1">Option 1</RadioGroupRadio>
-    <RadioGroupRadio value="Option 2">Option 2</RadioGroupRadio>
-    <RadioGroupRadio value="Option 3">Option 3</RadioGroupRadio>
-  </RadioGroup>
-  <RadioGroup label={<p className="font-bold mb-1">Large</p>} size="large">
-    <RadioGroupRadio value="Option 1">Option 1</RadioGroupRadio>
-    <RadioGroupRadio value="Option 2">Option 2</RadioGroupRadio>
-    <RadioGroupRadio value="Option 3">Option 3</RadioGroupRadio>
-  </RadioGroup>
+  <RadioGroup 
+    label={<p className="font-bold mb-1">Medium</p>} 
+    size="medium"
+    radios={[
+      { value: 'Option 1', children: 'Option 1' },
+      { value: 'Option 2', children: 'Option 2' },
+      { value: 'Option 3', children: 'Option 3' },
+    ]}
+  />
+  <RadioGroup 
+    label={<p className="font-bold mb-1">Large</p>} 
+    size="large"
+    radios={[
+      { value: 'Option 1', children: 'Option 1' },
+      { value: 'Option 2', children: 'Option 2' },
+      { value: 'Option 3', children: 'Option 3' },
+    ]}
+  />
 </div>
 ```
 
@@ -21,17 +29,26 @@ This component does not contain an option for `checkbox` as it was decided it sh
 
 ```jsx
 <div>
-  <RadioGroup label={<p className="font-bold mb-1">Medium</p>} orientation="horizontal">
-    <RadioGroupRadio value="Option 1">Option 1</RadioGroupRadio>
-    <RadioGroupRadio value="Option 2">Option 2</RadioGroupRadio>
-    <RadioGroupRadio value="Option 3">Option 3</RadioGroupRadio>
-  </RadioGroup>
+  <RadioGroup 
+    label={<p className="font-bold mb-1">Medium</p>} 
+    orientation="horizontal"
+    radios={[
+      { value: 'Option 1', children: 'Option 1' },
+      { value: 'Option 2', children: 'Option 2' },
+      { value: 'Option 3', children: 'Option 3' },
+    ]}
+  />
 
-  <RadioGroup label={<p className="font-bold mb-1">Large</p>} size="large" orientation="horizontal">
-    <RadioGroupRadio value="Option 1">Option 1</RadioGroupRadio>
-    <RadioGroupRadio value="Option 2">Option 2</RadioGroupRadio>
-    <RadioGroupRadio value="Option 3">Option 3</RadioGroupRadio>
-  </RadioGroup>
+  <RadioGroup 
+    label={<p className="font-bold mb-1">Large</p>} 
+    size="large" 
+    orientation="horizontal"
+    radios={[
+      { value: 'Option 1', children: 'Option 1' },
+      { value: 'Option 2', children: 'Option 2' },
+      { value: 'Option 3', children: 'Option 3' },
+    ]}
+  />
 </div>
 ```
 
@@ -39,28 +56,24 @@ This component does not contain an option for `checkbox` as it was decided it sh
 
 ```jsx
 <div className="flex gap-3">
-  <RadioGroup label={<p className="font-bold mb-1">Medium</p>} size="medium">
-    <RadioGroupRadio value="Option 1" hint="This is hint text">
-      Option 1
-    </RadioGroupRadio>
-    <RadioGroupRadio value="Option 2" hint="This is hint text">
-      Option 2
-    </RadioGroupRadio>
-    <RadioGroupRadio value="Option 3" hint="This is hint text">
-      Option 3
-    </RadioGroupRadio>
-  </RadioGroup>
-  <RadioGroup label={<p className="font-bold mb-1">Large</p>} size="large">
-    <RadioGroupRadio value="Option 1" hint="This is hint text">
-      Option 1
-    </RadioGroupRadio>
-    <RadioGroupRadio value="Option 2" hint="This is hint text">
-      Option 2
-    </RadioGroupRadio>
-    <RadioGroupRadio value="Option 3" hint="This is hint text">
-      Option 3
-    </RadioGroupRadio>
-  </RadioGroup>
+  <RadioGroup 
+    label={<p className="font-bold mb-1">Medium</p>} 
+    size="medium"
+    radios={[
+      { value: 'Option 1', children: 'Option 1', hint: 'This is hint text' },
+      { value: 'Option 2', children: 'Option 2', hint: 'This is hint text' },
+      { value: 'Option 3', children: 'Option 3', hint: 'This is hint text' },
+    ]}
+  />
+  <RadioGroup 
+    label={<p className="font-bold mb-1">Large</p>} 
+    size="large"
+    radios={[
+      { value: 'Option 1', children: 'Option 1', hint: 'This is hint text' },
+      { value: 'Option 2', children: 'Option 2', hint: 'This is hint text' },
+      { value: 'Option 3', children: 'Option 3', hint: 'This is hint text' },
+    ]}
+  />
 </div>
 ```
 
@@ -68,16 +81,26 @@ This component does not contain an option for `checkbox` as it was decided it sh
 
 ```jsx
 <div className="flex gap-3">
-  <RadioGroup label={<p className="font-bold mb-1">Medium</p>} size="medium" showAmount={1}>
-    <RadioGroupRadio value="Option 1">Option 1</RadioGroupRadio>
-    <RadioGroupRadio value="Option 2">Option 2</RadioGroupRadio>
-    <RadioGroupRadio value="Option 3">Option 3</RadioGroupRadio>
-  </RadioGroup>
-  <RadioGroup label={<p className="font-bold mb-1">Large</p>} size="large" showAmount={1}>
-    <RadioGroupRadio value="Option 1">Option 1</RadioGroupRadio>
-    <RadioGroupRadio value="Option 2">Option 2</RadioGroupRadio>
-    <RadioGroupRadio value="Option 3">Option 3</RadioGroupRadio>
-  </RadioGroup>
+  <RadioGroup 
+    label={<p className="font-bold mb-1">Medium</p>} 
+    size="medium" 
+    showAmount={1}
+    radios={[
+      { value: 'Option 1', children: 'Option 1' },
+      { value: 'Option 2', children: 'Option 2' },
+      { value: 'Option 3', children: 'Option 3' },
+    ]}
+  />
+  <RadioGroup 
+    label={<p className="font-bold mb-1">Large</p>} 
+    size="large" 
+    showAmount={1}
+    radios={[
+      { value: 'Option 1', children: 'Option 1' },
+      { value: 'Option 2', children: 'Option 2' },
+      { value: 'Option 3', children: 'Option 3' },
+    ]}
+  />
 </div>
 ```
 
@@ -85,16 +108,26 @@ This component does not contain an option for `checkbox` as it was decided it sh
 
 ```jsx
 <div className="flex gap-3">
-  <RadioGroup label={<p className="font-bold mb-1">Medium</p>} size="medium" isDisabled>
-    <RadioGroupRadio value="Option 1">Option 1</RadioGroupRadio>
-    <RadioGroupRadio value="Option 2">Option 2</RadioGroupRadio>
-    <RadioGroupRadio value="Option 3">Option 3</RadioGroupRadio>
-  </RadioGroup>
-  <RadioGroup label={<p className="font-bold mb-1">Large</p>} size="large" isDisabled>
-    <RadioGroupRadio value="Option 1">Option 1</RadioGroupRadio>
-    <RadioGroupRadio value="Option 2">Option 2</RadioGroupRadio>
-    <RadioGroupRadio value="Option 3">Option 3</RadioGroupRadio>
-  </RadioGroup>
+  <RadioGroup 
+    label={<p className="font-bold mb-1">Medium</p>} 
+    size="medium" 
+    isDisabled
+    radios={[
+      { value: 'Option 1', children: 'Option 1' },
+      { value: 'Option 2', children: 'Option 2' },
+      { value: 'Option 3', children: 'Option 3' },
+    ]}
+  />
+  <RadioGroup 
+    label={<p className="font-bold mb-1">Large</p>} 
+    size="large" 
+    isDisabled
+    radios={[
+      { value: 'Option 1', children: 'Option 1' },
+      { value: 'Option 2', children: 'Option 2' },
+      { value: 'Option 3', children: 'Option 3' },
+    ]}
+  />
 </div>
 ```
 
@@ -102,14 +135,24 @@ This component does not contain an option for `checkbox` as it was decided it sh
 
 ```jsx
 <div className="flex gap-3">
-  <RadioGroup label={<p className="font-bold mb-1">Medium</p>} size="medium">
-    <RadioGroupRadio value="Option 1" isDisabled>
-      Option 1
-    </RadioGroupRadio>
-    <RadioGroupRadio value="Option 2">Option 2</RadioGroupRadio>
-    <RadioGroupRadio value="Option 3">Option 3</RadioGroupRadio>
-  </RadioGroup>
-  <RadioGroup label={<p className="font-bold mb-1">Large</p>} size="large">
+  <RadioGroup 
+    label={<p className="font-bold mb-1">Medium</p>} 
+    size="medium"
+    radios={[
+      { value: 'Option 1', children: 'Option 1', isDisabled: true },
+      { value: 'Option 2', children: 'Option 2' },
+      { value: 'Option 3', children: 'Option 3' },
+    ]}
+  />
+  <RadioGroup 
+  label={<p className="font-bold mb-1">Large</p>} 
+  size="large"
+  radios={[
+    { value: 'Option 1', children: 'Option 1'},
+    { value: 'Option 2', children: 'Option 2', isDisabled: true },
+    { value: 'Option 3', children: 'Option 3' },
+  ]}
+  >
     <RadioGroupRadio value="Option 1">Option 1</RadioGroupRadio>
     <RadioGroupRadio value="Option 2" isDisabled>
       Option 2
diff --git a/apps/site/src/content/design-system/components/radio-group/design/horizontal-layout/content.mdoc b/apps/site/src/content/design-system/components/radio-group/design/horizontal-layout/content.mdoc
index 07653e3d8..62b669a48 100644
--- a/apps/site/src/content/design-system/components/radio-group/design/horizontal-layout/content.mdoc
+++ b/apps/site/src/content/design-system/components/radio-group/design/horizontal-layout/content.mdoc
@@ -2,16 +2,25 @@ Use this option when you require an inline layout, it's only recommended in very
 
 ```jsx
 <div className="grid grid-cols-2 gap-2">
-  <RadioGroup label={<ComponentTitle>Medium</ComponentTitle>} orientation="horizontal">
-    <RadioGroupRadio value="Option 1">Option 1</RadioGroupRadio>
-    <RadioGroupRadio value="Option 2">Option 2</RadioGroupRadio>
-    <RadioGroupRadio value="Option 3">Option 3</RadioGroupRadio>
-  </RadioGroup>
+  <RadioGroup 
+    label={<ComponentTitle>Medium</ComponentTitle>} 
+    orientation="horizontal"
+    radios={[
+      { value: 'Option 1', children: 'Option 1' },
+      { value: 'Option 2', children: 'Option 2' },
+      { value: 'Option 3', children: 'Option 3' },
+    ]}
+  />
 
-  <RadioGroup label={<ComponentTitle>Large</ComponentTitle>} size="large" orientation="horizontal">
-    <RadioGroupRadio value="Option 1">Option 1</RadioGroupRadio>
-    <RadioGroupRadio value="Option 2">Option 2</RadioGroupRadio>
-    <RadioGroupRadio value="Option 3">Option 3</RadioGroupRadio>
-  </RadioGroup>
+  <RadioGroup 
+    label={<ComponentTitle>Large</ComponentTitle>} 
+    size="large" 
+    orientation="horizontal"
+    radios={[
+      { value: 'Option 1', children: 'Option 1' },
+      { value: 'Option 2', children: 'Option 2' },
+      { value: 'Option 3', children: 'Option 3' },
+    ]}
+  />
 </div>
 ```
diff --git a/apps/site/src/content/design-system/components/radio-group/design/radio-sizes/content.mdoc b/apps/site/src/content/design-system/components/radio-group/design/radio-sizes/content.mdoc
index ce9d351c7..765d4a22c 100644
--- a/apps/site/src/content/design-system/components/radio-group/design/radio-sizes/content.mdoc
+++ b/apps/site/src/content/design-system/components/radio-group/design/radio-sizes/content.mdoc
@@ -2,15 +2,23 @@ There are two radio button sizes, make sure when laying out forms that your radi
 
 ```jsx
 <div className="grid grid-cols-2 gap-2">
-  <RadioGroup label={<ComponentTitle>Medium</ComponentTitle>} size="medium">
-    <RadioGroupRadio value="Option 1">Option 1</RadioGroupRadio>
-    <RadioGroupRadio value="Option 2">Option 2</RadioGroupRadio>
-    <RadioGroupRadio value="Option 3">Option 3</RadioGroupRadio>
-  </RadioGroup>
-  <RadioGroup label={<ComponentTitle>Large</ComponentTitle>} size="large">
-    <RadioGroupRadio value="Option 1">Option 1</RadioGroupRadio>
-    <RadioGroupRadio value="Option 2">Option 2</RadioGroupRadio>
-    <RadioGroupRadio value="Option 3">Option 3</RadioGroupRadio>
-  </RadioGroup>
+  <RadioGroup 
+    label={<ComponentTitle>Medium</ComponentTitle>} 
+    size="medium"
+    radios={[
+      { value: 'Option 1', children: 'Option 1' },
+      { value: 'Option 2', children: 'Option 2' },
+      { value: 'Option 3', children: 'Option 3' },
+    ]}
+  />
+  <RadioGroup 
+    label={<ComponentTitle>Large</ComponentTitle>} 
+    size="large"
+    radios={[
+      { value: 'Option 1', children: 'Option 1' },
+      { value: 'Option 2', children: 'Option 2' },
+      { value: 'Option 3', children: 'Option 3' },
+    ]}
+  />
 </div>
 ```
diff --git a/apps/site/src/content/design-system/components/radio-group/design/radios-with-hint-text/content.mdoc b/apps/site/src/content/design-system/components/radio-group/design/radios-with-hint-text/content.mdoc
index 959e0856a..dc1704065 100644
--- a/apps/site/src/content/design-system/components/radio-group/design/radios-with-hint-text/content.mdoc
+++ b/apps/site/src/content/design-system/components/radio-group/design/radios-with-hint-text/content.mdoc
@@ -2,27 +2,23 @@ This variation allows supporting text to be displayed below the selectable item.
 
 ```jsx
 <div className="grid grid-cols-2 gap-2">
-  <RadioGroup label={<ComponentTitle>Medium</ComponentTitle>} size="medium">
-    <RadioGroupRadio value="Option 1" hint="This is hint text">
-      Option 1
-    </RadioGroupRadio>
-    <RadioGroupRadio value="Option 2" hint="This is hint text">
-      Option 2
-    </RadioGroupRadio>
-    <RadioGroupRadio value="Option 3" hint="This is hint text">
-      Option 3
-    </RadioGroupRadio>
-  </RadioGroup>
-  <RadioGroup label={<ComponentTitle>Large</ComponentTitle>} size="large">
-    <RadioGroupRadio value="Option 1" hint="This is hint text">
-      Option 1
-    </RadioGroupRadio>
-    <RadioGroupRadio value="Option 2" hint="This is hint text">
-      Option 2
-    </RadioGroupRadio>
-    <RadioGroupRadio value="Option 3" hint="This is hint text">
-      Option 3
-    </RadioGroupRadio>
-  </RadioGroup>
+  <RadioGroup 
+    label={<ComponentTitle>Medium</ComponentTitle>} 
+    size="medium"
+    radios={[
+      { value: 'Option 1', children: 'Option 1', hint: 'This is hint text' },
+      { value: 'Option 2', children: 'Option 2', hint: 'This is hint text' },
+      { value: 'Option 3', children: 'Option 3', hint: 'This is hint text' },
+    ]}
+  />
+  <RadioGroup 
+    label={<ComponentTitle>Large</ComponentTitle>} 
+    size="large"
+    radios={[
+      { value: 'Option 1', children: 'Option 1', hint: 'This is hint text' },
+      { value: 'Option 2', children: 'Option 2', hint: 'This is hint text' },
+      { value: 'Option 3', children: 'Option 3', hint: 'This is hint text' },
+    ]}
+  />
 </div>
 ```
diff --git a/apps/site/src/content/design-system/components/radio-group/design/radios-with-reveal/content.mdoc b/apps/site/src/content/design-system/components/radio-group/design/radios-with-reveal/content.mdoc
index 6daf4c55d..b57f1c9ae 100644
--- a/apps/site/src/content/design-system/components/radio-group/design/radios-with-reveal/content.mdoc
+++ b/apps/site/src/content/design-system/components/radio-group/design/radios-with-reveal/content.mdoc
@@ -7,15 +7,25 @@ The radio component has the ability to hide a configurable portion of the option
 
 ```jsx
 <div className="grid grid-cols-2 gap-2">
-  <RadioGroup label={<ComponentTitle>Medium</ComponentTitle>} size="medium" showAmount={1}>
-    <RadioGroupRadio value="Option 1">Option 1</RadioGroupRadio>
-    <RadioGroupRadio value="Option 2">Option 2</RadioGroupRadio>
-    <RadioGroupRadio value="Option 3">Option 3</RadioGroupRadio>
-  </RadioGroup>
-  <RadioGroup label={<ComponentTitle>Large</ComponentTitle>} size="large" showAmount={1}>
-    <RadioGroupRadio value="Option 1">Option 1</RadioGroupRadio>
-    <RadioGroupRadio value="Option 2">Option 2</RadioGroupRadio>
-    <RadioGroupRadio value="Option 3">Option 3</RadioGroupRadio>
-  </RadioGroup>
+  <RadioGroup 
+    label={<ComponentTitle>Medium</ComponentTitle>} 
+    size="medium" 
+    showAmount={1}
+    radios={[
+      { value: 'Option 1', children: 'Option 1' },
+      { value: 'Option 2', children: 'Option 2' },
+      { value: 'Option 3', children: 'Option 3' },
+    ]}
+  />
+  <RadioGroup 
+    label={<ComponentTitle>Large</ComponentTitle>} 
+    size="large" 
+    showAmount={1}
+    radios={[
+      { value: 'Option 1', children: 'Option 1' },
+      { value: 'Option 2', children: 'Option 2' },
+      { value: 'Option 3', children: 'Option 3' },
+    ]}
+  />
 </div>
 ```
diff --git a/apps/site/src/content/design-system/content/guidelines/error-message/design/displaying-error-messages/content.mdoc b/apps/site/src/content/design-system/content/guidelines/error-message/design/displaying-error-messages/content.mdoc
index ba7cb6385..875090f45 100644
--- a/apps/site/src/content/design-system/content/guidelines/error-message/design/displaying-error-messages/content.mdoc
+++ b/apps/site/src/content/design-system/content/guidelines/error-message/design/displaying-error-messages/content.mdoc
@@ -24,11 +24,14 @@ There are some instances where the red keyline is not used, such as radio button
   <GridItem span={{ initial: 12, sm: 6 }}>
     <Form>
       <Field label="Label" hintMessage="If there is hint text, it can go here">
-        <CheckboxGroup orientation="vertical">
-          <CheckboxGroupCheckbox value="Option 1">Option 1</CheckboxGroupCheckbox>
-          <CheckboxGroupCheckbox value="Option 2">Option 2</CheckboxGroupCheckbox>
-          <CheckboxGroupCheckbox value="Option 3">Option 3</CheckboxGroupCheckbox>
-        </CheckboxGroup>
+        <CheckboxGroup 
+          orientation="vertical"
+          checkboxes={[
+            { value: "Option 1", children: "Option 1" },
+            { value: "Option 2", children: "Option 2" },
+            { value: "Option 3", children: "Option 3" },
+          ]}
+        />
       </Field>
     </Form>
   </GridItem>
@@ -39,11 +42,14 @@ There are some instances where the red keyline is not used, such as radio button
         hintMessage="If there is hint text, it can go here"
         errorMessage="If there is an error, it can go here"
       >
-        <CheckboxGroup orientation="vertical">
-          <CheckboxGroupCheckbox value="Option 1">Option 1</CheckboxGroupCheckbox>
-          <CheckboxGroupCheckbox value="Option 2">Option 2</CheckboxGroupCheckbox>
-          <CheckboxGroupCheckbox value="Option 3">Option 3</CheckboxGroupCheckbox>
-        </CheckboxGroup>
+        <CheckboxGroup 
+          orientation="vertical"
+          checkboxes={[
+            { value: "Option 1", children: "Option 1" },
+            { value: "Option 2", children: "Option 2" },
+            { value: "Option 3", children: "Option 3" },
+          ]}
+        />
       </Field>
     </Form>
   </GridItem>
diff --git a/apps/site/src/content/design-system/patterns/addresses/auto-address/design/auto-address/content.mdoc b/apps/site/src/content/design-system/patterns/addresses/auto-address/design/auto-address/content.mdoc
index f015d9f72..81686ed98 100644
--- a/apps/site/src/content/design-system/patterns/addresses/auto-address/design/auto-address/content.mdoc
+++ b/apps/site/src/content/design-system/patterns/addresses/auto-address/design/auto-address/content.mdoc
@@ -18,19 +18,24 @@ To capture a different mailing address, use a text label with a button group to
 
 ```tsx
 () => {
-  const [hasDifferentMailingAddress, setHasDifferentMailingAddress] = useState(false);
+  const [hasDifferentMailingAddress, setHasDifferentMailingAddress] = useState('');
 
   return (
     <Form spacing="large">
       <FormGroup>
         <Field label="Do you have a different mailing address?">
-          <ButtonGroup size="large" value={hasDifferentMailingAddress} onChange={value => setHasDifferentMailingAddress(value)}>
-            <ButtonGroupButton value={true}>Yes</ButtonGroupButton>
-            <ButtonGroupButton value={false}>No</ButtonGroupButton>
-          </ButtonGroup>
+          <ButtonGroup 
+            size="large" 
+            value={hasDifferentMailingAddress} 
+            onChange={value => setHasDifferentMailingAddress(value)}
+            buttons={[
+              { value: 'yes', children: "Yes" }, 
+              { value: 'no', children: "No" }
+            ]}
+          />
         </Field>
       </FormGroup>
-      <FormGroup>{hasDifferentMailingAddress && <AutoAddressDemo />}</FormGroup>
+      <FormGroup>{hasDifferentMailingAddress === 'yes' && <AutoAddressDemo />}</FormGroup>
     </Form>
   );
 };
diff --git a/apps/site/src/content/design-system/patterns/addresses/manual-address/design/error-states/content.mdoc b/apps/site/src/content/design-system/patterns/addresses/manual-address/design/error-states/content.mdoc
index fb27be7b1..a83afbe63 100644
--- a/apps/site/src/content/design-system/patterns/addresses/manual-address/design/error-states/content.mdoc
+++ b/apps/site/src/content/design-system/patterns/addresses/manual-address/design/error-states/content.mdoc
@@ -2,20 +2,25 @@ The error message should always sit above the input field to give context. The e
 
 ```tsx
 () => {
-  const [hasDifferentMailingAddress, setHasDifferentMailingAddress] = useState(true);
+  const [hasDifferentMailingAddress, setHasDifferentMailingAddress] = useState('yes');
 
   return (
     <Form className="w-full lg:w-7/12" spacing="large">
-      <FormGroup>{hasDifferentMailingAddress && <ManualAddress withError />}</FormGroup>
       <FormGroup>
         <Field label="Do you have a different mailing address?">
-          <ButtonGroup size="large" value={hasDifferentMailingAddress} onChange={value => setHasDifferentMailingAddress(value)}>
-            <ButtonGroupButton value={true}>Yes</ButtonGroupButton>
-            <ButtonGroupButton value={false}>No</ButtonGroupButton>
-          </ButtonGroup>
+          <ButtonGroup 
+            size="large" 
+            value={hasDifferentMailingAddress} 
+            onChange={value => setHasDifferentMailingAddress(value)}
+            buttons={[
+              { value: 'yes', children: "Yes" }, 
+              { value: 'no', children: "No" }
+            ]}
+          />
         </Field>
+        <FormGroup>{hasDifferentMailingAddress === 'yes' && <ManualAddress withError />}</FormGroup>
       </FormGroup>
     </Form>
   );
 };
-```
+```
\ No newline at end of file
diff --git a/apps/site/src/content/design-system/patterns/addresses/manual-address/design/manual-address/content.mdoc b/apps/site/src/content/design-system/patterns/addresses/manual-address/design/manual-address/content.mdoc
index 86b7146d1..619ce03d5 100644
--- a/apps/site/src/content/design-system/patterns/addresses/manual-address/design/manual-address/content.mdoc
+++ b/apps/site/src/content/design-system/patterns/addresses/manual-address/design/manual-address/content.mdoc
@@ -16,7 +16,7 @@ To capture a different mailing address, use a text label with a button group to
 
 ```tsx
 () => {
-  const [hasDifferentMailingAddress, setHasDifferentMailingAddress] = useState(false);
+  const [hasDifferentMailingAddress, setHasDifferentMailingAddress] = useState('');
 
   return (
     <Form className="w-full lg:w-7/12" spacing="large">
@@ -26,13 +26,14 @@ To capture a different mailing address, use a text label with a button group to
             size="large"
             value={hasDifferentMailingAddress}
             onChange={value => setHasDifferentMailingAddress(value)}
-          >
-            <ButtonGroupButton value={true}>Yes</ButtonGroupButton>
-            <ButtonGroupButton value={false}>No</ButtonGroupButton>
-          </ButtonGroup>
+            buttons={[
+              { value: 'yes', children: "Yes" }, 
+              { value: 'no', children: "No" }
+            ]}
+          />
         </Field>
       </FormGroup>
-      <FormGroup>{hasDifferentMailingAddress && <ManualAddress />}</FormGroup>
+      <FormGroup>{hasDifferentMailingAddress === 'yes' && <ManualAddress />}</FormGroup>
     </Form>
   );
 };
diff --git a/apps/site/src/content/design-system/patterns/personal-details/name/design/full-name/content.mdoc b/apps/site/src/content/design-system/patterns/personal-details/name/design/full-name/content.mdoc
index b0c5cb3d6..fa01545ee 100644
--- a/apps/site/src/content/design-system/patterns/personal-details/name/design/full-name/content.mdoc
+++ b/apps/site/src/content/design-system/patterns/personal-details/name/design/full-name/content.mdoc
@@ -44,7 +44,7 @@ This example shows the base pattern used with additional questions when further
 
 ```tsx
 () => {
-  const [differentName, setDifferentName] = useState(false);
+  const [differentName, setDifferentName] = useState('');
 
   return (
     <Form spacing="large">
@@ -77,13 +77,19 @@ This example shows the base pattern used with additional questions when further
       </FormGroup>
       <FormGroup>
         <Field label="Have you ever been known by a name different to the one provided above?">
-          <ButtonGroup size="large" onChange={value => setDifferentName(value)} value={differentName} look="hero">
-            <ButtonGroupButton value={true}>Yes</ButtonGroupButton>
-            <ButtonGroupButton value={false}>No</ButtonGroupButton>
-          </ButtonGroup>
+          <ButtonGroup 
+            size="large" 
+            onChange={value => setDifferentName(value)} 
+            value={differentName} 
+            look="hero"
+            buttons={[
+              { value: "yes", children: "Yes" }, 
+              { value: "no", children: "No" }
+            ]}
+          />
         </Field>
       </FormGroup>
-      {differentName && (
+      {differentName === 'yes' && (
         <FormGroup>
           <Field label="Other names">
             <Input name="other-name" size="large" className="w-6/12" />
diff --git a/packages/ui/src/components/button-group/button-group.component.tsx b/packages/ui/src/components/button-group/button-group.component.tsx
index d75fbe736..b1bb8ef52 100644
--- a/packages/ui/src/components/button-group/button-group.component.tsx
+++ b/packages/ui/src/components/button-group/button-group.component.tsx
@@ -1,10 +1,10 @@
 'use client';
 
-import React, { ReactElement, cloneElement, createContext } from 'react';
+import React, { createContext } from 'react';
 import { useRadioGroup } from 'react-aria';
 import { useRadioGroupState } from 'react-stately';
 
-import { ErrorMessage, Hint, Label } from '../index.js';
+import { ButtonGroupButton, ErrorMessage, Hint, Label } from '../index.js';
 
 import { styles as buttonGroupStyles } from './button-group.styles.js';
 import { ButtonGroupContextState, type ButtonGroupProps } from './button-group.types.js';
@@ -27,7 +27,7 @@ export const ButtonGroupContext = createContext<ButtonGroupContextState>({
 
 export function ButtonGroup({
   className,
-  children,
+  buttons,
   label,
   look = 'hero',
   size = 'medium',
@@ -47,12 +47,6 @@ export function ButtonGroup({
     state,
   );
   const styles = buttonGroupStyles({});
-  const childrenToRender = children.map((child, index) => {
-    return cloneElement(child as ReactElement, {
-      key: index,
-      className: 'group/buttons',
-    });
-  });
 
   return (
     <div className={styles.base({ className })} {...radioGroupProps}>
@@ -63,7 +57,9 @@ export function ButtonGroup({
       )}
       <div className={styles.buttonWrapper()}>
         <ButtonGroupContext.Provider value={{ ...state, size, look, block }}>
-          {childrenToRender}
+          {buttons.map((button, index) => (
+            <ButtonGroupButton key={index} className="group/buttons" {...button} />
+          ))}
         </ButtonGroupContext.Provider>
       </div>
     </div>
diff --git a/packages/ui/src/components/button-group/button-group.spec.tsx b/packages/ui/src/components/button-group/button-group.spec.tsx
index 7c12812ca..ce942cfa5 100644
--- a/packages/ui/src/components/button-group/button-group.spec.tsx
+++ b/packages/ui/src/components/button-group/button-group.spec.tsx
@@ -2,27 +2,50 @@ import { act, render } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { ButtonGroup } from './button-group.component.js';
-import { ButtonGroupButton } from './components/button-group-button/button-group-button.component.js';
 
 describe('ButtonGroup', () => {
   it('renders the component', () => {
     const { container } = render(
-      <ButtonGroup label="test">
-        <ButtonGroupButton value="Option 1">Option 1</ButtonGroupButton>
-        <ButtonGroupButton value="Option 2">Option 2</ButtonGroupButton>
-        <ButtonGroupButton value="Option 3">Option 3</ButtonGroupButton>
-      </ButtonGroup>,
+      <ButtonGroup
+        label="test"
+        buttons={[
+          {
+            value: 'Option 1',
+            children: 'Option 1',
+          },
+          {
+            value: 'Option 2',
+            children: 'Option 2',
+          },
+          {
+            value: 'Option 3',
+            children: 'Option 3',
+          },
+        ]}
+      />,
     );
     expect(container).toBeInTheDocument();
   });
 
   it('should render buttons when passed as children', () => {
     const { getByText } = render(
-      <ButtonGroup label="test">
-        <ButtonGroupButton value="Option 1">Option 1</ButtonGroupButton>
-        <ButtonGroupButton value="Option 2">Option 2</ButtonGroupButton>
-        <ButtonGroupButton value="Option 3">Option 3</ButtonGroupButton>
-      </ButtonGroup>,
+      <ButtonGroup
+        label="test"
+        buttons={[
+          {
+            value: 'Option 1',
+            children: 'Option 1',
+          },
+          {
+            value: 'Option 2',
+            children: 'Option 2',
+          },
+          {
+            value: 'Option 3',
+            children: 'Option 3',
+          },
+        ]}
+      />,
     );
     expect(getByText('Option 1')).toBeInTheDocument();
     expect(getByText('Option 2')).toBeInTheDocument();
@@ -31,11 +54,24 @@ describe('ButtonGroup', () => {
 
   it('should disable options when isDisabled prop passed', () => {
     const { getAllByRole } = render(
-      <ButtonGroup label="test" isDisabled>
-        <ButtonGroupButton value="Option 1">Option 1</ButtonGroupButton>
-        <ButtonGroupButton value="Option 2">Option 2</ButtonGroupButton>
-        <ButtonGroupButton value="Option 3">Option 3</ButtonGroupButton>
-      </ButtonGroup>,
+      <ButtonGroup
+        label="test"
+        isDisabled
+        buttons={[
+          {
+            value: 'Option 1',
+            children: 'Option 1',
+          },
+          {
+            value: 'Option 2',
+            children: 'Option 2',
+          },
+          {
+            value: 'Option 3',
+            children: 'Option 3',
+          },
+        ]}
+      />,
     );
     const radios = getAllByRole('radio');
     expect(radios[0]).toBeDisabled();
@@ -47,32 +83,53 @@ describe('ButtonGroup', () => {
     const user = userEvent.setup();
     const onChange = vi.fn();
 
-    const { getByTestId } = render(
-      <ButtonGroup onChange={onChange} label="test">
-        <ButtonGroupButton value="Option 1" data-testid="option1">
-          Option 1
-        </ButtonGroupButton>
-        <ButtonGroupButton value="Option 2">Option 2</ButtonGroupButton>
-        <ButtonGroupButton value="Option 3">Option 3</ButtonGroupButton>
-      </ButtonGroup>,
+    const { getByText } = render(
+      <ButtonGroup
+        onChange={onChange}
+        label="test"
+        buttons={[
+          {
+            value: 'Option 1',
+            children: 'Option 1',
+          },
+          {
+            value: 'Option 2',
+            children: 'Option 2',
+          },
+          {
+            value: 'Option 3',
+            children: 'Option 3',
+          },
+        ]}
+      />,
     );
-    await act(() => user.click(getByTestId('option1')));
+    await act(() => user.click(getByText('Option 1')));
     expect(onChange).toBeCalled();
   });
 
   it('should have correct option be selected when clicked', async () => {
     const user = userEvent.setup();
 
-    const { getByTestId } = render(
-      <ButtonGroup label="test">
-        <ButtonGroupButton value="Option 1" data-testid="option1">
-          Option 1
-        </ButtonGroupButton>
-        <ButtonGroupButton value="Option 2">Option 2</ButtonGroupButton>
-        <ButtonGroupButton value="Option 3">Option 3</ButtonGroupButton>
-      </ButtonGroup>,
+    const { getByText, getByRole } = render(
+      <ButtonGroup
+        label="test"
+        buttons={[
+          {
+            value: 'Option 1',
+            children: 'Option 1',
+          },
+          {
+            value: 'Option 2',
+            children: 'Option 2',
+          },
+          {
+            value: 'Option 3',
+            children: 'Option 3',
+          },
+        ]}
+      />,
     );
-    await act(() => user.click(getByTestId('option1')));
-    expect(getByTestId('option1')).toBeChecked();
+    await act(() => user.click(getByText('Option 1')));
+    expect(getByRole('radio', { name: 'Option 1' })).toBeChecked();
   });
 });
diff --git a/packages/ui/src/components/button-group/button-group.stories.tsx b/packages/ui/src/components/button-group/button-group.stories.tsx
index 764965794..bc60228df 100644
--- a/packages/ui/src/components/button-group/button-group.stories.tsx
+++ b/packages/ui/src/components/button-group/button-group.stories.tsx
@@ -1,7 +1,6 @@
 import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
 
 import { ButtonGroup } from './button-group.component.js';
-import { ButtonGroupButton } from './components/button-group-button/button-group-button.component.js';
 
 const meta: Meta<typeof ButtonGroup> = {
   title: 'Components/ButtonGroup',
@@ -39,10 +38,19 @@ const SIZES = ['small', 'medium', 'large', 'xlarge'] as const;
  */
 export const Default: Story = {
   args: {
-    children: [
-      <ButtonGroupButton value="Option 1">Option 1</ButtonGroupButton>,
-      <ButtonGroupButton value="Option 2">Option 2</ButtonGroupButton>,
-      <ButtonGroupButton value="Option 3">Option 3</ButtonGroupButton>,
+    buttons: [
+      {
+        value: 'Option 1',
+        children: 'Option 1',
+      },
+      {
+        value: 'Option 2',
+        children: 'Option 2',
+      },
+      {
+        value: 'Option 3',
+        children: 'Option 3',
+      },
     ],
   },
 };
@@ -53,11 +61,24 @@ export const Default: Story = {
 export const Colors = () => (
   <div className="flex flex-col gap-2">
     {LOOKS.map(look => (
-      <ButtonGroup label={<h3 className="font-bold">{look}</h3>} look={look}>
-        <ButtonGroupButton value="Option 1">Option 1</ButtonGroupButton>
-        <ButtonGroupButton value="Option 2">Option 2</ButtonGroupButton>
-        <ButtonGroupButton value="Option 3">Option 3</ButtonGroupButton>
-      </ButtonGroup>
+      <ButtonGroup
+        label={<h3 className="font-bold">{look}</h3>}
+        look={look}
+        buttons={[
+          {
+            value: 'Option 1',
+            children: 'Option 1',
+          },
+          {
+            value: 'Option 2',
+            children: 'Option 2',
+          },
+          {
+            value: 'Option 3',
+            children: 'Option 3',
+          },
+        ]}
+      />
     ))}
   </div>
 );
@@ -68,11 +89,24 @@ export const Colors = () => (
 export const Sizes = () => (
   <div className="flex flex-col gap-2">
     {SIZES.map(size => (
-      <ButtonGroup label={<h3 className="font-bold">{size}</h3>} size={size}>
-        <ButtonGroupButton value="Option 1">Option 1</ButtonGroupButton>
-        <ButtonGroupButton value="Option 2">Option 2</ButtonGroupButton>
-        <ButtonGroupButton value="Option 3">Option 3</ButtonGroupButton>
-      </ButtonGroup>
+      <ButtonGroup
+        label={<h3 className="font-bold">{size}</h3>}
+        size={size}
+        buttons={[
+          {
+            value: 'Option 1',
+            children: 'Option 1',
+          },
+          {
+            value: 'Option 2',
+            children: 'Option 2',
+          },
+          {
+            value: 'Option 3',
+            children: 'Option 3',
+          },
+        ]}
+      />
     ))}
   </div>
 );
@@ -82,10 +116,19 @@ export const Sizes = () => (
  */
 export const ResponsiveSize: Story = {
   args: {
-    children: [
-      <ButtonGroupButton value="Option 1">Option 1</ButtonGroupButton>,
-      <ButtonGroupButton value="Option 2">Option 2</ButtonGroupButton>,
-      <ButtonGroupButton value="Option 3">Option 3</ButtonGroupButton>,
+    buttons: [
+      {
+        value: 'Option 1',
+        children: 'Option 1',
+      },
+      {
+        value: 'Option 2',
+        children: 'Option 2',
+      },
+      {
+        value: 'Option 3',
+        children: 'Option 3',
+      },
     ],
     size: {
       initial: 'small',
@@ -101,11 +144,25 @@ export const ResponsiveSize: Story = {
 export const Block = () => (
   <div className="flex flex-col gap-2">
     {SIZES.map(size => (
-      <ButtonGroup block label={<h3 className="font-bold">{size}</h3>} size={size}>
-        <ButtonGroupButton value="Option 1">Option 1</ButtonGroupButton>
-        <ButtonGroupButton value="Option 2">Option 2</ButtonGroupButton>
-        <ButtonGroupButton value="Option 3">Option 3</ButtonGroupButton>
-      </ButtonGroup>
+      <ButtonGroup
+        block
+        label={<h3 className="font-bold">{size}</h3>}
+        size={size}
+        buttons={[
+          {
+            value: 'Option 1',
+            children: 'Option 1',
+          },
+          {
+            value: 'Option 2',
+            children: 'Option 2',
+          },
+          {
+            value: 'Option 3',
+            children: 'Option 3',
+          },
+        ]}
+      />
     ))}
   </div>
 );
@@ -115,10 +172,19 @@ export const Block = () => (
  */
 export const Disabled: Story = {
   args: {
-    children: [
-      <ButtonGroupButton value="Option 1">Option 1</ButtonGroupButton>,
-      <ButtonGroupButton value="Option 2">Option 2</ButtonGroupButton>,
-      <ButtonGroupButton value="Option 3">Option 3</ButtonGroupButton>,
+    buttons: [
+      {
+        value: 'Option 1',
+        children: 'Option 1',
+      },
+      {
+        value: 'Option 2',
+        children: 'Option 2',
+      },
+      {
+        value: 'Option 3',
+        children: 'Option 3',
+      },
     ],
     isDisabled: true,
   },
@@ -133,10 +199,19 @@ export const ErrorMessageAndLabel: Story = {
     errorMessage: 'This is an inline error message',
     validationState: 'invalid',
     hintMessage: 'Hint: choose from one of the following options',
-    children: [
-      <ButtonGroupButton value="Option 1">Option 1</ButtonGroupButton>,
-      <ButtonGroupButton value="Option 2">Option 2</ButtonGroupButton>,
-      <ButtonGroupButton value="Option 3">Option 3</ButtonGroupButton>,
+    buttons: [
+      {
+        value: 'Option 1',
+        children: 'Option 1',
+      },
+      {
+        value: 'Option 2',
+        children: 'Option 2',
+      },
+      {
+        value: 'Option 3',
+        children: 'Option 3',
+      },
     ],
   },
 };
diff --git a/packages/ui/src/components/button-group/button-group.types.ts b/packages/ui/src/components/button-group/button-group.types.ts
index d648f6e5f..f6f2c9665 100644
--- a/packages/ui/src/components/button-group/button-group.types.ts
+++ b/packages/ui/src/components/button-group/button-group.types.ts
@@ -1,18 +1,19 @@
-import { ReactNode } from 'react';
 import { AriaRadioGroupProps } from 'react-aria';
 import { RadioGroupState } from 'react-stately';
 
 import { type ButtonProps } from '../button/index.js';
 
+import { ButtonGroupButtonProps } from './components/button-group-button/button-group-button.types.js';
+
 export type ButtonGroupProps = {
   /**
    * Sets whether buttons fill the entire box they are located in
    */
   block?: boolean;
   /**
-   * The `Button` components to render
+   * The `Button` components to render in the form of an object
    */
-  children: ReactNode[];
+  buttons: Omit<ButtonGroupButtonProps, 'className'>[];
   /**
    * String to override base style
    */
@@ -29,7 +30,7 @@ export type ButtonGroupProps = {
    * Controls look of `Button` components, can't be applied directly to `Button`
    */
   look?: 'hero' | 'primary';
-} & Omit<AriaRadioGroupProps, 'errorMessage' | 'description' | 'orientation'> &
+} & Omit<AriaRadioGroupProps, 'errorMessage' | 'description' | 'orientation' | 'children'> &
   Pick<ButtonProps, 'size'>;
 
 export type ButtonGroupContextState = {
diff --git a/packages/ui/src/components/checkbox-group/checkbox-group.component.tsx b/packages/ui/src/components/checkbox-group/checkbox-group.component.tsx
index a3594f93d..a2ccb9bc1 100644
--- a/packages/ui/src/components/checkbox-group/checkbox-group.component.tsx
+++ b/packages/ui/src/components/checkbox-group/checkbox-group.component.tsx
@@ -1,12 +1,12 @@
 'use client';
 
-import React, { ReactElement, cloneElement, createContext, useEffect, useMemo, useRef, useState } from 'react';
+import React, { createContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useCheckboxGroup, useFocusRing } from 'react-aria';
 import { useCheckboxGroupState } from 'react-stately';
 
 import { Button } from '../button/index.js';
 import { ExpandMoreIcon } from '../icon/index.js';
-import { ErrorMessage, Hint, Label } from '../index.js';
+import { CheckboxGroupCheckbox, ErrorMessage, Hint, Label } from '../index.js';
 
 import { styles as checkboxStyles } from './checkbox-group.styles.js';
 import { type CheckboxGroupContextState, type CheckboxGroupProps } from './checkbox-group.types.js';
@@ -26,7 +26,7 @@ export const CheckboxGroupContext = createContext<CheckboxGroupContextState>({
 });
 export function CheckboxGroup({
   className,
-  children,
+  checkboxes,
   label,
   orientation = 'vertical',
   showAmount = 0,
@@ -40,18 +40,15 @@ export function CheckboxGroup({
   const { isFocusVisible, focusProps } = useFocusRing();
   const [hiddenOptions, setHiddenOptions] = useState<boolean>(showAmount > 0);
   const firstNewCheckboxRef = useRef<HTMLDivElement>(null);
-  const revealAmount = children && children.length - showAmount;
+  const revealAmount = checkboxes && checkboxes.length - showAmount;
   const styles = checkboxStyles({ orientation, isFocusVisible });
   const childrenToRender = useMemo(() => {
-    const newChildren = children.map((child, index) => {
-      return cloneElement(child as ReactElement, {
-        key: index,
-        ref: index === showAmount ? firstNewCheckboxRef : null,
-      });
-    });
+    const newChildren = checkboxes.map((checkbox, index) => (
+      <CheckboxGroupCheckbox key={index} ref={index === showAmount ? firstNewCheckboxRef : null} {...checkbox} />
+    ));
 
     return hiddenOptions ? newChildren.slice(0, showAmount) : newChildren;
-  }, [children, hiddenOptions, showAmount]);
+  }, [checkboxes, hiddenOptions, showAmount]);
 
   useEffect(() => {
     if (showAmount > 0 && !hiddenOptions) {
diff --git a/packages/ui/src/components/checkbox-group/checkbox-group.spec.tsx b/packages/ui/src/components/checkbox-group/checkbox-group.spec.tsx
index 67da95b7b..0cdf4cde4 100644
--- a/packages/ui/src/components/checkbox-group/checkbox-group.spec.tsx
+++ b/packages/ui/src/components/checkbox-group/checkbox-group.spec.tsx
@@ -2,25 +2,30 @@ import { act, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { CheckboxGroup } from './checkbox-group.component.js';
-import { CheckboxGroupCheckbox } from './components/checkbox-group-checkbox/checkbox-group-checkbox.component.js';
 
 describe('CheckboxGroup', () => {
   it('renders the component', () => {
     const { container } = render(
-      <CheckboxGroup label="test">
-        <CheckboxGroupCheckbox value="Option 1">Option 1</CheckboxGroupCheckbox>
-        <CheckboxGroupCheckbox value="Option 2">Option 2</CheckboxGroupCheckbox>
-      </CheckboxGroup>,
+      <CheckboxGroup
+        label="test"
+        checkboxes={[
+          { value: 'Option 1', children: 'Option 1' },
+          { value: 'Option 2', children: 'Option 2' },
+        ]}
+      />,
     );
     expect(container).toBeInTheDocument();
   });
 
   it('should render Options when passed as children', () => {
     const { getByText } = render(
-      <CheckboxGroup label="test">
-        <CheckboxGroupCheckbox value="Option 1">Option 1</CheckboxGroupCheckbox>
-        <CheckboxGroupCheckbox value="Option 2">Option 2</CheckboxGroupCheckbox>
-      </CheckboxGroup>,
+      <CheckboxGroup
+        label="test"
+        checkboxes={[
+          { value: 'Option 1', children: 'Option 1' },
+          { value: 'Option 2', children: 'Option 2' },
+        ]}
+      />,
     );
     expect(getByText('Option 1')).toBeInTheDocument();
     expect(getByText('Option 2')).toBeInTheDocument();
@@ -30,11 +35,15 @@ describe('CheckboxGroup', () => {
     const user = userEvent.setup();
 
     const { getByText } = render(
-      <CheckboxGroup showAmount={1} label="test">
-        <CheckboxGroupCheckbox value="Option 1">Option 1</CheckboxGroupCheckbox>
-        <CheckboxGroupCheckbox value="Option 2">Option 2</CheckboxGroupCheckbox>
-        <CheckboxGroupCheckbox value="Option 3">Option 3</CheckboxGroupCheckbox>
-      </CheckboxGroup>,
+      <CheckboxGroup
+        showAmount={1}
+        label="test"
+        checkboxes={[
+          { value: 'Option 1', children: 'Option 1' },
+          { value: 'Option 2', children: 'Option 2' },
+          { value: 'Option 3', children: 'Option 3' },
+        ]}
+      />,
     );
     expect(getByText('Option 1')).toBeInTheDocument();
     expect(screen.queryByText('Option 2')).not.toBeInTheDocument();
@@ -47,10 +56,14 @@ describe('CheckboxGroup', () => {
 
   it('should display correct text on button showAmount prop is passed and there is only one hidden', () => {
     const { getByText } = render(
-      <CheckboxGroup showAmount={1} label="test">
-        <CheckboxGroupCheckbox value="Option 1">Option 1</CheckboxGroupCheckbox>
-        <CheckboxGroupCheckbox value="Option 2">Option 2</CheckboxGroupCheckbox>
-      </CheckboxGroup>,
+      <CheckboxGroup
+        showAmount={1}
+        label="test"
+        checkboxes={[
+          { value: 'Option 1', children: 'Option 1' },
+          { value: 'Option 2', children: 'Option 2' },
+        ]}
+      />,
     );
     expect(getByText('Option 1')).toBeInTheDocument();
     expect(screen.queryByText('Option 2')).not.toBeInTheDocument();
@@ -61,15 +74,17 @@ describe('CheckboxGroup', () => {
     const user = userEvent.setup();
     const onChange = vi.fn();
 
-    const { getByTestId } = render(
-      <CheckboxGroup onChange={onChange} label="test">
-        <CheckboxGroupCheckbox value="Option 1" data-testid="option1">
-          Option 1
-        </CheckboxGroupCheckbox>
-        <CheckboxGroupCheckbox value="Option 2">Option 2</CheckboxGroupCheckbox>
-      </CheckboxGroup>,
+    const { getByRole } = render(
+      <CheckboxGroup
+        onChange={onChange}
+        label="test"
+        checkboxes={[
+          { value: 'Option 1', children: 'Option 1' },
+          { value: 'Option 2', children: 'Option 2' },
+        ]}
+      />,
     );
-    await act(() => user.click(getByTestId('option1')));
+    await act(() => user.click(getByRole('checkbox', { name: 'Option 1' })));
     expect(onChange).toBeCalled();
   });
 
@@ -77,20 +92,19 @@ describe('CheckboxGroup', () => {
     const user = userEvent.setup();
     const onChange = vi.fn();
 
-    const { getByTestId } = render(
-      <CheckboxGroup onChange={onChange} label="test">
-        <CheckboxGroupCheckbox value="Option 1" data-testid="option1">
-          Option 1
-        </CheckboxGroupCheckbox>
-        <CheckboxGroupCheckbox value="Option 2" data-testid="option2">
-          Option 2
-        </CheckboxGroupCheckbox>
-        <CheckboxGroupCheckbox value="Option 2">Option 3</CheckboxGroupCheckbox>
-      </CheckboxGroup>,
+    const { getByRole, getAllByRole } = render(
+      <CheckboxGroup
+        onChange={onChange}
+        label="test"
+        checkboxes={[
+          { value: 'Option 1', children: 'Option 1' },
+          { value: 'Option 2', children: 'Option 2' },
+          { value: 'Option 3', children: 'Option 3' },
+        ]}
+      />,
     );
-    await act(() => user.click(getByTestId('option1')));
-    await act(() => user.click(getByTestId('option2')));
-    expect(getByTestId('option1')).toBeChecked();
-    expect(getByTestId('option2')).toBeChecked();
+    await act(() => user.click(getByRole('checkbox', { name: 'Option 1' })));
+    await act(() => user.click(getByRole('checkbox', { name: 'Option 2' })));
+    expect(getAllByRole('checkbox', { checked: true }).length).toBe(2);
   });
 });
diff --git a/packages/ui/src/components/checkbox-group/checkbox-group.stories.tsx b/packages/ui/src/components/checkbox-group/checkbox-group.stories.tsx
index f9b94df5b..bb7f0a37b 100644
--- a/packages/ui/src/components/checkbox-group/checkbox-group.stories.tsx
+++ b/packages/ui/src/components/checkbox-group/checkbox-group.stories.tsx
@@ -2,7 +2,6 @@
 import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
 
 import { CheckboxGroup } from './checkbox-group.component.js';
-import { CheckboxGroupCheckbox } from './components/checkbox-group-checkbox/checkbox-group-checkbox.component.js';
 
 const meta: Meta<typeof CheckboxGroup> = {
   title: 'Components/CheckboxGroup',
@@ -43,10 +42,10 @@ type Story = StoryObj<typeof meta>;
  */
 export const Default: Story = {
   args: {
-    children: [
-      <CheckboxGroupCheckbox value="Option 1">Option 1</CheckboxGroupCheckbox>,
-      <CheckboxGroupCheckbox value="Option 2">Option 2</CheckboxGroupCheckbox>,
-      <CheckboxGroupCheckbox value="Option 3">Option 3</CheckboxGroupCheckbox>,
+    checkboxes: [
+      { value: 'Option 1', children: 'Option 1' },
+      { value: 'Option 2', children: 'Option 2' },
+      { value: 'Option 3', children: 'Option 3' },
     ],
   },
 };
@@ -56,14 +55,14 @@ export const Default: Story = {
  */
 export const LongLines: Story = {
   args: {
-    children: [
-      <CheckboxGroupCheckbox value="Option 1">Option 1</CheckboxGroupCheckbox>,
-      <CheckboxGroupCheckbox value="Option 2">Option 2</CheckboxGroupCheckbox>,
-      <CheckboxGroupCheckbox value="Option 3">
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et odit labore illo sint tempora magnam modi nesciunt
-        consectetur vitae maiores itaque reiciendis sunt nisi ullam officiis, provident fugiat, esse iste adipisci
-        repellat! Incidunt delectus, pariatur quaerat vitae aspernatur eveniet libero.
-      </CheckboxGroupCheckbox>,
+    checkboxes: [
+      { value: 'Option 1', children: 'Option 1' },
+      { value: 'Option 2', children: 'Option 2' },
+      {
+        value: 'Option 3',
+        children:
+          'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et odit labore illo sint tempora magnam modi nesciunt consectetur vitae maiores itaque reiciendis sunt nisi ullam officiis, provident fugiat, esse iste adipisci repellat! Incidunt delectus, pariatur quaerat vitae aspernatur eveniet libero.',
+      },
     ],
   },
 };
@@ -73,10 +72,10 @@ export const LongLines: Story = {
  */
 export const DefaultValue: Story = {
   args: {
-    children: [
-      <CheckboxGroupCheckbox value="Option 1">Option 1</CheckboxGroupCheckbox>,
-      <CheckboxGroupCheckbox value="Option 2">Option 2</CheckboxGroupCheckbox>,
-      <CheckboxGroupCheckbox value="Option 3">Option 3</CheckboxGroupCheckbox>,
+    checkboxes: [
+      { value: 'Option 1', children: 'Option 1' },
+      { value: 'Option 2', children: 'Option 2' },
+      { value: 'Option 3', children: 'Option 3' },
     ],
     defaultValue: ['Option 1'],
   },
@@ -87,10 +86,10 @@ export const DefaultValue: Story = {
  */
 export const Inline: Story = {
   args: {
-    children: [
-      <CheckboxGroupCheckbox value="Option 1">Option 1</CheckboxGroupCheckbox>,
-      <CheckboxGroupCheckbox value="Option 2">Option 2</CheckboxGroupCheckbox>,
-      <CheckboxGroupCheckbox value="Option 3">Option 3</CheckboxGroupCheckbox>,
+    checkboxes: [
+      { value: 'Option 1', children: 'Option 1' },
+      { value: 'Option 2', children: 'Option 2' },
+      { value: 'Option 3', children: 'Option 3' },
     ],
     orientation: 'horizontal',
   },
@@ -101,14 +100,14 @@ export const Inline: Story = {
  */
 export const InlineLongLines: Story = {
   args: {
-    children: [
-      <CheckboxGroupCheckbox value="Option 1">Option 1</CheckboxGroupCheckbox>,
-      <CheckboxGroupCheckbox value="Option 2">Option 2</CheckboxGroupCheckbox>,
-      <CheckboxGroupCheckbox value="Option 3">
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et odit labore illo sint tempora magnam modi nesciunt
-        consectetur vitae maiores itaque reiciendis sunt nisi ullam officiis, provident fugiat, esse iste adipisci
-        repellat! Incidunt delectus, pariatur quaerat vitae aspernatur eveniet libero.
-      </CheckboxGroupCheckbox>,
+    checkboxes: [
+      { value: 'Option 1', children: 'Option 1' },
+      { value: 'Option 2', children: 'Option 2' },
+      {
+        value: 'Option 3',
+        children:
+          'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et odit labore illo sint tempora magnam modi nesciunt consectetur vitae maiores itaque reiciendis sunt nisi ullam officiis, provident fugiat, esse iste adipisci repellat! Incidunt delectus, pariatur quaerat vitae aspernatur eveniet libero.',
+      },
     ],
     orientation: 'horizontal',
   },
@@ -119,10 +118,10 @@ export const InlineLongLines: Story = {
  */
 export const Disabled: Story = {
   args: {
-    children: [
-      <CheckboxGroupCheckbox value="Option 1">Option 1</CheckboxGroupCheckbox>,
-      <CheckboxGroupCheckbox value="Option 2">Option 2</CheckboxGroupCheckbox>,
-      <CheckboxGroupCheckbox value="Option 3">Option 3</CheckboxGroupCheckbox>,
+    checkboxes: [
+      { value: 'Option 1', children: 'Option 1' },
+      { value: 'Option 2', children: 'Option 2' },
+      { value: 'Option 3', children: 'Option 3' },
     ],
     isDisabled: true,
     defaultValue: ['Option 1'],
@@ -134,10 +133,10 @@ export const Disabled: Story = {
  */
 export const Large: Story = {
   args: {
-    children: [
-      <CheckboxGroupCheckbox value="Option 1">Option 1</CheckboxGroupCheckbox>,
-      <CheckboxGroupCheckbox value="Option 2">Option 2</CheckboxGroupCheckbox>,
-      <CheckboxGroupCheckbox value="Option 3">Option 3</CheckboxGroupCheckbox>,
+    checkboxes: [
+      { value: 'Option 1', children: 'Option 1' },
+      { value: 'Option 2', children: 'Option 2' },
+      { value: 'Option 3', children: 'Option 3' },
     ],
     size: 'large',
   },
@@ -148,10 +147,10 @@ export const Large: Story = {
  */
 export const HiddenItems: Story = {
   args: {
-    children: [
-      <CheckboxGroupCheckbox value="Option 1">Option 1</CheckboxGroupCheckbox>,
-      <CheckboxGroupCheckbox value="Option 2">Option 2</CheckboxGroupCheckbox>,
-      <CheckboxGroupCheckbox value="Option 3">Option 3</CheckboxGroupCheckbox>,
+    checkboxes: [
+      { value: 'Option 1', children: 'Option 1' },
+      { value: 'Option 2', children: 'Option 2' },
+      { value: 'Option 3', children: 'Option 3' },
     ],
     showAmount: 1,
   },
@@ -162,16 +161,10 @@ export const HiddenItems: Story = {
  */
 export const HintText: Story = {
   args: {
-    children: [
-      <CheckboxGroupCheckbox value="Option 1" hint="This is hint text">
-        Option 1
-      </CheckboxGroupCheckbox>,
-      <CheckboxGroupCheckbox value="Option 2" hint="This is hint text">
-        Option 2
-      </CheckboxGroupCheckbox>,
-      <CheckboxGroupCheckbox value="Option 3" hint="This is hint text">
-        Option 3
-      </CheckboxGroupCheckbox>,
+    checkboxes: [
+      { value: 'Option 1', children: 'Option 1', hint: 'This is hint text 1' },
+      { value: 'Option 2', children: 'Option 2', hint: 'This is hint text 2' },
+      { value: 'Option 3', children: 'Option 3', hint: 'This is hint text 3' },
     ],
   },
 };
@@ -181,16 +174,10 @@ export const HintText: Story = {
  */
 export const OnChange: Story = {
   args: {
-    children: [
-      <CheckboxGroupCheckbox value="Option 1" hint="This is hint text">
-        Option 1
-      </CheckboxGroupCheckbox>,
-      <CheckboxGroupCheckbox value="Option 2" hint="This is hint text">
-        Option 2
-      </CheckboxGroupCheckbox>,
-      <CheckboxGroupCheckbox value="Option 3" hint="This is hint text">
-        Option 3
-      </CheckboxGroupCheckbox>,
+    checkboxes: [
+      { value: 'Option 1', children: 'Option 1', hint: 'This is hint text 1' },
+      { value: 'Option 2', children: 'Option 2', hint: 'This is hint text 2' },
+      { value: 'Option 3', children: 'Option 3', hint: 'This is hint text 3' },
     ],
     onChange: e => console.log(e),
   },
@@ -205,10 +192,10 @@ export const ErrorMessageAndLabel: Story = {
     errorMessage: 'This is an inline error message',
     validationState: 'invalid',
     hintMessage: 'Hint: choose from one of the following options',
-    children: [
-      <CheckboxGroupCheckbox value="Option 1">Option 1</CheckboxGroupCheckbox>,
-      <CheckboxGroupCheckbox value="Option 2">Option 2</CheckboxGroupCheckbox>,
-      <CheckboxGroupCheckbox value="Option 3">Option 3</CheckboxGroupCheckbox>,
+    checkboxes: [
+      { value: 'Option 1', children: 'Option 1' },
+      { value: 'Option 2', children: 'Option 2' },
+      { value: 'Option 3', children: 'Option 3' },
     ],
   },
 };
diff --git a/packages/ui/src/components/checkbox-group/checkbox-group.types.ts b/packages/ui/src/components/checkbox-group/checkbox-group.types.ts
index 78e9659fb..624f1484f 100644
--- a/packages/ui/src/components/checkbox-group/checkbox-group.types.ts
+++ b/packages/ui/src/components/checkbox-group/checkbox-group.types.ts
@@ -1,14 +1,15 @@
-import { ReactNode } from 'react';
 import { AriaCheckboxGroupProps } from 'react-aria';
 import { CheckboxGroupState } from 'react-stately';
 
 import { HintProps } from '../index.js';
 
+import { CheckboxGroupCheckboxProps } from './components/checkbox-group-checkbox/checkbox-group-checkbox.types.js';
+
 export type CheckboxGroupProps = {
   /**
    * The `CheckboxItem` components to render
    */
-  children: ReactNode[];
+  checkboxes: CheckboxGroupCheckboxProps[];
   /**
    * String to override base style
    */
diff --git a/packages/ui/src/components/radio-group/radio-group.component.tsx b/packages/ui/src/components/radio-group/radio-group.component.tsx
index 3cf214364..e35a1e9cf 100644
--- a/packages/ui/src/components/radio-group/radio-group.component.tsx
+++ b/packages/ui/src/components/radio-group/radio-group.component.tsx
@@ -1,12 +1,12 @@
 'use client';
 
-import React, { ReactElement, cloneElement, createContext, useEffect, useMemo, useRef, useState } from 'react';
+import React, { createContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useFocusRing, useRadioGroup } from 'react-aria';
 import { useRadioGroupState } from 'react-stately';
 
 import { Button } from '../button/index.js';
 import { ExpandMoreIcon } from '../icon/index.js';
-import { ErrorMessage, Hint, Label } from '../index.js';
+import { ErrorMessage, Hint, Label, RadioGroupRadio } from '../index.js';
 
 import { styles as radioGroupStyles } from './radio-group.styles.js';
 import { type RadioGroupContextState, type RadioGroupProps } from './radio-group.types.js';
@@ -28,7 +28,7 @@ export const RadioGroupContext = createContext<RadioGroupContextState>({
 
 export function RadioGroup({
   className,
-  children,
+  radios,
   label,
   orientation = 'vertical',
   showAmount = 0,
@@ -45,18 +45,15 @@ export function RadioGroup({
   const { isFocusVisible, focusProps } = useFocusRing();
   const [hiddenOptions, setHiddenOptions] = useState<boolean>(showAmount > 0);
   const firstNewRadioRef = useRef<HTMLDivElement>(null);
-  const revealAmount = children && children.length - showAmount;
+  const revealAmount = radios && radios.length - showAmount;
   const styles = radioGroupStyles({ orientation, isFocusVisible });
   const childrenToRender = useMemo(() => {
-    const newChildren = children.map((child, index) => {
-      return cloneElement(child as ReactElement, {
-        key: index,
-        ref: index === showAmount ? firstNewRadioRef : null,
-      });
-    });
+    const newChildren = radios.map((radio, index) => (
+      <RadioGroupRadio key={index} ref={index === showAmount ? firstNewRadioRef : null} {...radio} />
+    ));
 
     return hiddenOptions ? newChildren.slice(0, showAmount) : newChildren;
-  }, [children, hiddenOptions, showAmount]);
+  }, [radios, hiddenOptions, showAmount]);
 
   useEffect(() => {
     if (showAmount > 0 && !hiddenOptions) {
diff --git a/packages/ui/src/components/radio-group/radio-group.spec.tsx b/packages/ui/src/components/radio-group/radio-group.spec.tsx
index cc5e9aaca..9d2efd2ee 100644
--- a/packages/ui/src/components/radio-group/radio-group.spec.tsx
+++ b/packages/ui/src/components/radio-group/radio-group.spec.tsx
@@ -3,25 +3,29 @@ import userEvent from '@testing-library/user-event';
 
 import { RadioGroup } from './radio-group.component.js';
 
-import { RadioGroupRadio } from './index.js';
-
 describe('RadioGroup', () => {
   it('renders the component', () => {
     const { container } = render(
-      <RadioGroup label="test">
-        <RadioGroupRadio value="Option 1">Option 1</RadioGroupRadio>
-        <RadioGroupRadio value="Option 2">Option 2</RadioGroupRadio>
-      </RadioGroup>,
+      <RadioGroup
+        label="test"
+        radios={[
+          { value: 'Option 1', children: 'Option 1' },
+          { value: 'Option 2', children: 'Option 2' },
+        ]}
+      />,
     );
     expect(container).toBeInTheDocument();
   });
 
   it('should render Radios when passed as children', () => {
     const { getByText } = render(
-      <RadioGroup label="test">
-        <RadioGroupRadio value="Option 1">Option 1</RadioGroupRadio>
-        <RadioGroupRadio value="Option 2">Option 2</RadioGroupRadio>
-      </RadioGroup>,
+      <RadioGroup
+        label="test"
+        radios={[
+          { value: 'Option 1', children: 'Option 1' },
+          { value: 'Option 2', children: 'Option 2' },
+        ]}
+      />,
     );
     expect(getByText('Option 1')).toBeInTheDocument();
     expect(getByText('Option 2')).toBeInTheDocument();
@@ -31,11 +35,15 @@ describe('RadioGroup', () => {
     const user = userEvent.setup();
 
     const { getByText } = render(
-      <RadioGroup showAmount={1} label="test">
-        <RadioGroupRadio value="Option 1">Option 1</RadioGroupRadio>
-        <RadioGroupRadio value="Option 2">Option 2</RadioGroupRadio>
-        <RadioGroupRadio value="Option 3">Option 3</RadioGroupRadio>
-      </RadioGroup>,
+      <RadioGroup
+        showAmount={1}
+        label="test"
+        radios={[
+          { value: 'Option 1', children: 'Option 1' },
+          { value: 'Option 2', children: 'Option 2' },
+          { value: 'Option 3', children: 'Option 3' },
+        ]}
+      />,
     );
     expect(getByText('Option 1')).toBeInTheDocument();
     expect(screen.queryByText('Option 2')).not.toBeInTheDocument();
@@ -48,10 +56,14 @@ describe('RadioGroup', () => {
 
   it('should display correct text on button showAmount prop is passed and there is only one hidden', () => {
     const { getByText } = render(
-      <RadioGroup showAmount={1} label="test">
-        <RadioGroupRadio value="Option 1">Option 1</RadioGroupRadio>
-        <RadioGroupRadio value="Option 2">Option 2</RadioGroupRadio>
-      </RadioGroup>,
+      <RadioGroup
+        showAmount={1}
+        label="test"
+        radios={[
+          { value: 'Option 1', children: 'Option 1' },
+          { value: 'Option 2', children: 'Option 2' },
+        ]}
+      />,
     );
     expect(getByText('Option 1')).toBeInTheDocument();
     expect(screen.queryByText('Option 2')).not.toBeInTheDocument();
@@ -62,15 +74,17 @@ describe('RadioGroup', () => {
     const user = userEvent.setup();
     const onChange = vi.fn();
 
-    const { getByTestId } = render(
-      <RadioGroup onChange={onChange} label="test">
-        <RadioGroupRadio value="Option 1" data-testid="option1">
-          Option 1
-        </RadioGroupRadio>
-        <RadioGroupRadio value="Option 2">Option 2</RadioGroupRadio>
-      </RadioGroup>,
+    const { getByRole } = render(
+      <RadioGroup
+        onChange={onChange}
+        label="test"
+        radios={[
+          { value: 'Option 1', children: 'Option 1' },
+          { value: 'Option 2', children: 'Option 2' },
+        ]}
+      />,
     );
-    await act(() => user.click(getByTestId('option1')));
+    await act(() => user.click(getByRole('radio', { name: 'Option 1' })));
     expect(onChange).toBeCalled();
   });
 });
diff --git a/packages/ui/src/components/radio-group/radio-group.stories.tsx b/packages/ui/src/components/radio-group/radio-group.stories.tsx
index 986fb296e..fe0340ce9 100644
--- a/packages/ui/src/components/radio-group/radio-group.stories.tsx
+++ b/packages/ui/src/components/radio-group/radio-group.stories.tsx
@@ -3,8 +3,6 @@ import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
 
 import { RadioGroup } from './radio-group.component.js';
 
-import { RadioGroupRadio } from './index.js';
-
 const meta: Meta<typeof RadioGroup> = {
   title: 'Components/RadioGroup',
   component: RadioGroup,
@@ -38,10 +36,10 @@ type Story = StoryObj<typeof meta>;
  */
 export const Default: Story = {
   args: {
-    children: [
-      <RadioGroupRadio value="Option 1">Option 1</RadioGroupRadio>,
-      <RadioGroupRadio value="Option 2">Option 2</RadioGroupRadio>,
-      <RadioGroupRadio value="Option 3">Option 3</RadioGroupRadio>,
+    radios: [
+      { value: 'Option 1', children: 'Option 1' },
+      { value: 'Option 2', children: 'Option 2' },
+      { value: 'Option 3', children: 'Option 3' },
     ],
   },
 };
@@ -51,14 +49,14 @@ export const Default: Story = {
  */
 export const LongLines: Story = {
   args: {
-    children: [
-      <RadioGroupRadio value="Option 1">Option 1</RadioGroupRadio>,
-      <RadioGroupRadio value="Option 2">Option 2</RadioGroupRadio>,
-      <RadioGroupRadio value="Option 3">
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et odit labore illo sint tempora magnam modi nesciunt
-        consectetur vitae maiores itaque reiciendis sunt nisi ullam officiis, provident fugiat, esse iste adipisci
-        repellat! Incidunt delectus, pariatur quaerat vitae aspernatur eveniet libero.
-      </RadioGroupRadio>,
+    radios: [
+      { value: 'Option 1', children: 'Option 1' },
+      { value: 'Option 2', children: 'Option 2' },
+      {
+        value: 'Option 3',
+        children:
+          'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et odit labore illo sint tempora magnam modi nesciunt consectetur vitae maiores itaque reiciendis sunt nisi ullam officiis, provident fugiat, esse iste adipisci repellat! Incidunt delectus, pariatur quaerat vitae aspernatur eveniet libero.',
+      },
     ],
   },
 };
@@ -68,10 +66,10 @@ export const LongLines: Story = {
  */
 export const DefaultValue: Story = {
   args: {
-    children: [
-      <RadioGroupRadio value="Option 1">Option 1</RadioGroupRadio>,
-      <RadioGroupRadio value="Option 2">Option 2</RadioGroupRadio>,
-      <RadioGroupRadio value="Option 3">Option 3</RadioGroupRadio>,
+    radios: [
+      { value: 'Option 1', children: 'Option 1' },
+      { value: 'Option 2', children: 'Option 2' },
+      { value: 'Option 3', children: 'Option 3' },
     ],
     defaultValue: 'Option 1',
   },
@@ -82,10 +80,10 @@ export const DefaultValue: Story = {
  */
 export const Inline: Story = {
   args: {
-    children: [
-      <RadioGroupRadio value="Option 1">Option 1</RadioGroupRadio>,
-      <RadioGroupRadio value="Option 2">Option 2</RadioGroupRadio>,
-      <RadioGroupRadio value="Option 3">Option 3</RadioGroupRadio>,
+    radios: [
+      { value: 'Option 1', children: 'Option 1' },
+      { value: 'Option 2', children: 'Option 2' },
+      { value: 'Option 3', children: 'Option 3' },
     ],
     orientation: 'horizontal',
   },
@@ -96,14 +94,14 @@ export const Inline: Story = {
  */
 export const InlineLongLines: Story = {
   args: {
-    children: [
-      <RadioGroupRadio value="Option 1">Option 1</RadioGroupRadio>,
-      <RadioGroupRadio value="Option 2">Option 2</RadioGroupRadio>,
-      <RadioGroupRadio value="Option 3">
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et odit labore illo sint tempora magnam modi nesciunt
-        consectetur vitae maiores itaque reiciendis sunt nisi ullam officiis, provident fugiat, esse iste adipisci
-        repellat! Incidunt delectus, pariatur quaerat vitae aspernatur eveniet libero.
-      </RadioGroupRadio>,
+    radios: [
+      { value: 'Option 1', children: 'Option 1' },
+      { value: 'Option 2', children: 'Option 2' },
+      {
+        value: 'Option 3',
+        children:
+          'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et odit labore illo sint tempora magnam modi nesciunt consectetur vitae maiores itaque reiciendis sunt nisi ullam officiis, provident fugiat, esse iste adipisci repellat! Incidunt delectus, pariatur quaerat vitae aspernatur eveniet libero.',
+      },
     ],
     orientation: 'horizontal',
   },
@@ -114,10 +112,10 @@ export const InlineLongLines: Story = {
  */
 export const Disabled: Story = {
   args: {
-    children: [
-      <RadioGroupRadio value="Option 1">Option 1</RadioGroupRadio>,
-      <RadioGroupRadio value="Option 2">Option 2</RadioGroupRadio>,
-      <RadioGroupRadio value="Option 3">Option 3</RadioGroupRadio>,
+    radios: [
+      { value: 'Option 1', children: 'Option 1' },
+      { value: 'Option 2', children: 'Option 2' },
+      { value: 'Option 3', children: 'Option 3' },
     ],
     isDisabled: true,
   },
@@ -128,10 +126,10 @@ export const Disabled: Story = {
  */
 export const Large: Story = {
   args: {
-    children: [
-      <RadioGroupRadio value="Option 1">Option 1</RadioGroupRadio>,
-      <RadioGroupRadio value="Option 2">Option 2</RadioGroupRadio>,
-      <RadioGroupRadio value="Option 3">Option 3</RadioGroupRadio>,
+    radios: [
+      { value: 'Option 1', children: 'Option 1' },
+      { value: 'Option 2', children: 'Option 2' },
+      { value: 'Option 3', children: 'Option 3' },
     ],
     size: 'large',
   },
@@ -142,10 +140,10 @@ export const Large: Story = {
  */
 export const HiddenOptions: Story = {
   args: {
-    children: [
-      <RadioGroupRadio value="Option 1">Option 1</RadioGroupRadio>,
-      <RadioGroupRadio value="Option 2">Option 2</RadioGroupRadio>,
-      <RadioGroupRadio value="Option 3">Option 3</RadioGroupRadio>,
+    radios: [
+      { value: 'Option 1', children: 'Option 1' },
+      { value: 'Option 2', children: 'Option 2' },
+      { value: 'Option 3', children: 'Option 3' },
     ],
     showAmount: 1,
   },
@@ -156,16 +154,10 @@ export const HiddenOptions: Story = {
  */
 export const HintText: Story = {
   args: {
-    children: [
-      <RadioGroupRadio value="Option 1" hint="This is a hint">
-        Option 1
-      </RadioGroupRadio>,
-      <RadioGroupRadio value="Option 2" hint="This is a hint">
-        Option 2
-      </RadioGroupRadio>,
-      <RadioGroupRadio value="Option 3" hint="This is a hint">
-        Option 3
-      </RadioGroupRadio>,
+    radios: [
+      { value: 'Option 1', children: 'Option 1', hint: 'This is hint text 1' },
+      { value: 'Option 2', children: 'Option 2', hint: 'This is hint text 2' },
+      { value: 'Option 3', children: 'Option 3', hint: 'This is hint text 3' },
     ],
   },
 };
@@ -175,10 +167,10 @@ export const HintText: Story = {
  */
 export const OnChange: Story = {
   args: {
-    children: [
-      <RadioGroupRadio value="Option 1">Option 1</RadioGroupRadio>,
-      <RadioGroupRadio value="Option 2">Option 2</RadioGroupRadio>,
-      <RadioGroupRadio value="Option 3">Option 3</RadioGroupRadio>,
+    radios: [
+      { value: 'Option 1', children: 'Option 1' },
+      { value: 'Option 2', children: 'Option 2' },
+      { value: 'Option 3', children: 'Option 3' },
     ],
     onChange: e => console.log(e),
   },
@@ -193,10 +185,10 @@ export const ErrorMessageAndLabel: Story = {
     errorMessage: 'This is an inline error message',
     validationState: 'invalid',
     hintMessage: 'Hint: choose from one of the following options',
-    children: [
-      <RadioGroupRadio value="Option 1">Option 1</RadioGroupRadio>,
-      <RadioGroupRadio value="Option 2">Option 2</RadioGroupRadio>,
-      <RadioGroupRadio value="Option 3">Option 3</RadioGroupRadio>,
+    radios: [
+      { value: 'Option 1', children: 'Option 1' },
+      { value: 'Option 2', children: 'Option 2' },
+      { value: 'Option 3', children: 'Option 3' },
     ],
   },
 };
diff --git a/packages/ui/src/components/radio-group/radio-group.types.ts b/packages/ui/src/components/radio-group/radio-group.types.ts
index 07b0b1f22..1d2263334 100644
--- a/packages/ui/src/components/radio-group/radio-group.types.ts
+++ b/packages/ui/src/components/radio-group/radio-group.types.ts
@@ -1,14 +1,11 @@
-import { ReactNode } from 'react';
 import { type AriaRadioGroupProps } from 'react-aria';
 import { type RadioGroupState } from 'react-stately';
 
 import { HintProps } from '../index.js';
 
+import { RadioGroupRadioProps } from './components/radio-group-radio/radio-group-radio.types.js';
+
 export type RadioGroupProps = {
-  /**
-   * The `Radio` components to render
-   */
-  children: ReactNode[];
   /**
    * String to override base style
    */
@@ -21,6 +18,10 @@ export type RadioGroupProps = {
    * hint message
    */
   hintMessage?: HintProps['children'];
+  /**
+   * The `Radio` components to render
+   */
+  radios: RadioGroupRadioProps[];
   /**
    * Amount of Radios to display, remainder will be hidden behind reveal button
    */
diff --git a/packages/ui/src/components/table/table.stories.tsx b/packages/ui/src/components/table/table.stories.tsx
index 31160f8e8..c8e12ac85 100644
--- a/packages/ui/src/components/table/table.stories.tsx
+++ b/packages/ui/src/components/table/table.stories.tsx
@@ -1,9 +1,17 @@
 import { type Meta, StoryFn, type StoryObj } from '@storybook/react';
-import { TableBody, TableHeader } from 'react-stately';
 
 import { Table } from './table.component.js';
 
-import { TableCaption, TableCell, TableFooter, TableHeaderCell, TableHeaderRow, TableRow } from './index.js';
+import {
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHeader,
+  TableHeaderCell,
+  TableHeaderRow,
+  TableRow,
+} from './index.js';
 
 const meta: Meta<typeof Table> = {
   title: 'Components/Table',

From 5522e0e3927abe10826d27700451ea22ddcbbcac Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Wed, 31 Jan 2024 01:18:00 +0000
Subject: [PATCH 4/5] Version Packages

---
 .changeset/young-days-drop.md | 5 -----
 apps/site/CHANGELOG.md        | 7 +++++++
 apps/site/package.json        | 2 +-
 packages/ui/CHANGELOG.md      | 6 ++++++
 packages/ui/package.json      | 2 +-
 5 files changed, 15 insertions(+), 7 deletions(-)
 delete mode 100644 .changeset/young-days-drop.md

diff --git a/.changeset/young-days-drop.md b/.changeset/young-days-drop.md
deleted file mode 100644
index 1a245aa95..000000000
--- a/.changeset/young-days-drop.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-'@westpac/ui': minor
----
-
-Added soft style to badges
diff --git a/apps/site/CHANGELOG.md b/apps/site/CHANGELOG.md
index 497fbc4d7..a70faee6a 100644
--- a/apps/site/CHANGELOG.md
+++ b/apps/site/CHANGELOG.md
@@ -1,5 +1,12 @@
 # site
 
+## 0.1.2
+
+### Patch Changes
+
+- Updated dependencies [e3e94d1]
+  - @westpac/ui@0.15.0
+
 ## 0.1.1
 
 ### Patch Changes
diff --git a/apps/site/package.json b/apps/site/package.json
index b6671c421..1efb44c0a 100644
--- a/apps/site/package.json
+++ b/apps/site/package.json
@@ -1,6 +1,6 @@
 {
   "name": "site",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "private": true,
   "scripts": {
     "build": "next build",
diff --git a/packages/ui/CHANGELOG.md b/packages/ui/CHANGELOG.md
index e06c9875c..044a00566 100644
--- a/packages/ui/CHANGELOG.md
+++ b/packages/ui/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @westpac/ui
 
+## 0.15.0
+
+### Minor Changes
+
+- e3e94d1: Added soft style to badges
+
 ## 0.14.1
 
 ### Patch Changes
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 1c0a7e811..be5c339ac 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@westpac/ui",
-  "version": "0.14.1",
+  "version": "0.15.0",
   "license": "MIT",
   "sideEffects": false,
   "type": "module",

From 2e500e46b4a5d344d6b8207dfb05d51eee57e599 Mon Sep 17 00:00:00 2001
From: Tom King <tom.jack.king@gmail.com>
Date: Wed, 31 Jan 2024 14:12:09 +1000
Subject: [PATCH 5/5] - updated children on buttons, checkboxes and radios for
 group components to label

---
 .../button-dropdown-menu-sizes/content.mdoc   | 12 +--
 .../code/development-examples/content.mdoc    | 24 ++---
 .../design/button-groups/content.mdoc         | 32 +++----
 .../code/development-examples/content.mdoc    | 91 +++++++++----------
 .../design/checkbox-sizes/content.mdoc        | 12 +--
 .../checkbox-with-hint-text/content.mdoc      | 12 +--
 .../design/checkbox-with-reveal/content.mdoc  | 12 +--
 .../design/horizontal-layout/content.mdoc     |  6 +-
 .../radio-group/accessibilityDemo.mdoc        |  6 +-
 .../code/development-examples/content.mdoc    | 80 ++++++++--------
 .../design/horizontal-layout/content.mdoc     | 12 +--
 .../design/radio-sizes/content.mdoc           | 12 +--
 .../design/radios-with-hint-text/content.mdoc | 12 +--
 .../design/radios-with-reveal/content.mdoc    | 12 +--
 .../displaying-error-messages/content.mdoc    | 12 +--
 .../design/auto-address/content.mdoc          |  4 +-
 .../design/error-states/content.mdoc          |  4 +-
 .../design/manual-address/content.mdoc        |  4 +-
 .../name/design/full-name/content.mdoc        |  4 +-
 .../button-group/button-group.spec.tsx        | 32 +++----
 .../button-group/button-group.stories.tsx     | 42 ++++-----
 .../button-group-button.component.tsx         |  6 +-
 .../button-group-button.spec.tsx              |  2 +-
 .../button-group-button.types.ts              |  7 +-
 .../checkbox-group/checkbox-group.spec.tsx    | 30 +++---
 .../checkbox-group/checkbox-group.stories.tsx | 66 +++++++-------
 .../checkbox-group-checkbox.component.tsx     | 10 +-
 .../checkbox-group-checkbox.spec.tsx          |  2 +-
 .../checkbox-group-checkbox.stories.tsx       |  6 +-
 .../checkbox-group-checkbox.types.ts          |  6 +-
 .../radio-group-radio.component.tsx           |  6 +-
 .../radio-group-radio.spec.tsx                |  2 +-
 .../radio-group-radio.stories.tsx             |  6 +-
 .../radio-group-radio.types.ts                |  6 +-
 .../radio-group/radio-group.spec.tsx          | 24 ++---
 .../radio-group/radio-group.stories.tsx       | 66 +++++++-------
 36 files changed, 346 insertions(+), 336 deletions(-)

diff --git a/apps/site/src/content/design-system/components/button-dropdown/design/button-dropdown-menu-sizes/content.mdoc b/apps/site/src/content/design-system/components/button-dropdown/design/button-dropdown-menu-sizes/content.mdoc
index edaa4ca44..2bb0d13d3 100644
--- a/apps/site/src/content/design-system/components/button-dropdown/design/button-dropdown-menu-sizes/content.mdoc
+++ b/apps/site/src/content/design-system/components/button-dropdown/design/button-dropdown-menu-sizes/content.mdoc
@@ -54,18 +54,18 @@ The button dropdown menus come in three sizes or widths. They are triggered by t
     <CheckboxGroup 
       defaultValue={['Option 1']}
       checkboxes={[
-        { value: "Option 1", children: "Option 1" },
-        { value: "Option 2", children: "Option 2" },
-        { value: "Option 3", children: "Option 3" },
+        { value: "Option 1", label: "Option 1" },
+        { value: "Option 2", label: "Option 2" },
+        { value: "Option 3", label: "Option 3" },
       ]}
     />
     <ButtonDropdownHeading>Options</ButtonDropdownHeading>
     <CheckboxGroup 
       defaultValue={['Option 1']}
       checkboxes={[
-        { value: "Option 1", children: "Option 1" },
-        { value: "Option 2", children: "Option 2" },
-        { value: "Option 3", children: "Option 3" },
+        { value: "Option 1", label: "Option 1" },
+        { value: "Option 2", label: "Option 2" },
+        { value: "Option 3", label: "Option 3" },
       ]}
     />
   </ButtonDropdown>
diff --git a/apps/site/src/content/design-system/components/button-group/code/development-examples/content.mdoc b/apps/site/src/content/design-system/components/button-group/code/development-examples/content.mdoc
index f4c8ad149..064ce64dc 100644
--- a/apps/site/src/content/design-system/components/button-group/code/development-examples/content.mdoc
+++ b/apps/site/src/content/design-system/components/button-group/code/development-examples/content.mdoc
@@ -3,9 +3,9 @@
 ```jsx
 <ButtonGroup 
   buttons={[
-    { value: "Left", children: "Left"}, 
-    { value: "Middle", children: "Middle" }, 
-    { value: "Right", children: "Right"}
+    { value: "Left", label: "Left"}, 
+    { value: "Middle", label: "Middle" }, 
+    { value: "Right", label: "Right"}
   ]} 
 />
 
@@ -19,18 +19,18 @@
     defaultValue={0}
     label={<p className="typography-body-10 text-muted italic mb-[0.875rem]">Index (integer)</p>}
     buttons={[
-      { value: 0, children: "Left" }, 
-      { value: 1, children: "Middle" }, 
-      { value: 2, children: "Right"}
+      { value: 0, label: "Left" }, 
+      { value: 1, label: "Middle" }, 
+      { value: 2, label: "Right"}
     ]}
   />
   <ButtonGroup
     defaultValue="right"
     label={<p className="typography-body-10 text-muted italic mb-[0.875rem]">Key (string)</p>}
     buttons={[
-      { value: "left", children: "Left" }, 
-      { value: "middle", children: "Middle" }, 
-      { value: "right", children: "Right"}
+      { value: "left", label: "Left" }, 
+      { value: "middle", label: "Middle" }, 
+      { value: "right", label: "Right"}
     ]}
   />
 </div>
@@ -62,9 +62,9 @@
         look="hero" 
         value={controlled}
         buttons={[
-          { value: "yes", children: "Yes"}, 
-          { value: "maybe", children: "Maybe" }, 
-          { value: "no", children: "No"}
+          { value: "yes", label: "Yes"}, 
+          { value: "maybe", label: "Maybe" }, 
+          { value: "no", label: "No"}
         ]}
       />
     </div>
diff --git a/apps/site/src/content/design-system/components/button-group/design/button-groups/content.mdoc b/apps/site/src/content/design-system/components/button-group/design/button-groups/content.mdoc
index 6cafbf0dc..172c13224 100644
--- a/apps/site/src/content/design-system/components/button-group/design/button-groups/content.mdoc
+++ b/apps/site/src/content/design-system/components/button-group/design/button-groups/content.mdoc
@@ -5,29 +5,29 @@
   <ButtonGroup 
     size="small"
     buttons={[
-      { value: "sm", children: "Sm - 30px"}, 
-      { value: "Label", children: "Label" }
+      { value: "sm", label: "Sm - 30px"}, 
+      { value: "Label", label: "Label" }
     ]}
   />
   <ButtonGroup 
     size="medium"
     buttons={[
-      { value: "md", children: "Md - 36px"}, 
-      { value: "Label", children: "Label" }
+      { value: "md", label: "Md - 36px"}, 
+      { value: "Label", label: "Label" }
     ]}
     />
   <ButtonGroup 
     size="large"
     buttons={[
-      { value: "lg", children: "Lg - 42px"}, 
-      { value: "Label", children: "Label" }
+      { value: "lg", label: "Lg - 42px"}, 
+      { value: "Label", label: "Label" }
     ]}
   />
   <ButtonGroup 
     size="xlarge"
     buttons={[
-      { value: "xl", children: "Xl - 48px"}, 
-      { value: "Label", children: "Label" }
+      { value: "xl", label: "Xl - 48px"}, 
+      { value: "Label", label: "Label" }
     ]}
   />
 </div>
@@ -40,17 +40,17 @@
   <ButtonGroup 
     look="hero"
     buttons={[
-      { value: "Yes", children: "Yes"}, 
-      { value: "No", children: "No" }
+      { value: "Yes", label: "Yes"}, 
+      { value: "No", label: "No" }
     ]}
   />
 
   <ButtonGroup 
     look="hero"
     buttons={[
-      { value: "Email", children: "Email"}, 
-      { value: "Phone", children: "Phone" },
-      { value: "SMS", children: "SMS" }
+      { value: "Email", label: "Email"}, 
+      { value: "Phone", label: "Phone" },
+      { value: "SMS", label: "SMS" }
     ]}
   />
 </div>
@@ -64,9 +64,9 @@
     look="hero" 
     block
     buttons={[
-      { value: "Email", children: "Email"}, 
-      { value: "Phone", children: "Phone" },
-      { value: "SMS", children: "SMS" }
+      { value: "Email", label: "Email"}, 
+      { value: "Phone", label: "Phone" },
+      { value: "SMS", label: "SMS" }
     ]}
   />
 </div>
diff --git a/apps/site/src/content/design-system/components/checkbox-group/code/development-examples/content.mdoc b/apps/site/src/content/design-system/components/checkbox-group/code/development-examples/content.mdoc
index 5212b9505..803c5fbae 100644
--- a/apps/site/src/content/design-system/components/checkbox-group/code/development-examples/content.mdoc
+++ b/apps/site/src/content/design-system/components/checkbox-group/code/development-examples/content.mdoc
@@ -8,9 +8,9 @@ This component was combined with RadioGroup in the old GEL, it is now it's own c
     className="col-span-1" 
     label={<ComponentTitle>Checkbox</ComponentTitle>}
     checkboxes={[
-      { value: "Option 1", children: "Option 1" },
-      { value: "Option 2", children: "Option 2" },
-      { value: "Option 3", children: "Option 3" },
+      { value: "Option 1", label: "Option 1" },
+      { value: "Option 2", label: "Option 2" },
+      { value: "Option 3", label: "Option 3" },
     ]}
   />
 </div>
@@ -23,9 +23,9 @@ This component was combined with RadioGroup in the old GEL, it is now it's own c
   label={<ComponentTitle>Checkbox</ComponentTitle>} 
   defaultValue={['1', '3']}
   checkboxes={[
-    { value: "1", children: "Option 1", isDisabled: true},
-    { value: "2", children: "Option 2" },
-    { value: "3", children: "Option 3" },
+    { value: "1", label: "Option 1", isDisabled: true},
+    { value: "2", label: "Option 2" },
+    { value: "3", label: "Option 3" },
   ]}
 />
 ```
@@ -42,9 +42,9 @@ This component was combined with RadioGroup in the old GEL, it is now it's own c
       onChange={(value, event) => setFormCheckValue(value)}
       label={<ComponentTitle>Checkbox</ComponentTitle>}
       checkboxes={[
-        { value: "1", children: "Option 1" },
-        { value: "2", children: "Option 2" },
-        { value: "3", children: "Option 3" },
+        { value: "1", label: "Option 1" },
+        { value: "2", label: "Option 2" },
+        { value: "3", label: "Option 3" },
       ]}
     />
   );
@@ -60,9 +60,9 @@ This component was combined with RadioGroup in the old GEL, it is now it's own c
     label={<ComponentTitle>Medium</ComponentTitle>} 
     size="medium"
     checkboxes={[
-      { value: "Option 1", children: "Option 1" },
-      { value: "Option 2", children: "Option 2" },
-      { value: "Option 3", children: "Option 3" },
+      { value: "Option 1", label: "Option 1" },
+      { value: "Option 2", label: "Option 2" },
+      { value: "Option 3", label: "Option 3" },
     ]}
   />
   <CheckboxGroup 
@@ -70,9 +70,9 @@ This component was combined with RadioGroup in the old GEL, it is now it's own c
     label={<ComponentTitle>Large</ComponentTitle>} 
     size="large"
     checkboxes={[
-      { value: "Option 1", children: "Option 1" },
-      { value: "Option 2", children: "Option 2" },
-      { value: "Option 3", children: "Option 3" },
+      { value: "Option 1", label: "Option 1" },
+      { value: "Option 2", label: "Option 2" },
+      { value: "Option 3", label: "Option 3" },
     ]}
   />
 </div>
@@ -87,9 +87,9 @@ This component was combined with RadioGroup in the old GEL, it is now it's own c
     label={<ComponentTitle>Medium</ComponentTitle>} 
     size="medium"
     checkboxes={[
-      { value: "Option 1", children: "Option 1", hint: "This is hint text" },
-      { value: "Option 2", children: "Option 2", hint: "This is hint text" },
-      { value: "Option 3", children: "Option 3", hint: "This is hint text" },
+      { value: "Option 1", label: "Option 1", hint: "This is hint text" },
+      { value: "Option 2", label: "Option 2", hint: "This is hint text" },
+      { value: "Option 3", label: "Option 3", hint: "This is hint text" },
     ]}
   />
   <CheckboxGroup 
@@ -97,9 +97,9 @@ This component was combined with RadioGroup in the old GEL, it is now it's own c
     label={<ComponentTitle>Large</ComponentTitle>} 
     size="large"
     checkboxes={[
-      { value: "Option 1", children: "Option 1", hint: "This is hint text" },
-      { value: "Option 2", children: "Option 2", hint: "This is hint text" },
-      { value: "Option 3", children: "Option 3", hint: "This is hint text" },
+      { value: "Option 1", label: "Option 1", hint: "This is hint text" },
+      { value: "Option 2", label: "Option 2", hint: "This is hint text" },
+      { value: "Option 3", label: "Option 3", hint: "This is hint text" },
     ]}
   />
 </div>
@@ -113,9 +113,9 @@ This component was combined with RadioGroup in the old GEL, it is now it's own c
     label={<ComponentTitle>Medium</ComponentTitle>} 
     orientation="horizontal"
     checkboxes={[
-      { value: "Option 1", children: "Option 1" },
-      { value: "Option 2", children: "Option 2" },
-      { value: "Option 3", children: "Option 3" },
+      { value: "Option 1", label: "Option 1" },
+      { value: "Option 2", label: "Option 2" },
+      { value: "Option 3", label: "Option 3" },
     ]}
   />
 
@@ -124,9 +124,9 @@ This component was combined with RadioGroup in the old GEL, it is now it's own c
     size="large" 
     orientation="horizontal"
     checkboxes={[
-      { value: "Option 1", children: "Option 1" },
-      { value: "Option 2", children: "Option 2" },
-      { value: "Option 3", children: "Option 3" },
+      { value: "Option 1", label: "Option 1" },
+      { value: "Option 2", label: "Option 2" },
+      { value: "Option 3", label: "Option 3" },
     ]}
   />
 </div>
@@ -141,9 +141,9 @@ This component was combined with RadioGroup in the old GEL, it is now it's own c
     size="medium" 
     showAmount={1}
     checkboxes={[
-      { value: "Option 1", children: "Option 1" },
-      { value: "Option 2", children: "Option 2" },
-      { value: "Option 3", children: "Option 3" },
+      { value: "Option 1", label: "Option 1" },
+      { value: "Option 2", label: "Option 2" },
+      { value: "Option 3", label: "Option 3" },
     ]}
   />
   <CheckboxGroup 
@@ -151,9 +151,9 @@ This component was combined with RadioGroup in the old GEL, it is now it's own c
     size="large" 
     showAmount={1}
     checkboxes={[
-      { value: "Option 1", children: "Option 1" },
-      { value: "Option 2", children: "Option 2" },
-      { value: "Option 3", children: "Option 3" },
+      { value: "Option 1", label: "Option 1" },
+      { value: "Option 2", label: "Option 2" },
+      { value: "Option 3", label: "Option 3" },
     ]}  
   />
 </div>
@@ -168,9 +168,9 @@ This component was combined with RadioGroup in the old GEL, it is now it's own c
     size="medium" 
     isDisabled
     checkboxes={[
-      { value: "Option 1", children: "Option 1" },
-      { value: "Option 2", children: "Option 2" },
-      { value: "Option 3", children: "Option 3" },
+      { value: "Option 1", label: "Option 1" },
+      { value: "Option 2", label: "Option 2" },
+      { value: "Option 3", label: "Option 3" },
     ]}
   />
   <CheckboxGroup 
@@ -178,9 +178,9 @@ This component was combined with RadioGroup in the old GEL, it is now it's own c
     size="large" 
     isDisabled
     checkboxes={[
-      { value: "Option 1", children: "Option 1" },
-      { value: "Option 2", children: "Option 2" },
-      { value: "Option 3", children: "Option 3" },
+      { value: "Option 1", label: "Option 1" },
+      { value: "Option 2", label: "Option 2" },
+      { value: "Option 3", label: "Option 3" },
     ]}
   />
 </div>
@@ -194,20 +194,19 @@ This component was combined with RadioGroup in the old GEL, it is now it's own c
     label={<ComponentTitle>Medium</ComponentTitle>} 
     size="medium"
     checkboxes={[
-      { value: "Option 1", children: "Option 1", isDisabled: true },
-      { value: "Option 2", children: "Option 2" },
-      { value: "Option 3", children: "Option 3" },
+      { value: "Option 1", label: "Option 1", isDisabled: true },
+      { value: "Option 2", label: "Option 2" },
+      { value: "Option 3", label: "Option 3" },
     ]}
   />
   <CheckboxGroup 
     label={<ComponentTitle>Large</ComponentTitle>} 
     size="large"
     checkboxes={[
-      { value: "Option 1", children: "Option 1" },
-      { value: "Option 2", children: "Option 2", isDisabled: true  },
-      { value: "Option 3", children: "Option 3" },
+      { value: "Option 1", label: "Option 1" },
+      { value: "Option 2", label: "Option 2", isDisabled: true  },
+      { value: "Option 3", label: "Option 3" },
     ]}
   />
-  </CheckboxGroup>
 </div>
 ```
diff --git a/apps/site/src/content/design-system/components/checkbox-group/design/checkbox-sizes/content.mdoc b/apps/site/src/content/design-system/components/checkbox-group/design/checkbox-sizes/content.mdoc
index a67c505c2..4a9adfda9 100644
--- a/apps/site/src/content/design-system/components/checkbox-group/design/checkbox-sizes/content.mdoc
+++ b/apps/site/src/content/design-system/components/checkbox-group/design/checkbox-sizes/content.mdoc
@@ -7,9 +7,9 @@ There are two checkbox sizes, make sure when laying out forms that your checkbox
     label={<ComponentTitle>Medium</ComponentTitle>} 
     size="medium"
     checkboxes={[
-      { value: "Option 1", children: "Option 1" },
-      { value: "Option 2", children: "Option 2" },
-      { value: "Option 3", children: "Option 3" },
+      { value: "Option 1", label: "Option 1" },
+      { value: "Option 2", label: "Option 2" },
+      { value: "Option 3", label: "Option 3" },
     ]}
   />
   <CheckboxGroup 
@@ -17,9 +17,9 @@ There are two checkbox sizes, make sure when laying out forms that your checkbox
     label={<ComponentTitle>Large</ComponentTitle>} 
     size="large"
     checkboxes={[
-      { value: "Option 1", children: "Option 1" },
-      { value: "Option 2", children: "Option 2" },
-      { value: "Option 3", children: "Option 3" },
+      { value: "Option 1", label: "Option 1" },
+      { value: "Option 2", label: "Option 2" },
+      { value: "Option 3", label: "Option 3" },
     ]}
   />
 </div>
diff --git a/apps/site/src/content/design-system/components/checkbox-group/design/checkbox-with-hint-text/content.mdoc b/apps/site/src/content/design-system/components/checkbox-group/design/checkbox-with-hint-text/content.mdoc
index dec994fd5..99ff906c6 100644
--- a/apps/site/src/content/design-system/components/checkbox-group/design/checkbox-with-hint-text/content.mdoc
+++ b/apps/site/src/content/design-system/components/checkbox-group/design/checkbox-with-hint-text/content.mdoc
@@ -7,9 +7,9 @@ This variation allows supporting text to be displayed below the selectable item.
     label={<ComponentTitle>Medium</ComponentTitle>} 
     size="medium"
     checkboxes={[
-      { value: "Option 1", children: "Option 1", hint: "This is hint text" },
-      { value: "Option 2", children: "Option 2", hint: "This is hint text" },
-      { value: "Option 3", children: "Option 3", hint: "This is hint text" },
+      { value: "Option 1", label: "Option 1", hint: "This is hint text" },
+      { value: "Option 2", label: "Option 2", hint: "This is hint text" },
+      { value: "Option 3", label: "Option 3", hint: "This is hint text" },
     ]}
   />
   <CheckboxGroup 
@@ -17,9 +17,9 @@ This variation allows supporting text to be displayed below the selectable item.
     label={<ComponentTitle>Large</ComponentTitle>} 
     size="large"
     checkboxes={[
-      { value: "Option 1", children: "Option 1", hint: "This is hint text" },
-      { value: "Option 2", children: "Option 2", hint: "This is hint text" },
-      { value: "Option 3", children: "Option 3", hint: "This is hint text" },
+      { value: "Option 1", label: "Option 1", hint: "This is hint text" },
+      { value: "Option 2", label: "Option 2", hint: "This is hint text" },
+      { value: "Option 3", label: "Option 3", hint: "This is hint text" },
     ]}
   />
 </div>
diff --git a/apps/site/src/content/design-system/components/checkbox-group/design/checkbox-with-reveal/content.mdoc b/apps/site/src/content/design-system/components/checkbox-group/design/checkbox-with-reveal/content.mdoc
index 26295f01e..548e8c692 100644
--- a/apps/site/src/content/design-system/components/checkbox-group/design/checkbox-with-reveal/content.mdoc
+++ b/apps/site/src/content/design-system/components/checkbox-group/design/checkbox-with-reveal/content.mdoc
@@ -12,9 +12,9 @@ When requirements dictate long lists of choices, and particularly as mobile scre
     size="medium"
     showAmount={1}
     checkboxes={[
-      { value: 'Option 1', children: 'Option 1' },
-      { value: 'Option 2', children: 'Option 2' },
-      { value: 'Option 3', children: 'Option 3' },
+      { value: 'Option 1', label: 'Option 1' },
+      { value: 'Option 2', label: 'Option 2' },
+      { value: 'Option 3', label: 'Option 3' },
     ]}
   />
   <CheckboxGroup
@@ -22,9 +22,9 @@ When requirements dictate long lists of choices, and particularly as mobile scre
     size="large"
     showAmount={1}
     checkboxes={[
-      { value: 'Option 1', children: 'Option 1' },
-      { value: 'Option 2', children: 'Option 2' },
-      { value: 'Option 3', children: 'Option 3' },
+      { value: 'Option 1', label: 'Option 1' },
+      { value: 'Option 2', label: 'Option 2' },
+      { value: 'Option 3', label: 'Option 3' },
     ]}
   />
 </div>
diff --git a/apps/site/src/content/design-system/components/checkbox-group/design/horizontal-layout/content.mdoc b/apps/site/src/content/design-system/components/checkbox-group/design/horizontal-layout/content.mdoc
index a46ff3364..b37fcf2cb 100644
--- a/apps/site/src/content/design-system/components/checkbox-group/design/horizontal-layout/content.mdoc
+++ b/apps/site/src/content/design-system/components/checkbox-group/design/horizontal-layout/content.mdoc
@@ -4,9 +4,9 @@ Use this option when you require an inline layout, it's only recommended in very
 <CheckboxGroup 
   orientation="horizontal"
   checkboxes={[
-    { value: "Option 1", children: "Option 1" },
-    { value: "Option 2", children: "Option 2" },
-    { value: "Option 3", children: "Option 3" },
+    { value: "Option 1", label: "Option 1" },
+    { value: "Option 2", label: "Option 2" },
+    { value: "Option 3", label: "Option 3" },
   ]}
 />
 ```
diff --git a/apps/site/src/content/design-system/components/radio-group/accessibilityDemo.mdoc b/apps/site/src/content/design-system/components/radio-group/accessibilityDemo.mdoc
index 03ddc6c2f..e5c57f8f7 100644
--- a/apps/site/src/content/design-system/components/radio-group/accessibilityDemo.mdoc
+++ b/apps/site/src/content/design-system/components/radio-group/accessibilityDemo.mdoc
@@ -2,9 +2,9 @@
 <RadioGroup 
   orientation="horizontal"
   radios={[
-    { value: 'Option 1', children: 'Option 1' },
-    { value: 'Option 2', children: 'Option 2' },
-    { value: 'Option 3', children: 'Option 3' },
+    { value: 'Option 1', label: 'Option 1' },
+    { value: 'Option 2', label: 'Option 2' },
+    { value: 'Option 3', label: 'Option 3' },
   ]}
 />
 ```
diff --git a/apps/site/src/content/design-system/components/radio-group/code/development-examples/content.mdoc b/apps/site/src/content/design-system/components/radio-group/code/development-examples/content.mdoc
index 72051ac7d..7d3bfa629 100644
--- a/apps/site/src/content/design-system/components/radio-group/code/development-examples/content.mdoc
+++ b/apps/site/src/content/design-system/components/radio-group/code/development-examples/content.mdoc
@@ -8,18 +8,18 @@ This component does not contain an option for `checkbox` as it was decided it sh
     label={<p className="font-bold mb-1">Medium</p>} 
     size="medium"
     radios={[
-      { value: 'Option 1', children: 'Option 1' },
-      { value: 'Option 2', children: 'Option 2' },
-      { value: 'Option 3', children: 'Option 3' },
+      { value: 'Option 1', label: 'Option 1' },
+      { value: 'Option 2', label: 'Option 2' },
+      { value: 'Option 3', label: 'Option 3' },
     ]}
   />
   <RadioGroup 
     label={<p className="font-bold mb-1">Large</p>} 
     size="large"
     radios={[
-      { value: 'Option 1', children: 'Option 1' },
-      { value: 'Option 2', children: 'Option 2' },
-      { value: 'Option 3', children: 'Option 3' },
+      { value: 'Option 1', label: 'Option 1' },
+      { value: 'Option 2', label: 'Option 2' },
+      { value: 'Option 3', label: 'Option 3' },
     ]}
   />
 </div>
@@ -33,9 +33,9 @@ This component does not contain an option for `checkbox` as it was decided it sh
     label={<p className="font-bold mb-1">Medium</p>} 
     orientation="horizontal"
     radios={[
-      { value: 'Option 1', children: 'Option 1' },
-      { value: 'Option 2', children: 'Option 2' },
-      { value: 'Option 3', children: 'Option 3' },
+      { value: 'Option 1', label: 'Option 1' },
+      { value: 'Option 2', label: 'Option 2' },
+      { value: 'Option 3', label: 'Option 3' },
     ]}
   />
 
@@ -44,9 +44,9 @@ This component does not contain an option for `checkbox` as it was decided it sh
     size="large" 
     orientation="horizontal"
     radios={[
-      { value: 'Option 1', children: 'Option 1' },
-      { value: 'Option 2', children: 'Option 2' },
-      { value: 'Option 3', children: 'Option 3' },
+      { value: 'Option 1', label: 'Option 1' },
+      { value: 'Option 2', label: 'Option 2' },
+      { value: 'Option 3', label: 'Option 3' },
     ]}
   />
 </div>
@@ -60,18 +60,18 @@ This component does not contain an option for `checkbox` as it was decided it sh
     label={<p className="font-bold mb-1">Medium</p>} 
     size="medium"
     radios={[
-      { value: 'Option 1', children: 'Option 1', hint: 'This is hint text' },
-      { value: 'Option 2', children: 'Option 2', hint: 'This is hint text' },
-      { value: 'Option 3', children: 'Option 3', hint: 'This is hint text' },
+      { value: 'Option 1', label: 'Option 1', hint: 'This is hint text' },
+      { value: 'Option 2', label: 'Option 2', hint: 'This is hint text' },
+      { value: 'Option 3', label: 'Option 3', hint: 'This is hint text' },
     ]}
   />
   <RadioGroup 
     label={<p className="font-bold mb-1">Large</p>} 
     size="large"
     radios={[
-      { value: 'Option 1', children: 'Option 1', hint: 'This is hint text' },
-      { value: 'Option 2', children: 'Option 2', hint: 'This is hint text' },
-      { value: 'Option 3', children: 'Option 3', hint: 'This is hint text' },
+      { value: 'Option 1', label: 'Option 1', hint: 'This is hint text' },
+      { value: 'Option 2', label: 'Option 2', hint: 'This is hint text' },
+      { value: 'Option 3', label: 'Option 3', hint: 'This is hint text' },
     ]}
   />
 </div>
@@ -86,9 +86,9 @@ This component does not contain an option for `checkbox` as it was decided it sh
     size="medium" 
     showAmount={1}
     radios={[
-      { value: 'Option 1', children: 'Option 1' },
-      { value: 'Option 2', children: 'Option 2' },
-      { value: 'Option 3', children: 'Option 3' },
+      { value: 'Option 1', label: 'Option 1' },
+      { value: 'Option 2', label: 'Option 2' },
+      { value: 'Option 3', label: 'Option 3' },
     ]}
   />
   <RadioGroup 
@@ -96,9 +96,9 @@ This component does not contain an option for `checkbox` as it was decided it sh
     size="large" 
     showAmount={1}
     radios={[
-      { value: 'Option 1', children: 'Option 1' },
-      { value: 'Option 2', children: 'Option 2' },
-      { value: 'Option 3', children: 'Option 3' },
+      { value: 'Option 1', label: 'Option 1' },
+      { value: 'Option 2', label: 'Option 2' },
+      { value: 'Option 3', label: 'Option 3' },
     ]}
   />
 </div>
@@ -113,9 +113,9 @@ This component does not contain an option for `checkbox` as it was decided it sh
     size="medium" 
     isDisabled
     radios={[
-      { value: 'Option 1', children: 'Option 1' },
-      { value: 'Option 2', children: 'Option 2' },
-      { value: 'Option 3', children: 'Option 3' },
+      { value: 'Option 1', label: 'Option 1' },
+      { value: 'Option 2', label: 'Option 2' },
+      { value: 'Option 3', label: 'Option 3' },
     ]}
   />
   <RadioGroup 
@@ -123,9 +123,9 @@ This component does not contain an option for `checkbox` as it was decided it sh
     size="large" 
     isDisabled
     radios={[
-      { value: 'Option 1', children: 'Option 1' },
-      { value: 'Option 2', children: 'Option 2' },
-      { value: 'Option 3', children: 'Option 3' },
+      { value: 'Option 1', label: 'Option 1' },
+      { value: 'Option 2', label: 'Option 2' },
+      { value: 'Option 3', label: 'Option 3' },
     ]}
   />
 </div>
@@ -139,25 +139,19 @@ This component does not contain an option for `checkbox` as it was decided it sh
     label={<p className="font-bold mb-1">Medium</p>} 
     size="medium"
     radios={[
-      { value: 'Option 1', children: 'Option 1', isDisabled: true },
-      { value: 'Option 2', children: 'Option 2' },
-      { value: 'Option 3', children: 'Option 3' },
+      { value: 'Option 1', label: 'Option 1', isDisabled: true },
+      { value: 'Option 2', label: 'Option 2' },
+      { value: 'Option 3', label: 'Option 3' },
     ]}
   />
   <RadioGroup 
   label={<p className="font-bold mb-1">Large</p>} 
   size="large"
   radios={[
-    { value: 'Option 1', children: 'Option 1'},
-    { value: 'Option 2', children: 'Option 2', isDisabled: true },
-    { value: 'Option 3', children: 'Option 3' },
+    { value: 'Option 1', label: 'Option 1'},
+    { value: 'Option 2', label: 'Option 2', isDisabled: true },
+    { value: 'Option 3', label: 'Option 3' },
   ]}
-  >
-    <RadioGroupRadio value="Option 1">Option 1</RadioGroupRadio>
-    <RadioGroupRadio value="Option 2" isDisabled>
-      Option 2
-    </RadioGroupRadio>
-    <RadioGroupRadio value="Option 3">Option 3</RadioGroupRadio>
-  </RadioGroup>
+  />
 </div>
 ```
diff --git a/apps/site/src/content/design-system/components/radio-group/design/horizontal-layout/content.mdoc b/apps/site/src/content/design-system/components/radio-group/design/horizontal-layout/content.mdoc
index 62b669a48..183691b9a 100644
--- a/apps/site/src/content/design-system/components/radio-group/design/horizontal-layout/content.mdoc
+++ b/apps/site/src/content/design-system/components/radio-group/design/horizontal-layout/content.mdoc
@@ -6,9 +6,9 @@ Use this option when you require an inline layout, it's only recommended in very
     label={<ComponentTitle>Medium</ComponentTitle>} 
     orientation="horizontal"
     radios={[
-      { value: 'Option 1', children: 'Option 1' },
-      { value: 'Option 2', children: 'Option 2' },
-      { value: 'Option 3', children: 'Option 3' },
+      { value: 'Option 1', label: 'Option 1' },
+      { value: 'Option 2', label: 'Option 2' },
+      { value: 'Option 3', label: 'Option 3' },
     ]}
   />
 
@@ -17,9 +17,9 @@ Use this option when you require an inline layout, it's only recommended in very
     size="large" 
     orientation="horizontal"
     radios={[
-      { value: 'Option 1', children: 'Option 1' },
-      { value: 'Option 2', children: 'Option 2' },
-      { value: 'Option 3', children: 'Option 3' },
+      { value: 'Option 1', label: 'Option 1' },
+      { value: 'Option 2', label: 'Option 2' },
+      { value: 'Option 3', label: 'Option 3' },
     ]}
   />
 </div>
diff --git a/apps/site/src/content/design-system/components/radio-group/design/radio-sizes/content.mdoc b/apps/site/src/content/design-system/components/radio-group/design/radio-sizes/content.mdoc
index 765d4a22c..446137783 100644
--- a/apps/site/src/content/design-system/components/radio-group/design/radio-sizes/content.mdoc
+++ b/apps/site/src/content/design-system/components/radio-group/design/radio-sizes/content.mdoc
@@ -6,18 +6,18 @@ There are two radio button sizes, make sure when laying out forms that your radi
     label={<ComponentTitle>Medium</ComponentTitle>} 
     size="medium"
     radios={[
-      { value: 'Option 1', children: 'Option 1' },
-      { value: 'Option 2', children: 'Option 2' },
-      { value: 'Option 3', children: 'Option 3' },
+      { value: 'Option 1', label: 'Option 1' },
+      { value: 'Option 2', label: 'Option 2' },
+      { value: 'Option 3', label: 'Option 3' },
     ]}
   />
   <RadioGroup 
     label={<ComponentTitle>Large</ComponentTitle>} 
     size="large"
     radios={[
-      { value: 'Option 1', children: 'Option 1' },
-      { value: 'Option 2', children: 'Option 2' },
-      { value: 'Option 3', children: 'Option 3' },
+      { value: 'Option 1', label: 'Option 1' },
+      { value: 'Option 2', label: 'Option 2' },
+      { value: 'Option 3', label: 'Option 3' },
     ]}
   />
 </div>
diff --git a/apps/site/src/content/design-system/components/radio-group/design/radios-with-hint-text/content.mdoc b/apps/site/src/content/design-system/components/radio-group/design/radios-with-hint-text/content.mdoc
index dc1704065..d3fa36948 100644
--- a/apps/site/src/content/design-system/components/radio-group/design/radios-with-hint-text/content.mdoc
+++ b/apps/site/src/content/design-system/components/radio-group/design/radios-with-hint-text/content.mdoc
@@ -6,18 +6,18 @@ This variation allows supporting text to be displayed below the selectable item.
     label={<ComponentTitle>Medium</ComponentTitle>} 
     size="medium"
     radios={[
-      { value: 'Option 1', children: 'Option 1', hint: 'This is hint text' },
-      { value: 'Option 2', children: 'Option 2', hint: 'This is hint text' },
-      { value: 'Option 3', children: 'Option 3', hint: 'This is hint text' },
+      { value: 'Option 1', label: 'Option 1', hint: 'This is hint text' },
+      { value: 'Option 2', label: 'Option 2', hint: 'This is hint text' },
+      { value: 'Option 3', label: 'Option 3', hint: 'This is hint text' },
     ]}
   />
   <RadioGroup 
     label={<ComponentTitle>Large</ComponentTitle>} 
     size="large"
     radios={[
-      { value: 'Option 1', children: 'Option 1', hint: 'This is hint text' },
-      { value: 'Option 2', children: 'Option 2', hint: 'This is hint text' },
-      { value: 'Option 3', children: 'Option 3', hint: 'This is hint text' },
+      { value: 'Option 1', label: 'Option 1', hint: 'This is hint text' },
+      { value: 'Option 2', label: 'Option 2', hint: 'This is hint text' },
+      { value: 'Option 3', label: 'Option 3', hint: 'This is hint text' },
     ]}
   />
 </div>
diff --git a/apps/site/src/content/design-system/components/radio-group/design/radios-with-reveal/content.mdoc b/apps/site/src/content/design-system/components/radio-group/design/radios-with-reveal/content.mdoc
index b57f1c9ae..c36e87cdd 100644
--- a/apps/site/src/content/design-system/components/radio-group/design/radios-with-reveal/content.mdoc
+++ b/apps/site/src/content/design-system/components/radio-group/design/radios-with-reveal/content.mdoc
@@ -12,9 +12,9 @@ The radio component has the ability to hide a configurable portion of the option
     size="medium" 
     showAmount={1}
     radios={[
-      { value: 'Option 1', children: 'Option 1' },
-      { value: 'Option 2', children: 'Option 2' },
-      { value: 'Option 3', children: 'Option 3' },
+      { value: 'Option 1', label: 'Option 1' },
+      { value: 'Option 2', label: 'Option 2' },
+      { value: 'Option 3', label: 'Option 3' },
     ]}
   />
   <RadioGroup 
@@ -22,9 +22,9 @@ The radio component has the ability to hide a configurable portion of the option
     size="large" 
     showAmount={1}
     radios={[
-      { value: 'Option 1', children: 'Option 1' },
-      { value: 'Option 2', children: 'Option 2' },
-      { value: 'Option 3', children: 'Option 3' },
+      { value: 'Option 1', label: 'Option 1' },
+      { value: 'Option 2', label: 'Option 2' },
+      { value: 'Option 3', label: 'Option 3' },
     ]}
   />
 </div>
diff --git a/apps/site/src/content/design-system/content/guidelines/error-message/design/displaying-error-messages/content.mdoc b/apps/site/src/content/design-system/content/guidelines/error-message/design/displaying-error-messages/content.mdoc
index 875090f45..61c1c35f7 100644
--- a/apps/site/src/content/design-system/content/guidelines/error-message/design/displaying-error-messages/content.mdoc
+++ b/apps/site/src/content/design-system/content/guidelines/error-message/design/displaying-error-messages/content.mdoc
@@ -27,9 +27,9 @@ There are some instances where the red keyline is not used, such as radio button
         <CheckboxGroup 
           orientation="vertical"
           checkboxes={[
-            { value: "Option 1", children: "Option 1" },
-            { value: "Option 2", children: "Option 2" },
-            { value: "Option 3", children: "Option 3" },
+            { value: "Option 1", label: "Option 1" },
+            { value: "Option 2", label: "Option 2" },
+            { value: "Option 3", label: "Option 3" },
           ]}
         />
       </Field>
@@ -45,9 +45,9 @@ There are some instances where the red keyline is not used, such as radio button
         <CheckboxGroup 
           orientation="vertical"
           checkboxes={[
-            { value: "Option 1", children: "Option 1" },
-            { value: "Option 2", children: "Option 2" },
-            { value: "Option 3", children: "Option 3" },
+            { value: "Option 1", label: "Option 1" },
+            { value: "Option 2", label: "Option 2" },
+            { value: "Option 3", label: "Option 3" },
           ]}
         />
       </Field>
diff --git a/apps/site/src/content/design-system/patterns/addresses/auto-address/design/auto-address/content.mdoc b/apps/site/src/content/design-system/patterns/addresses/auto-address/design/auto-address/content.mdoc
index 81686ed98..497fe1e2f 100644
--- a/apps/site/src/content/design-system/patterns/addresses/auto-address/design/auto-address/content.mdoc
+++ b/apps/site/src/content/design-system/patterns/addresses/auto-address/design/auto-address/content.mdoc
@@ -29,8 +29,8 @@ To capture a different mailing address, use a text label with a button group to
             value={hasDifferentMailingAddress} 
             onChange={value => setHasDifferentMailingAddress(value)}
             buttons={[
-              { value: 'yes', children: "Yes" }, 
-              { value: 'no', children: "No" }
+              { value: 'yes', label: "Yes" }, 
+              { value: 'no', label: "No" }
             ]}
           />
         </Field>
diff --git a/apps/site/src/content/design-system/patterns/addresses/manual-address/design/error-states/content.mdoc b/apps/site/src/content/design-system/patterns/addresses/manual-address/design/error-states/content.mdoc
index a83afbe63..26d884972 100644
--- a/apps/site/src/content/design-system/patterns/addresses/manual-address/design/error-states/content.mdoc
+++ b/apps/site/src/content/design-system/patterns/addresses/manual-address/design/error-states/content.mdoc
@@ -13,8 +13,8 @@ The error message should always sit above the input field to give context. The e
             value={hasDifferentMailingAddress} 
             onChange={value => setHasDifferentMailingAddress(value)}
             buttons={[
-              { value: 'yes', children: "Yes" }, 
-              { value: 'no', children: "No" }
+              { value: 'yes', label: "Yes" }, 
+              { value: 'no', label: "No" }
             ]}
           />
         </Field>
diff --git a/apps/site/src/content/design-system/patterns/addresses/manual-address/design/manual-address/content.mdoc b/apps/site/src/content/design-system/patterns/addresses/manual-address/design/manual-address/content.mdoc
index 619ce03d5..b1ffb9a92 100644
--- a/apps/site/src/content/design-system/patterns/addresses/manual-address/design/manual-address/content.mdoc
+++ b/apps/site/src/content/design-system/patterns/addresses/manual-address/design/manual-address/content.mdoc
@@ -27,8 +27,8 @@ To capture a different mailing address, use a text label with a button group to
             value={hasDifferentMailingAddress}
             onChange={value => setHasDifferentMailingAddress(value)}
             buttons={[
-              { value: 'yes', children: "Yes" }, 
-              { value: 'no', children: "No" }
+              { value: 'yes', label: "Yes" }, 
+              { value: 'no', label: "No" }
             ]}
           />
         </Field>
diff --git a/apps/site/src/content/design-system/patterns/personal-details/name/design/full-name/content.mdoc b/apps/site/src/content/design-system/patterns/personal-details/name/design/full-name/content.mdoc
index fa01545ee..201ffe2d9 100644
--- a/apps/site/src/content/design-system/patterns/personal-details/name/design/full-name/content.mdoc
+++ b/apps/site/src/content/design-system/patterns/personal-details/name/design/full-name/content.mdoc
@@ -83,8 +83,8 @@ This example shows the base pattern used with additional questions when further
             value={differentName} 
             look="hero"
             buttons={[
-              { value: "yes", children: "Yes" }, 
-              { value: "no", children: "No" }
+              { value: "yes", label: "Yes" }, 
+              { value: "no", label: "No" }
             ]}
           />
         </Field>
diff --git a/packages/ui/src/components/button-group/button-group.spec.tsx b/packages/ui/src/components/button-group/button-group.spec.tsx
index ce942cfa5..d51a45854 100644
--- a/packages/ui/src/components/button-group/button-group.spec.tsx
+++ b/packages/ui/src/components/button-group/button-group.spec.tsx
@@ -11,15 +11,15 @@ describe('ButtonGroup', () => {
         buttons={[
           {
             value: 'Option 1',
-            children: 'Option 1',
+            label: 'Option 1',
           },
           {
             value: 'Option 2',
-            children: 'Option 2',
+            label: 'Option 2',
           },
           {
             value: 'Option 3',
-            children: 'Option 3',
+            label: 'Option 3',
           },
         ]}
       />,
@@ -27,22 +27,22 @@ describe('ButtonGroup', () => {
     expect(container).toBeInTheDocument();
   });
 
-  it('should render buttons when passed as children', () => {
+  it('should render buttons when passed as in buttons prop', () => {
     const { getByText } = render(
       <ButtonGroup
         label="test"
         buttons={[
           {
             value: 'Option 1',
-            children: 'Option 1',
+            label: 'Option 1',
           },
           {
             value: 'Option 2',
-            children: 'Option 2',
+            label: 'Option 2',
           },
           {
             value: 'Option 3',
-            children: 'Option 3',
+            label: 'Option 3',
           },
         ]}
       />,
@@ -60,15 +60,15 @@ describe('ButtonGroup', () => {
         buttons={[
           {
             value: 'Option 1',
-            children: 'Option 1',
+            label: 'Option 1',
           },
           {
             value: 'Option 2',
-            children: 'Option 2',
+            label: 'Option 2',
           },
           {
             value: 'Option 3',
-            children: 'Option 3',
+            label: 'Option 3',
           },
         ]}
       />,
@@ -90,15 +90,15 @@ describe('ButtonGroup', () => {
         buttons={[
           {
             value: 'Option 1',
-            children: 'Option 1',
+            label: 'Option 1',
           },
           {
             value: 'Option 2',
-            children: 'Option 2',
+            label: 'Option 2',
           },
           {
             value: 'Option 3',
-            children: 'Option 3',
+            label: 'Option 3',
           },
         ]}
       />,
@@ -116,15 +116,15 @@ describe('ButtonGroup', () => {
         buttons={[
           {
             value: 'Option 1',
-            children: 'Option 1',
+            label: 'Option 1',
           },
           {
             value: 'Option 2',
-            children: 'Option 2',
+            label: 'Option 2',
           },
           {
             value: 'Option 3',
-            children: 'Option 3',
+            label: 'Option 3',
           },
         ]}
       />,
diff --git a/packages/ui/src/components/button-group/button-group.stories.tsx b/packages/ui/src/components/button-group/button-group.stories.tsx
index bc60228df..7b96f3960 100644
--- a/packages/ui/src/components/button-group/button-group.stories.tsx
+++ b/packages/ui/src/components/button-group/button-group.stories.tsx
@@ -41,15 +41,15 @@ export const Default: Story = {
     buttons: [
       {
         value: 'Option 1',
-        children: 'Option 1',
+        label: 'Option 1',
       },
       {
         value: 'Option 2',
-        children: 'Option 2',
+        label: 'Option 2',
       },
       {
         value: 'Option 3',
-        children: 'Option 3',
+        label: 'Option 3',
       },
     ],
   },
@@ -67,15 +67,15 @@ export const Colors = () => (
         buttons={[
           {
             value: 'Option 1',
-            children: 'Option 1',
+            label: 'Option 1',
           },
           {
             value: 'Option 2',
-            children: 'Option 2',
+            label: 'Option 2',
           },
           {
             value: 'Option 3',
-            children: 'Option 3',
+            label: 'Option 3',
           },
         ]}
       />
@@ -95,15 +95,15 @@ export const Sizes = () => (
         buttons={[
           {
             value: 'Option 1',
-            children: 'Option 1',
+            label: 'Option 1',
           },
           {
             value: 'Option 2',
-            children: 'Option 2',
+            label: 'Option 2',
           },
           {
             value: 'Option 3',
-            children: 'Option 3',
+            label: 'Option 3',
           },
         ]}
       />
@@ -119,15 +119,15 @@ export const ResponsiveSize: Story = {
     buttons: [
       {
         value: 'Option 1',
-        children: 'Option 1',
+        label: 'Option 1',
       },
       {
         value: 'Option 2',
-        children: 'Option 2',
+        label: 'Option 2',
       },
       {
         value: 'Option 3',
-        children: 'Option 3',
+        label: 'Option 3',
       },
     ],
     size: {
@@ -151,15 +151,15 @@ export const Block = () => (
         buttons={[
           {
             value: 'Option 1',
-            children: 'Option 1',
+            label: 'Option 1',
           },
           {
             value: 'Option 2',
-            children: 'Option 2',
+            label: 'Option 2',
           },
           {
             value: 'Option 3',
-            children: 'Option 3',
+            label: 'Option 3',
           },
         ]}
       />
@@ -175,15 +175,15 @@ export const Disabled: Story = {
     buttons: [
       {
         value: 'Option 1',
-        children: 'Option 1',
+        label: 'Option 1',
       },
       {
         value: 'Option 2',
-        children: 'Option 2',
+        label: 'Option 2',
       },
       {
         value: 'Option 3',
-        children: 'Option 3',
+        label: 'Option 3',
       },
     ],
     isDisabled: true,
@@ -202,15 +202,15 @@ export const ErrorMessageAndLabel: Story = {
     buttons: [
       {
         value: 'Option 1',
-        children: 'Option 1',
+        label: 'Option 1',
       },
       {
         value: 'Option 2',
-        children: 'Option 2',
+        label: 'Option 2',
       },
       {
         value: 'Option 3',
-        children: 'Option 3',
+        label: 'Option 3',
       },
     ],
   },
diff --git a/packages/ui/src/components/button-group/components/button-group-button/button-group-button.component.tsx b/packages/ui/src/components/button-group/components/button-group-button/button-group-button.component.tsx
index 6d03410a0..bd8f7b67c 100644
--- a/packages/ui/src/components/button-group/components/button-group-button/button-group-button.component.tsx
+++ b/packages/ui/src/components/button-group/components/button-group-button/button-group-button.component.tsx
@@ -9,11 +9,11 @@ import { ButtonGroupContext } from '../../button-group.component.js';
 import { styles as buttonStyles } from './button-group-button.styles.js';
 import { type ButtonGroupButtonProps } from './button-group-button.types.js';
 
-export function ButtonGroupButton({ className, children, ...props }: ButtonGroupButtonProps) {
+export function ButtonGroupButton({ className, label, ...props }: ButtonGroupButtonProps) {
   const state = useContext(ButtonGroupContext);
   const { size, look, block } = state;
   const ref = useRef(null);
-  const { inputProps, isSelected, isDisabled } = useRadio({ ...props, children }, state, ref);
+  const { inputProps, isSelected, isDisabled } = useRadio({ ...props, children: label }, state, ref);
   const { isFocusVisible, focusProps } = useFocusRing();
   const styles = buttonStyles({ block, isDisabled, isFocusVisible });
 
@@ -31,7 +31,7 @@ export function ButtonGroupButton({ className, children, ...props }: ButtonGroup
         size={size}
         className={styles.button()}
       >
-        {children}
+        {label}
       </GELButton>
     </label>
   );
diff --git a/packages/ui/src/components/button-group/components/button-group-button/button-group-button.spec.tsx b/packages/ui/src/components/button-group/components/button-group-button/button-group-button.spec.tsx
index 86c716029..82dea16e7 100644
--- a/packages/ui/src/components/button-group/components/button-group-button/button-group-button.spec.tsx
+++ b/packages/ui/src/components/button-group/components/button-group-button/button-group-button.spec.tsx
@@ -5,7 +5,7 @@ import { styles } from './button-group-button.styles.js';
 
 describe('ButtonGroupButton', () => {
   it('renders the component', () => {
-    const { container } = render(<ButtonGroupButton value="Option 1">Test</ButtonGroupButton>);
+    const { container } = render(<ButtonGroupButton value="Option 1" label="Option 1" />);
     expect(container).toBeInTheDocument();
   });
 
diff --git a/packages/ui/src/components/button-group/components/button-group-button/button-group-button.types.ts b/packages/ui/src/components/button-group/components/button-group-button/button-group-button.types.ts
index ea01ee07a..8b43066f8 100644
--- a/packages/ui/src/components/button-group/components/button-group-button/button-group-button.types.ts
+++ b/packages/ui/src/components/button-group/components/button-group-button/button-group-button.types.ts
@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { AriaRadioProps } from 'react-aria';
 
 export type ButtonGroupButtonProps = {
@@ -5,4 +6,8 @@ export type ButtonGroupButtonProps = {
    * `string` for overriding base style
    */
   className?: string;
-} & AriaRadioProps;
+  /**
+   * Label to render
+   */
+  label: ReactNode;
+} & Omit<AriaRadioProps, 'children'>;
diff --git a/packages/ui/src/components/checkbox-group/checkbox-group.spec.tsx b/packages/ui/src/components/checkbox-group/checkbox-group.spec.tsx
index 0cdf4cde4..3bafedd31 100644
--- a/packages/ui/src/components/checkbox-group/checkbox-group.spec.tsx
+++ b/packages/ui/src/components/checkbox-group/checkbox-group.spec.tsx
@@ -9,21 +9,21 @@ describe('CheckboxGroup', () => {
       <CheckboxGroup
         label="test"
         checkboxes={[
-          { value: 'Option 1', children: 'Option 1' },
-          { value: 'Option 2', children: 'Option 2' },
+          { value: 'Option 1', label: 'Option 1' },
+          { value: 'Option 2', label: 'Option 2' },
         ]}
       />,
     );
     expect(container).toBeInTheDocument();
   });
 
-  it('should render Options when passed as children', () => {
+  it('should render Options when passed in through checkboxes prop', () => {
     const { getByText } = render(
       <CheckboxGroup
         label="test"
         checkboxes={[
-          { value: 'Option 1', children: 'Option 1' },
-          { value: 'Option 2', children: 'Option 2' },
+          { value: 'Option 1', label: 'Option 1' },
+          { value: 'Option 2', label: 'Option 2' },
         ]}
       />,
     );
@@ -39,9 +39,9 @@ describe('CheckboxGroup', () => {
         showAmount={1}
         label="test"
         checkboxes={[
-          { value: 'Option 1', children: 'Option 1' },
-          { value: 'Option 2', children: 'Option 2' },
-          { value: 'Option 3', children: 'Option 3' },
+          { value: 'Option 1', label: 'Option 1' },
+          { value: 'Option 2', label: 'Option 2' },
+          { value: 'Option 3', label: 'Option 3' },
         ]}
       />,
     );
@@ -60,8 +60,8 @@ describe('CheckboxGroup', () => {
         showAmount={1}
         label="test"
         checkboxes={[
-          { value: 'Option 1', children: 'Option 1' },
-          { value: 'Option 2', children: 'Option 2' },
+          { value: 'Option 1', label: 'Option 1' },
+          { value: 'Option 2', label: 'Option 2' },
         ]}
       />,
     );
@@ -79,8 +79,8 @@ describe('CheckboxGroup', () => {
         onChange={onChange}
         label="test"
         checkboxes={[
-          { value: 'Option 1', children: 'Option 1' },
-          { value: 'Option 2', children: 'Option 2' },
+          { value: 'Option 1', label: 'Option 1' },
+          { value: 'Option 2', label: 'Option 2' },
         ]}
       />,
     );
@@ -97,9 +97,9 @@ describe('CheckboxGroup', () => {
         onChange={onChange}
         label="test"
         checkboxes={[
-          { value: 'Option 1', children: 'Option 1' },
-          { value: 'Option 2', children: 'Option 2' },
-          { value: 'Option 3', children: 'Option 3' },
+          { value: 'Option 1', label: 'Option 1' },
+          { value: 'Option 2', label: 'Option 2' },
+          { value: 'Option 3', label: 'Option 3' },
         ]}
       />,
     );
diff --git a/packages/ui/src/components/checkbox-group/checkbox-group.stories.tsx b/packages/ui/src/components/checkbox-group/checkbox-group.stories.tsx
index bb7f0a37b..040b6c11d 100644
--- a/packages/ui/src/components/checkbox-group/checkbox-group.stories.tsx
+++ b/packages/ui/src/components/checkbox-group/checkbox-group.stories.tsx
@@ -43,9 +43,9 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     checkboxes: [
-      { value: 'Option 1', children: 'Option 1' },
-      { value: 'Option 2', children: 'Option 2' },
-      { value: 'Option 3', children: 'Option 3' },
+      { value: 'Option 1', label: 'Option 1' },
+      { value: 'Option 2', label: 'Option 2' },
+      { value: 'Option 3', label: 'Option 3' },
     ],
   },
 };
@@ -56,11 +56,11 @@ export const Default: Story = {
 export const LongLines: Story = {
   args: {
     checkboxes: [
-      { value: 'Option 1', children: 'Option 1' },
-      { value: 'Option 2', children: 'Option 2' },
+      { value: 'Option 1', label: 'Option 1' },
+      { value: 'Option 2', label: 'Option 2' },
       {
         value: 'Option 3',
-        children:
+        label:
           'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et odit labore illo sint tempora magnam modi nesciunt consectetur vitae maiores itaque reiciendis sunt nisi ullam officiis, provident fugiat, esse iste adipisci repellat! Incidunt delectus, pariatur quaerat vitae aspernatur eveniet libero.',
       },
     ],
@@ -73,9 +73,9 @@ export const LongLines: Story = {
 export const DefaultValue: Story = {
   args: {
     checkboxes: [
-      { value: 'Option 1', children: 'Option 1' },
-      { value: 'Option 2', children: 'Option 2' },
-      { value: 'Option 3', children: 'Option 3' },
+      { value: 'Option 1', label: 'Option 1' },
+      { value: 'Option 2', label: 'Option 2' },
+      { value: 'Option 3', label: 'Option 3' },
     ],
     defaultValue: ['Option 1'],
   },
@@ -87,9 +87,9 @@ export const DefaultValue: Story = {
 export const Inline: Story = {
   args: {
     checkboxes: [
-      { value: 'Option 1', children: 'Option 1' },
-      { value: 'Option 2', children: 'Option 2' },
-      { value: 'Option 3', children: 'Option 3' },
+      { value: 'Option 1', label: 'Option 1' },
+      { value: 'Option 2', label: 'Option 2' },
+      { value: 'Option 3', label: 'Option 3' },
     ],
     orientation: 'horizontal',
   },
@@ -101,11 +101,11 @@ export const Inline: Story = {
 export const InlineLongLines: Story = {
   args: {
     checkboxes: [
-      { value: 'Option 1', children: 'Option 1' },
-      { value: 'Option 2', children: 'Option 2' },
+      { value: 'Option 1', label: 'Option 1' },
+      { value: 'Option 2', label: 'Option 2' },
       {
         value: 'Option 3',
-        children:
+        label:
           'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et odit labore illo sint tempora magnam modi nesciunt consectetur vitae maiores itaque reiciendis sunt nisi ullam officiis, provident fugiat, esse iste adipisci repellat! Incidunt delectus, pariatur quaerat vitae aspernatur eveniet libero.',
       },
     ],
@@ -119,9 +119,9 @@ export const InlineLongLines: Story = {
 export const Disabled: Story = {
   args: {
     checkboxes: [
-      { value: 'Option 1', children: 'Option 1' },
-      { value: 'Option 2', children: 'Option 2' },
-      { value: 'Option 3', children: 'Option 3' },
+      { value: 'Option 1', label: 'Option 1' },
+      { value: 'Option 2', label: 'Option 2' },
+      { value: 'Option 3', label: 'Option 3' },
     ],
     isDisabled: true,
     defaultValue: ['Option 1'],
@@ -134,9 +134,9 @@ export const Disabled: Story = {
 export const Large: Story = {
   args: {
     checkboxes: [
-      { value: 'Option 1', children: 'Option 1' },
-      { value: 'Option 2', children: 'Option 2' },
-      { value: 'Option 3', children: 'Option 3' },
+      { value: 'Option 1', label: 'Option 1' },
+      { value: 'Option 2', label: 'Option 2' },
+      { value: 'Option 3', label: 'Option 3' },
     ],
     size: 'large',
   },
@@ -148,9 +148,9 @@ export const Large: Story = {
 export const HiddenItems: Story = {
   args: {
     checkboxes: [
-      { value: 'Option 1', children: 'Option 1' },
-      { value: 'Option 2', children: 'Option 2' },
-      { value: 'Option 3', children: 'Option 3' },
+      { value: 'Option 1', label: 'Option 1' },
+      { value: 'Option 2', label: 'Option 2' },
+      { value: 'Option 3', label: 'Option 3' },
     ],
     showAmount: 1,
   },
@@ -162,9 +162,9 @@ export const HiddenItems: Story = {
 export const HintText: Story = {
   args: {
     checkboxes: [
-      { value: 'Option 1', children: 'Option 1', hint: 'This is hint text 1' },
-      { value: 'Option 2', children: 'Option 2', hint: 'This is hint text 2' },
-      { value: 'Option 3', children: 'Option 3', hint: 'This is hint text 3' },
+      { value: 'Option 1', label: 'Option 1', hint: 'This is hint text 1' },
+      { value: 'Option 2', label: 'Option 2', hint: 'This is hint text 2' },
+      { value: 'Option 3', label: 'Option 3', hint: 'This is hint text 3' },
     ],
   },
 };
@@ -175,9 +175,9 @@ export const HintText: Story = {
 export const OnChange: Story = {
   args: {
     checkboxes: [
-      { value: 'Option 1', children: 'Option 1', hint: 'This is hint text 1' },
-      { value: 'Option 2', children: 'Option 2', hint: 'This is hint text 2' },
-      { value: 'Option 3', children: 'Option 3', hint: 'This is hint text 3' },
+      { value: 'Option 1', label: 'Option 1', hint: 'This is hint text 1' },
+      { value: 'Option 2', label: 'Option 2', hint: 'This is hint text 2' },
+      { value: 'Option 3', label: 'Option 3', hint: 'This is hint text 3' },
     ],
     onChange: e => console.log(e),
   },
@@ -193,9 +193,9 @@ export const ErrorMessageAndLabel: Story = {
     validationState: 'invalid',
     hintMessage: 'Hint: choose from one of the following options',
     checkboxes: [
-      { value: 'Option 1', children: 'Option 1' },
-      { value: 'Option 2', children: 'Option 2' },
-      { value: 'Option 3', children: 'Option 3' },
+      { value: 'Option 1', label: 'Option 1' },
+      { value: 'Option 2', label: 'Option 2' },
+      { value: 'Option 3', label: 'Option 3' },
     ],
   },
 };
diff --git a/packages/ui/src/components/checkbox-group/components/checkbox-group-checkbox/checkbox-group-checkbox.component.tsx b/packages/ui/src/components/checkbox-group/components/checkbox-group-checkbox/checkbox-group-checkbox.component.tsx
index 467a39c3d..e8affb1f4 100644
--- a/packages/ui/src/components/checkbox-group/components/checkbox-group-checkbox/checkbox-group-checkbox.component.tsx
+++ b/packages/ui/src/components/checkbox-group/components/checkbox-group-checkbox/checkbox-group-checkbox.component.tsx
@@ -31,11 +31,15 @@ function CheckIcon({ copyrightYear = '2023', size, ...props }: IconProps) {
   );
 }
 
-function BaseCheckbox({ className, hint, children, value, ...props }: CheckboxGroupCheckboxProps, ref: any) {
+function BaseCheckbox({ className, hint, label, value, ...props }: CheckboxGroupCheckboxProps, ref: any) {
   const state = useContext(CheckboxGroupContext);
   const { size, orientation } = state;
   const localRef = useRef(null);
-  const { inputProps, isDisabled, isSelected } = useCheckboxGroupItem({ ...props, value, children }, state, localRef);
+  const { inputProps, isDisabled, isSelected } = useCheckboxGroupItem(
+    { ...props, value, children: label },
+    state,
+    localRef,
+  );
   const { isFocusVisible, focusProps } = useFocusRing();
   const styles = checkboxItemStyles({ isDisabled, size, orientation, isFocusVisible });
 
@@ -48,7 +52,7 @@ function BaseCheckbox({ className, hint, children, value, ...props }: CheckboxGr
         {isSelected && <CheckIcon className={styles.checkIcon()} size={size} color={isDisabled ? 'border' : 'hero'} />}
       </div>
       <div className={styles.textWrapper()}>
-        <span className={styles.labelText()}>{children}</span>
+        <span className={styles.labelText()}>{label}</span>
         {hint && <span className={styles.hintText()}>{hint}</span>}
       </div>
     </label>
diff --git a/packages/ui/src/components/checkbox-group/components/checkbox-group-checkbox/checkbox-group-checkbox.spec.tsx b/packages/ui/src/components/checkbox-group/components/checkbox-group-checkbox/checkbox-group-checkbox.spec.tsx
index 27bb4c02e..3bc153943 100644
--- a/packages/ui/src/components/checkbox-group/components/checkbox-group-checkbox/checkbox-group-checkbox.spec.tsx
+++ b/packages/ui/src/components/checkbox-group/components/checkbox-group-checkbox/checkbox-group-checkbox.spec.tsx
@@ -7,7 +7,7 @@ import { CheckboxGroupCheckboxProps } from './checkbox-group-checkbox.types.js';
 describe('Checkbox', () => {
   const defaultProps: CheckboxGroupCheckboxProps = {
     value: 'Option 1',
-    children: 'Option 1',
+    label: 'Option 1',
   };
 
   it('renders the component', () => {
diff --git a/packages/ui/src/components/checkbox-group/components/checkbox-group-checkbox/checkbox-group-checkbox.stories.tsx b/packages/ui/src/components/checkbox-group/components/checkbox-group-checkbox/checkbox-group-checkbox.stories.tsx
index 529ce0ac5..38bbe80cf 100644
--- a/packages/ui/src/components/checkbox-group/components/checkbox-group-checkbox/checkbox-group-checkbox.stories.tsx
+++ b/packages/ui/src/components/checkbox-group/components/checkbox-group-checkbox/checkbox-group-checkbox.stories.tsx
@@ -28,19 +28,19 @@ type Story = StoryObj<typeof meta>;
  * > Base Checkbox Item, unchecked as that is handled by Checkbox
  */
 export const Default: Story = {
-  args: { children: 'Option 1', value: 'Option 1' },
+  args: { label: 'Option 1', value: 'Option 1' },
 };
 
 /**
  * > Checkbox Item with hint example
  */
 export const HintText: Story = {
-  args: { children: 'Option 1', value: 'Option 1', hint: 'Test hint' },
+  args: { label: 'Option 1', value: 'Option 1', hint: 'Test hint' },
 };
 
 /**
  * > Disabled Checkbox Item example
  */
 export const Disabled: Story = {
-  args: { children: 'Option 1', value: 'Option 1', isDisabled: true },
+  args: { label: 'Option 1', value: 'Option 1', isDisabled: true },
 };
diff --git a/packages/ui/src/components/checkbox-group/components/checkbox-group-checkbox/checkbox-group-checkbox.types.ts b/packages/ui/src/components/checkbox-group/components/checkbox-group-checkbox/checkbox-group-checkbox.types.ts
index e39a0c94d..c25d089df 100644
--- a/packages/ui/src/components/checkbox-group/components/checkbox-group-checkbox/checkbox-group-checkbox.types.ts
+++ b/packages/ui/src/components/checkbox-group/components/checkbox-group-checkbox/checkbox-group-checkbox.types.ts
@@ -10,4 +10,8 @@ export type CheckboxGroupCheckboxProps = {
    * Renders hint under option, most likely a `string` but could be something else
    */
   hint?: ReactNode;
-} & Omit<AriaCheckboxGroupItemProps, 'isIndeterminate'>;
+  /**
+   * Label to render
+   */
+  label: ReactNode;
+} & Omit<AriaCheckboxGroupItemProps, 'isIndeterminate' | 'children'>;
diff --git a/packages/ui/src/components/radio-group/components/radio-group-radio/radio-group-radio.component.tsx b/packages/ui/src/components/radio-group/components/radio-group-radio/radio-group-radio.component.tsx
index 03d199fce..a1931bb53 100644
--- a/packages/ui/src/components/radio-group/components/radio-group-radio/radio-group-radio.component.tsx
+++ b/packages/ui/src/components/radio-group/components/radio-group-radio/radio-group-radio.component.tsx
@@ -8,11 +8,11 @@ import { RadioGroupContext } from '../../radio-group.component.js';
 import { styles as radioStyles } from './radio-group-radio.styles.js';
 import { type RadioGroupRadioProps } from './radio-group-radio.types.js';
 
-function BaseRadioGroupRadio({ className, hint, children, ...props }: RadioGroupRadioProps, ref: any) {
+function BaseRadioGroupRadio({ className, hint, label, ...props }: RadioGroupRadioProps, ref: any) {
   const state = useContext(RadioGroupContext);
   const { size, orientation } = state;
   const localRef = useRef(null);
-  const { inputProps, isSelected, isDisabled } = useRadio({ ...props, children }, state, localRef);
+  const { inputProps, isSelected, isDisabled } = useRadio({ ...props, children: label }, state, localRef);
   const { isFocusVisible, focusProps } = useFocusRing();
   const styles = radioStyles({ isDisabled, isSelected, isFocusVisible, size, orientation });
 
@@ -23,7 +23,7 @@ function BaseRadioGroupRadio({ className, hint, children, ...props }: RadioGroup
       </VisuallyHidden>
       <div className={styles.selector()} />
       <div className={styles.textWrapper()}>
-        <span className={styles.labelText()}>{children}</span>
+        <span className={styles.labelText()}>{label}</span>
         {hint && <span className={styles.hintText()}>{hint}</span>}
       </div>
     </label>
diff --git a/packages/ui/src/components/radio-group/components/radio-group-radio/radio-group-radio.spec.tsx b/packages/ui/src/components/radio-group/components/radio-group-radio/radio-group-radio.spec.tsx
index 0ae377b12..4d67999ae 100644
--- a/packages/ui/src/components/radio-group/components/radio-group-radio/radio-group-radio.spec.tsx
+++ b/packages/ui/src/components/radio-group/components/radio-group-radio/radio-group-radio.spec.tsx
@@ -7,7 +7,7 @@ import { RadioGroupRadioProps } from './radio-group-radio.types.js';
 describe('Radio', () => {
   const defaultProps: RadioGroupRadioProps = {
     value: 'Option 1',
-    children: 'Option 1',
+    label: 'Option 1',
   };
 
   it('renders the component', () => {
diff --git a/packages/ui/src/components/radio-group/components/radio-group-radio/radio-group-radio.stories.tsx b/packages/ui/src/components/radio-group/components/radio-group-radio/radio-group-radio.stories.tsx
index 968e2b780..d5bb9a18f 100644
--- a/packages/ui/src/components/radio-group/components/radio-group-radio/radio-group-radio.stories.tsx
+++ b/packages/ui/src/components/radio-group/components/radio-group-radio/radio-group-radio.stories.tsx
@@ -22,19 +22,19 @@ type Story = StoryObj<typeof meta>;
  * > Base radio, unchecked as that is handled by RadioGroup
  */
 export const Default: Story = {
-  args: { children: 'Option 1', value: 'Option 1' },
+  args: { label: 'Option 1', value: 'Option 1' },
 };
 
 /**
  * > Radio with hint example
  */
 export const Hint: Story = {
-  args: { children: 'Option 1', value: 'Option 1', hint: 'Test hint' },
+  args: { label: 'Option 1', value: 'Option 1', hint: 'Test hint' },
 };
 
 /**
  * > Disabled Radio example
  */
 export const Disabled: Story = {
-  args: { children: 'Option 1', value: 'Option 1', isDisabled: true },
+  args: { label: 'Option 1', value: 'Option 1', isDisabled: true },
 };
diff --git a/packages/ui/src/components/radio-group/components/radio-group-radio/radio-group-radio.types.ts b/packages/ui/src/components/radio-group/components/radio-group-radio/radio-group-radio.types.ts
index 5911083cf..cb128f7c4 100644
--- a/packages/ui/src/components/radio-group/components/radio-group-radio/radio-group-radio.types.ts
+++ b/packages/ui/src/components/radio-group/components/radio-group-radio/radio-group-radio.types.ts
@@ -10,4 +10,8 @@ export type RadioGroupRadioProps = {
    * Renders hint under radio, most likely a `string` but could be something else
    */
   hint?: ReactNode;
-} & AriaRadioProps;
+  /**
+   * Label to render
+   */
+  label: ReactNode;
+} & Omit<AriaRadioProps, 'children'>;
diff --git a/packages/ui/src/components/radio-group/radio-group.spec.tsx b/packages/ui/src/components/radio-group/radio-group.spec.tsx
index 9d2efd2ee..3e1660bc0 100644
--- a/packages/ui/src/components/radio-group/radio-group.spec.tsx
+++ b/packages/ui/src/components/radio-group/radio-group.spec.tsx
@@ -9,21 +9,21 @@ describe('RadioGroup', () => {
       <RadioGroup
         label="test"
         radios={[
-          { value: 'Option 1', children: 'Option 1' },
-          { value: 'Option 2', children: 'Option 2' },
+          { value: 'Option 1', label: 'Option 1' },
+          { value: 'Option 2', label: 'Option 2' },
         ]}
       />,
     );
     expect(container).toBeInTheDocument();
   });
 
-  it('should render Radios when passed as children', () => {
+  it('should render Radios when passed in through radios prop', () => {
     const { getByText } = render(
       <RadioGroup
         label="test"
         radios={[
-          { value: 'Option 1', children: 'Option 1' },
-          { value: 'Option 2', children: 'Option 2' },
+          { value: 'Option 1', label: 'Option 1' },
+          { value: 'Option 2', label: 'Option 2' },
         ]}
       />,
     );
@@ -39,9 +39,9 @@ describe('RadioGroup', () => {
         showAmount={1}
         label="test"
         radios={[
-          { value: 'Option 1', children: 'Option 1' },
-          { value: 'Option 2', children: 'Option 2' },
-          { value: 'Option 3', children: 'Option 3' },
+          { value: 'Option 1', label: 'Option 1' },
+          { value: 'Option 2', label: 'Option 2' },
+          { value: 'Option 3', label: 'Option 3' },
         ]}
       />,
     );
@@ -60,8 +60,8 @@ describe('RadioGroup', () => {
         showAmount={1}
         label="test"
         radios={[
-          { value: 'Option 1', children: 'Option 1' },
-          { value: 'Option 2', children: 'Option 2' },
+          { value: 'Option 1', label: 'Option 1' },
+          { value: 'Option 2', label: 'Option 2' },
         ]}
       />,
     );
@@ -79,8 +79,8 @@ describe('RadioGroup', () => {
         onChange={onChange}
         label="test"
         radios={[
-          { value: 'Option 1', children: 'Option 1' },
-          { value: 'Option 2', children: 'Option 2' },
+          { value: 'Option 1', label: 'Option 1' },
+          { value: 'Option 2', label: 'Option 2' },
         ]}
       />,
     );
diff --git a/packages/ui/src/components/radio-group/radio-group.stories.tsx b/packages/ui/src/components/radio-group/radio-group.stories.tsx
index fe0340ce9..41bafdebd 100644
--- a/packages/ui/src/components/radio-group/radio-group.stories.tsx
+++ b/packages/ui/src/components/radio-group/radio-group.stories.tsx
@@ -37,9 +37,9 @@ type Story = StoryObj<typeof meta>;
 export const Default: Story = {
   args: {
     radios: [
-      { value: 'Option 1', children: 'Option 1' },
-      { value: 'Option 2', children: 'Option 2' },
-      { value: 'Option 3', children: 'Option 3' },
+      { value: 'Option 1', label: 'Option 1' },
+      { value: 'Option 2', label: 'Option 2' },
+      { value: 'Option 3', label: 'Option 3' },
     ],
   },
 };
@@ -50,11 +50,11 @@ export const Default: Story = {
 export const LongLines: Story = {
   args: {
     radios: [
-      { value: 'Option 1', children: 'Option 1' },
-      { value: 'Option 2', children: 'Option 2' },
+      { value: 'Option 1', label: 'Option 1' },
+      { value: 'Option 2', label: 'Option 2' },
       {
         value: 'Option 3',
-        children:
+        label:
           'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et odit labore illo sint tempora magnam modi nesciunt consectetur vitae maiores itaque reiciendis sunt nisi ullam officiis, provident fugiat, esse iste adipisci repellat! Incidunt delectus, pariatur quaerat vitae aspernatur eveniet libero.',
       },
     ],
@@ -67,9 +67,9 @@ export const LongLines: Story = {
 export const DefaultValue: Story = {
   args: {
     radios: [
-      { value: 'Option 1', children: 'Option 1' },
-      { value: 'Option 2', children: 'Option 2' },
-      { value: 'Option 3', children: 'Option 3' },
+      { value: 'Option 1', label: 'Option 1' },
+      { value: 'Option 2', label: 'Option 2' },
+      { value: 'Option 3', label: 'Option 3' },
     ],
     defaultValue: 'Option 1',
   },
@@ -81,9 +81,9 @@ export const DefaultValue: Story = {
 export const Inline: Story = {
   args: {
     radios: [
-      { value: 'Option 1', children: 'Option 1' },
-      { value: 'Option 2', children: 'Option 2' },
-      { value: 'Option 3', children: 'Option 3' },
+      { value: 'Option 1', label: 'Option 1' },
+      { value: 'Option 2', label: 'Option 2' },
+      { value: 'Option 3', label: 'Option 3' },
     ],
     orientation: 'horizontal',
   },
@@ -95,11 +95,11 @@ export const Inline: Story = {
 export const InlineLongLines: Story = {
   args: {
     radios: [
-      { value: 'Option 1', children: 'Option 1' },
-      { value: 'Option 2', children: 'Option 2' },
+      { value: 'Option 1', label: 'Option 1' },
+      { value: 'Option 2', label: 'Option 2' },
       {
         value: 'Option 3',
-        children:
+        label:
           'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et odit labore illo sint tempora magnam modi nesciunt consectetur vitae maiores itaque reiciendis sunt nisi ullam officiis, provident fugiat, esse iste adipisci repellat! Incidunt delectus, pariatur quaerat vitae aspernatur eveniet libero.',
       },
     ],
@@ -113,9 +113,9 @@ export const InlineLongLines: Story = {
 export const Disabled: Story = {
   args: {
     radios: [
-      { value: 'Option 1', children: 'Option 1' },
-      { value: 'Option 2', children: 'Option 2' },
-      { value: 'Option 3', children: 'Option 3' },
+      { value: 'Option 1', label: 'Option 1' },
+      { value: 'Option 2', label: 'Option 2' },
+      { value: 'Option 3', label: 'Option 3' },
     ],
     isDisabled: true,
   },
@@ -127,9 +127,9 @@ export const Disabled: Story = {
 export const Large: Story = {
   args: {
     radios: [
-      { value: 'Option 1', children: 'Option 1' },
-      { value: 'Option 2', children: 'Option 2' },
-      { value: 'Option 3', children: 'Option 3' },
+      { value: 'Option 1', label: 'Option 1' },
+      { value: 'Option 2', label: 'Option 2' },
+      { value: 'Option 3', label: 'Option 3' },
     ],
     size: 'large',
   },
@@ -141,9 +141,9 @@ export const Large: Story = {
 export const HiddenOptions: Story = {
   args: {
     radios: [
-      { value: 'Option 1', children: 'Option 1' },
-      { value: 'Option 2', children: 'Option 2' },
-      { value: 'Option 3', children: 'Option 3' },
+      { value: 'Option 1', label: 'Option 1' },
+      { value: 'Option 2', label: 'Option 2' },
+      { value: 'Option 3', label: 'Option 3' },
     ],
     showAmount: 1,
   },
@@ -155,9 +155,9 @@ export const HiddenOptions: Story = {
 export const HintText: Story = {
   args: {
     radios: [
-      { value: 'Option 1', children: 'Option 1', hint: 'This is hint text 1' },
-      { value: 'Option 2', children: 'Option 2', hint: 'This is hint text 2' },
-      { value: 'Option 3', children: 'Option 3', hint: 'This is hint text 3' },
+      { value: 'Option 1', label: 'Option 1', hint: 'This is hint text 1' },
+      { value: 'Option 2', label: 'Option 2', hint: 'This is hint text 2' },
+      { value: 'Option 3', label: 'Option 3', hint: 'This is hint text 3' },
     ],
   },
 };
@@ -168,9 +168,9 @@ export const HintText: Story = {
 export const OnChange: Story = {
   args: {
     radios: [
-      { value: 'Option 1', children: 'Option 1' },
-      { value: 'Option 2', children: 'Option 2' },
-      { value: 'Option 3', children: 'Option 3' },
+      { value: 'Option 1', label: 'Option 1' },
+      { value: 'Option 2', label: 'Option 2' },
+      { value: 'Option 3', label: 'Option 3' },
     ],
     onChange: e => console.log(e),
   },
@@ -186,9 +186,9 @@ export const ErrorMessageAndLabel: Story = {
     validationState: 'invalid',
     hintMessage: 'Hint: choose from one of the following options',
     radios: [
-      { value: 'Option 1', children: 'Option 1' },
-      { value: 'Option 2', children: 'Option 2' },
-      { value: 'Option 3', children: 'Option 3' },
+      { value: 'Option 1', label: 'Option 1' },
+      { value: 'Option 2', label: 'Option 2' },
+      { value: 'Option 3', label: 'Option 3' },
     ],
   },
 };