diff --git a/packages/storybook/src/react-components/form-field-radio-group/form-field-radio-group.stories.tsx b/packages/storybook/src/react-components/form-field-radio-group/form-field-radio-group.stories.tsx
index 1d4fdbfb..6beccab4 100644
--- a/packages/storybook/src/react-components/form-field-radio-group/form-field-radio-group.stories.tsx
+++ b/packages/storybook/src/react-components/form-field-radio-group/form-field-radio-group.stories.tsx
@@ -215,11 +215,11 @@ export const Visual = createVisualRegressionStory(() => (
   <div className="utrecht-document">
     <h4 className="utrecht-heading-3">Light</h4>
     <VisualRegressionWrapper className={`lux-theme--logius-light`}>
-      <VisualStates />
+      <VisualStates mode="light" />
     </VisualRegressionWrapper>
     <h4 className="utrecht-heading-3">Dark</h4>
     <VisualRegressionWrapper className={`lux-theme--logius-dark`}>
-      <VisualStates />
+      <VisualStates mode="dark" />
     </VisualRegressionWrapper>
   </div>
 ));
diff --git a/packages/storybook/src/react-components/form-field-radio-group/visual/States.tsx b/packages/storybook/src/react-components/form-field-radio-group/visual/States.tsx
index 6320ed3c..5faff29e 100644
--- a/packages/storybook/src/react-components/form-field-radio-group/visual/States.tsx
+++ b/packages/storybook/src/react-components/form-field-radio-group/visual/States.tsx
@@ -6,11 +6,11 @@ const options = [
   { value: '3', label: 'Radio Option 3' },
 ];
 
-export const VisualStates = () => (
+export const VisualStates = ({ mode }: { mode: 'light' | 'dark' }) => (
   <>
-    <LuxFormFieldRadioGroup name="radiogroup-default-light" label="Radio Group" options={options} />
+    <LuxFormFieldRadioGroup name={`radiogroup-default-${mode}`} label="Radio Group" options={options} />
     <LuxFormFieldRadioGroup
-      name="radiogroup-descriptions-light"
+      name={`radiogroup-descriptions-${mode}`}
       label="Radio Group"
       description="Description"
       options={options.map((option) =>
@@ -18,23 +18,23 @@ export const VisualStates = () => (
       )}
     />
     <div className="pseudo-hover-all">
-      <LuxFormFieldRadioGroup name="radiogroup-hover-light" label="Radio Group Hover" options={options} />
+      <LuxFormFieldRadioGroup name={`radiogroup-hover-${mode}`} label="Radio Group Hover" options={options} />
     </div>
     <div className="pseudo-focus-all pseudo-focus-visible-all">
-      <LuxFormFieldRadioGroup name="radiogroup-hover-light" label="Radio Group Focus" options={options} />
+      <LuxFormFieldRadioGroup name={`radiogroup-hover-${mode}`} label="Radio Group Focus" options={options} />
     </div>
     <LuxFormFieldRadioGroup
-      name="radiogroup-checked-light"
+      name={`radiogroup-checked-${mode}`}
       label="Radio Group Checked"
-      options={options.map((option) => Object.assign({}, { ...option }, { checked: option.value === 2 }))}
+      options={options.map((option) => Object.assign({}, { ...option }, { checked: option.value === '2' }))}
     />
     <LuxFormFieldRadioGroup
-      name="radiogroup-disabled-light"
+      name={`radiogroup-disabled-${mode}`}
       label="Radio Group Disabled"
-      options={options.map((option) => Object.assign({}, { ...option }, { disabled: option.value === 2 }))}
+      options={options.map((option) => Object.assign({}, { ...option }, { disabled: option.value === '2' }))}
     />
     <LuxFormFieldRadioGroup
-      name="radiogroup-invalid-light"
+      name={`radiogroup-invalid-${mode}`}
       label="Radio Group Invalid"
       errorMessage="Error Message"
       invalid