From 73e882ed631afe6d9bb41706b2f0dd81f12a162e Mon Sep 17 00:00:00 2001
From: Joan Perals Tresserra <jotresse@amazon.com>
Date: Fri, 7 Nov 2025 14:41:01 +0100
Subject: [PATCH] chore: Refactor radio button into internal component

---
 .../__snapshots__/documenter.test.ts.snap     |   4 +-
 .../test-utils-selectors.test.tsx.snap        |   4 +-
 .../components/radio-button/index.tsx}        |  36 ++---
 .../components/radio-button/interfaces.ts     | 143 ++++++++++++++++++
 .../components/radio-button/styles.scss       |  57 +++++++
 .../radio-button/test-classes/styles.scss     |   8 +
 src/radio-group/__integ__/radio-group.test.ts |   8 +-
 .../__tests__/radio-group.test.tsx            |   6 +-
 src/radio-group/interfaces.ts                 |  53 +------
 src/radio-group/internal.tsx                  |  23 ++-
 src/radio-group/styles.scss                   |  57 +------
 src/radio-group/test-classes/styles.scss      |   8 +
 src/table/selection/selection-control.tsx     |   4 +-
 src/test-utils/dom/radio-group/index.ts       |   5 +-
 .../dom/radio-group/radio-button.ts           |   4 +
 src/tiles/tile.tsx                            |   7 +-
 16 files changed, 276 insertions(+), 151 deletions(-)
 rename src/{radio-group/radio-button.tsx => internal/components/radio-button/index.tsx} (79%)
 create mode 100644 src/internal/components/radio-button/interfaces.ts
 create mode 100644 src/internal/components/radio-button/styles.scss
 create mode 100644 src/internal/components/radio-button/test-classes/styles.scss
 create mode 100644 src/radio-group/test-classes/styles.scss

diff --git a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
index fbbff76536..89d469dd23 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap
@@ -20111,7 +20111,7 @@ being included in a form submission. A read-only control is still focusable.",
     },
     {
       "inlineType": {
-        "name": "RadioGroupProps.Style",
+        "name": "RadioButtonProps.Style",
         "properties": [
           {
             "inlineType": {
@@ -20336,7 +20336,7 @@ being included in a form submission. A read-only control is still focusable.",
       "systemTags": [
         "core",
       ],
-      "type": "RadioGroupProps.Style",
+      "type": "RadioButtonProps.Style",
     },
     {
       "description": "Sets the value of the selected radio button.
diff --git a/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap b/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap
index 47986281f0..1f5a3b96d7 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/test-utils-selectors.test.tsx.snap
@@ -389,6 +389,7 @@ exports[`test-utils selectors 1`] = `
     "awsui_placeholder_18eso",
     "awsui_recovery_vrgzu",
     "awsui_root_11n0s",
+    "awsui_root_15oj2",
     "awsui_root_1fcus",
     "awsui_root_1kjc7",
     "awsui_root_1om0h",
@@ -514,8 +515,7 @@ exports[`test-utils selectors 1`] = `
     "awsui_token-editor-token-remove-actions_1heb1",
   ],
   "radio-group": [
-    "awsui_radio_1mabk",
-    "awsui_root_1mabk",
+    "awsui_root_1np5w",
   ],
   "s3-resource-selector": [
     "awsui_alert_1u0yw",
diff --git a/src/radio-group/radio-button.tsx b/src/internal/components/radio-button/index.tsx
similarity index 79%
rename from src/radio-group/radio-button.tsx
rename to src/internal/components/radio-button/index.tsx
index 99327a87be..31658cbd26 100644
--- a/src/radio-group/radio-button.tsx
+++ b/src/internal/components/radio-button/index.tsx
@@ -7,26 +7,20 @@ import { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';
 import { useSingleTabStopNavigation } from '@cloudscape-design/component-toolkit/internal';
 import { copyAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
 
-import AbstractSwitch from '../internal/components/abstract-switch';
-import { fireNonCancelableEvent, NonCancelableEventHandler } from '../internal/events';
-import { RadioGroupProps } from './interfaces';
-import { getAbstractSwitchStyles, getInnerCircleStyle, getOuterCircleStyle } from './style';
+import { getAbstractSwitchStyles, getInnerCircleStyle, getOuterCircleStyle } from '../../../radio-group/style';
+import { getBaseProps } from '../../base-component';
+import AbstractSwitch from '../../components/abstract-switch';
+import { fireNonCancelableEvent } from '../../events';
+import { InternalBaseComponentProps } from '../../hooks/use-base-component';
+import { RadioButtonProps } from './interfaces';
 
 import styles from './styles.css.js';
-
-interface RadioButtonProps extends RadioGroupProps.RadioButtonDefinition {
-  name: string;
-  checked: boolean;
-  onChange?: NonCancelableEventHandler<RadioGroupProps.ChangeDetail>;
-  readOnly?: boolean;
-  className?: string;
-  style?: RadioGroupProps.Style;
-}
+import testUtilStyles from './test-classes/styles.css.js';
 
 export default React.forwardRef(function RadioButton(
   {
     name,
-    label,
+    children,
     value,
     checked,
     description,
@@ -37,25 +31,28 @@ export default React.forwardRef(function RadioButton(
     className,
     style,
     ...rest
-  }: RadioButtonProps,
+  }: RadioButtonProps & InternalBaseComponentProps,
   ref: React.Ref<HTMLInputElement>
 ) {
   const radioButtonRef = useRef<HTMLInputElement>(null);
   const mergedRefs = useMergeRefs(radioButtonRef, ref);
 
   const { tabIndex } = useSingleTabStopNavigation(radioButtonRef);
+  const baseProps = getBaseProps(rest);
 
   return (
     <AbstractSwitch
-      className={clsx(styles.radio, description && styles['radio--has-description'], className)}
+      {...baseProps}
+      className={clsx(testUtilStyles.root, className)}
       controlClassName={styles['radio-control']}
       outlineClassName={styles.outline}
-      label={label}
+      label={children}
       description={description}
       disabled={disabled}
       readOnly={readOnly}
       controlId={controlId}
       style={getAbstractSwitchStyles(style, checked, disabled, readOnly)}
+      __internalRootRef={rest.__internalRootRef}
       {...copyAnalyticsMetadataAttribute(rest)}
       nativeControl={nativeControlProps => (
         <input
@@ -73,10 +70,7 @@ export default React.forwardRef(function RadioButton(
       )}
       onClick={() => {
         radioButtonRef.current?.focus();
-        if (checked) {
-          return;
-        }
-        fireNonCancelableEvent(onChange, { value });
+        fireNonCancelableEvent(onChange, { checked: !checked });
       }}
       styledControl={
         <svg viewBox="0 0 100 100" focusable="false" aria-hidden="true">
diff --git a/src/internal/components/radio-button/interfaces.ts b/src/internal/components/radio-button/interfaces.ts
new file mode 100644
index 0000000000..3b29d72a2c
--- /dev/null
+++ b/src/internal/components/radio-button/interfaces.ts
@@ -0,0 +1,143 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+
+import { BaseComponentProps } from '../../base-component';
+import { NonCancelableEventHandler } from '../../events';
+/**
+ * @awsuiSystem core
+ */
+import { NativeAttributes } from '../../utils/with-native-attributes';
+
+export interface RadioButtonProps extends BaseComponentProps {
+  /**
+   * Specifies if the component is selected.
+   */
+  checked: boolean;
+
+  /**
+   * Specifies the ID of the native form element. You can use it to relate
+   * a label element's `for` attribute to this control.
+   */
+  controlId?: string;
+
+  /**
+   * Name of the group that the radio button belongs to.
+   */
+  name: string;
+
+  /**
+   * Description that appears below the label.
+   */
+  description?: React.ReactNode;
+
+  /**
+   * Specifies if the control is disabled, which prevents the
+   * user from modifying the value and prevents the value from
+   * being included in a form submission. A disabled control can't
+   * receive focus.
+   */
+  disabled?: boolean;
+
+  /**
+   * The control's label that's displayed next to the radio button. A state change occurs when a user clicks on it.
+   * @displayname label
+   */
+  children?: React.ReactNode;
+
+  /**
+   * Attributes to add to the native `input` element.
+   * Some attributes will be automatically combined with internal attribute values:
+   * - `className` will be appended.
+   * - Event handlers will be chained, unless the default is prevented.
+   *
+   * We do not support using this attribute to apply custom styling.
+   *
+   * @awsuiSystem core
+   */
+  nativeInputAttributes?: NativeAttributes<React.InputHTMLAttributes<HTMLInputElement>>;
+
+  /**
+   * Called when the user changes the component state. The event `detail` contains the current value for the `checked` property.
+   */
+  onChange?: NonCancelableEventHandler<RadioButtonProps.ChangeDetail>;
+
+  /**
+   * Specifies if the radio button is read-only, which prevents the
+   * user from modifying the value, but does not prevent the value from
+   * being included in a form submission. A read-only control is still focusable.
+   *
+   * This property should be set for either all or none of the radio buttons in a group.
+   */
+  readOnly?: boolean;
+
+  /**
+   * @awsuiSystem core
+   */
+  style?: RadioButtonProps.Style;
+
+  /**
+   * Sets the value attribute to the native control.
+   * If using native form submission, this value is sent to the server if the radio button is checked.
+   * It is never shown to the user by their user agent.
+   * For more details, see the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/radio#value).
+   */
+  value?: string;
+}
+
+export namespace RadioButtonProps {
+  export interface ChangeDetail {
+    checked: boolean;
+  }
+
+  export interface Ref {
+    /**
+     * Sets input focus onto the UI control.
+     */
+    focus(): void;
+  }
+
+  export interface Style {
+    input?: {
+      fill?: {
+        checked?: string;
+        default?: string;
+        disabled?: string;
+        readOnly?: string;
+      };
+      stroke?: {
+        default?: string;
+        disabled?: string;
+        readOnly?: string;
+      };
+      circle?: {
+        fill?: {
+          checked?: string;
+          disabled?: string;
+          readOnly?: string;
+        };
+      };
+      focusRing?: {
+        borderColor?: string;
+        borderRadius?: string;
+        borderWidth?: string;
+      };
+    };
+    label?: {
+      color?: {
+        checked?: string;
+        default?: string;
+        disabled?: string;
+        readOnly?: string;
+      };
+    };
+    description?: {
+      color?: {
+        checked?: string;
+        default?: string;
+        disabled?: string;
+        readOnly?: string;
+      };
+    };
+  }
+}
diff --git a/src/internal/components/radio-button/styles.scss b/src/internal/components/radio-button/styles.scss
new file mode 100644
index 0000000000..f40700c53e
--- /dev/null
+++ b/src/internal/components/radio-button/styles.scss
@@ -0,0 +1,57 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+@use '../../styles' as styles;
+@use '../../styles/tokens' as awsui;
+@use '../../styles/foundation' as foundation;
+@use '../../generated/custom-css-properties/index.scss' as custom-props;
+
+$radio-size: awsui.$size-control;
+
+.radio-control {
+  @include styles.make-control-size($radio-size);
+}
+
+.outline {
+  #{custom-props.$styleFocusRingBoxShadow}: 0 0 0
+    var(#{custom-props.$styleFocusRingBorderWidth}, foundation.$box-shadow-focused-width)
+    var(#{custom-props.$styleFocusRingBorderColor}, awsui.$color-border-item-focused);
+
+  @include styles.focus-highlight(
+    $gutter: 2px,
+    $border-radius: var(#{custom-props.$styleFocusRingBorderRadius}, awsui.$border-radius-control-circular-focus-ring),
+    $box-shadow: var(#{custom-props.$styleFocusRingBoxShadow})
+  );
+}
+
+.styled-circle-border {
+  stroke: awsui.$color-border-control-default;
+  fill: awsui.$color-background-control-default;
+  &.styled-circle-disabled,
+  &.styled-circle-readonly {
+    fill: awsui.$color-background-control-disabled;
+    stroke: awsui.$color-background-control-disabled;
+  }
+}
+
+.styled-circle-fill {
+  stroke: awsui.$color-background-control-checked;
+  fill: awsui.$color-foreground-control-default;
+  opacity: 0;
+  @include styles.with-motion {
+    transition: opacity awsui.$motion-duration-transition-quick awsui.$motion-easing-transition-quick;
+  }
+  &.styled-circle-checked {
+    opacity: 1;
+  }
+  &.styled-circle-disabled {
+    fill: awsui.$color-foreground-control-disabled;
+    stroke: awsui.$color-background-control-disabled;
+  }
+  &.styled-circle-readonly {
+    fill: awsui.$color-foreground-control-read-only;
+    stroke: awsui.$color-background-control-disabled;
+  }
+}
diff --git a/src/internal/components/radio-button/test-classes/styles.scss b/src/internal/components/radio-button/test-classes/styles.scss
new file mode 100644
index 0000000000..97dd664325
--- /dev/null
+++ b/src/internal/components/radio-button/test-classes/styles.scss
@@ -0,0 +1,8 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+.root {
+  /*used in test-utils*/
+}
diff --git a/src/radio-group/__integ__/radio-group.test.ts b/src/radio-group/__integ__/radio-group.test.ts
index d10505dde6..37d37f7a37 100644
--- a/src/radio-group/__integ__/radio-group.test.ts
+++ b/src/radio-group/__integ__/radio-group.test.ts
@@ -5,7 +5,7 @@ import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
 
 import createWrapper, { RadioGroupWrapper } from '../../../lib/components/test-utils/selectors';
 
-import styles from '../../../lib/components/radio-group/styles.selectors.js';
+import radioButtonStyles from '../../../lib/components/internal/components/radio-button/styles.selectors.js';
 
 const radioGroupWrapper = createWrapper().findRadioGroup('#simple');
 
@@ -75,8 +75,8 @@ test(
 
     await page.click('[data-testid="1"]');
     await page.keys('Tab');
-    await expect((await browser.$(`.${styles.outline}`).getCSSProperty('box-shadow', '::before')).value).toBe(
-      'rgb(4,125,149)0px0px0px1px'
-    );
+    await expect(
+      (await browser.$(`.${radioButtonStyles.outline}`).getCSSProperty('box-shadow', '::before')).value
+    ).toBe('rgb(4,125,149)0px0px0px1px');
   })
 );
diff --git a/src/radio-group/__tests__/radio-group.test.tsx b/src/radio-group/__tests__/radio-group.test.tsx
index 14e707c30b..5867dda105 100644
--- a/src/radio-group/__tests__/radio-group.test.tsx
+++ b/src/radio-group/__tests__/radio-group.test.tsx
@@ -15,7 +15,7 @@ import RadioButtonWrapper from '../../../lib/components/test-utils/dom/radio-gro
 import customCssProps from '../../internal/generated/custom-css-properties';
 
 import abstractSwitchStyles from '../../../lib/components/internal/components/abstract-switch/styles.css.js';
-import styles from '../../../lib/components/radio-group/styles.selectors.js';
+import radioButtonStyles from '../../../lib/components/internal/components/radio-button/styles.selectors.js';
 
 const defaultItems: RadioGroupProps.RadioButtonDefinition[] = [
   { value: 'val1', label: 'Option one' },
@@ -434,8 +434,8 @@ test('all style api properties', function () {
     />
   );
 
-  const outerCircle = wrapper.findByClassName(styles['styled-circle-border'])!.getElement();
-  const innerCircle = wrapper.findByClassName(styles['styled-circle-fill'])!.getElement();
+  const outerCircle = wrapper.findByClassName(radioButtonStyles['styled-circle-border'])!.getElement();
+  const innerCircle = wrapper.findByClassName(radioButtonStyles['styled-circle-fill'])!.getElement();
   const label = wrapper.findByClassName(abstractSwitchStyles.label)!.getElement();
   const description = wrapper.findByClassName(abstractSwitchStyles.description)!.getElement();
   const control = wrapper.findByClassName(abstractSwitchStyles.control)!.getElement();
diff --git a/src/radio-group/interfaces.ts b/src/radio-group/interfaces.ts
index 2e255c2171..afdfe6ad3a 100644
--- a/src/radio-group/interfaces.ts
+++ b/src/radio-group/interfaces.ts
@@ -1,8 +1,8 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React from 'react';
 
 import { BaseComponentProps } from '../internal/base-component';
+import { RadioButtonProps } from '../internal/components/radio-button/interfaces';
 import { FormFieldControlProps } from '../internal/context/form-field-context';
 import { NonCancelableEventHandler } from '../internal/events';
 
@@ -83,54 +83,7 @@ export namespace RadioGroupProps {
     value: string;
   }
 
-  export interface Ref {
-    /**
-     * Sets input focus onto the UI control.
-     */
-    focus(): void;
-  }
+  export type Ref = RadioButtonProps.Ref;
 
-  export interface Style {
-    input?: {
-      fill?: {
-        checked?: string;
-        default?: string;
-        disabled?: string;
-        readOnly?: string;
-      };
-      stroke?: {
-        default?: string;
-        disabled?: string;
-        readOnly?: string;
-      };
-      circle?: {
-        fill?: {
-          checked?: string;
-          disabled?: string;
-          readOnly?: string;
-        };
-      };
-      focusRing?: {
-        borderColor?: string;
-        borderRadius?: string;
-        borderWidth?: string;
-      };
-    };
-    label?: {
-      color?: {
-        checked?: string;
-        default?: string;
-        disabled?: string;
-        readOnly?: string;
-      };
-    };
-    description?: {
-      color?: {
-        checked?: string;
-        default?: string;
-        disabled?: string;
-        readOnly?: string;
-      };
-    };
-  }
+  export type Style = RadioButtonProps.Style;
 }
diff --git a/src/radio-group/internal.tsx b/src/radio-group/internal.tsx
index 52b0a2ea14..6f3485be98 100644
--- a/src/radio-group/internal.tsx
+++ b/src/radio-group/internal.tsx
@@ -7,15 +7,17 @@ import { useUniqueId } from '@cloudscape-design/component-toolkit/internal';
 import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
 
 import { getBaseProps } from '../internal/base-component';
+import RadioButton from '../internal/components/radio-button';
 import { useFormFieldContext } from '../internal/context/form-field-context';
+import { fireNonCancelableEvent } from '../internal/events';
 import useRadioGroupForwardFocus from '../internal/hooks/forward-focus/radio-group';
 import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
 import { GeneratedAnalyticsMetadataRadioGroupSelect } from './analytics-metadata/interfaces';
 import { RadioGroupProps } from './interfaces';
-import RadioButton from './radio-button';
 
 import analyticsSelectors from './analytics-metadata/styles.css.js';
 import styles from './styles.css.js';
+import testUtilStyles from './test-classes/styles.css.js';
 
 type InternalRadioGroupProps = RadioGroupProps & InternalBaseComponentProps;
 
@@ -52,7 +54,7 @@ const InternalRadioGroup = React.forwardRef(
         aria-controls={ariaControls}
         aria-readonly={readOnly ? 'true' : undefined}
         {...baseProps}
-        className={clsx(baseProps.className, styles.root)}
+        className={clsx(baseProps.className, testUtilStyles.root, styles['radio-group'])}
         ref={__internalRootRef}
       >
         {items &&
@@ -60,14 +62,21 @@ const InternalRadioGroup = React.forwardRef(
             <RadioButton
               key={item.value}
               ref={index === radioButtonRefIndex ? radioButtonRef : undefined}
-              className={clsx(item.value === value && analyticsSelectors.selected)}
+              className={clsx(
+                styles.radio,
+                item.description && styles['radio--has-description'],
+                item.value === value && analyticsSelectors.selected
+              )}
               checked={item.value === value}
               name={name || generatedName}
               value={item.value}
-              label={item.label}
               description={item.description}
               disabled={item.disabled}
-              onChange={onChange}
+              onChange={({ detail }) => {
+                if (onChange && detail.checked) {
+                  fireNonCancelableEvent(onChange, { value: item.value });
+                }
+              }}
               controlId={item.controlId}
               readOnly={readOnly}
               style={style}
@@ -81,7 +90,9 @@ const InternalRadioGroup = React.forwardRef(
                     }
                   : {}
               )}
-            />
+            >
+              {item.label}
+            </RadioButton>
           ))}
       </div>
     );
diff --git a/src/radio-group/styles.scss b/src/radio-group/styles.scss
index f3754121ac..8d970f6558 100644
--- a/src/radio-group/styles.scss
+++ b/src/radio-group/styles.scss
@@ -5,21 +5,12 @@
 
 @use '../internal/styles' as styles;
 @use '../internal/styles/tokens' as awsui;
-@use '../internal/styles/foundation' as foundation;
-@use '../internal/generated/custom-css-properties/index.scss' as custom-props;
-@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
-$radio-size: awsui.$size-control;
-
-.root {
+.radio-group {
   @include styles.styles-reset;
   display: block;
 }
 
-.radio {
-  /*used in test-utils*/
-}
-
 .radio + .radio {
   margin-block-start: awsui.$space-scaled-xxs;
 }
@@ -27,49 +18,3 @@ $radio-size: awsui.$size-control;
 .radio--has-description + .radio {
   margin-block-start: awsui.$space-scaled-xs;
 }
-
-.radio-control {
-  @include styles.make-control-size($radio-size);
-}
-
-.outline {
-  #{custom-props.$styleFocusRingBoxShadow}: 0 0 0
-    var(#{custom-props.$styleFocusRingBorderWidth}, foundation.$box-shadow-focused-width)
-    var(#{custom-props.$styleFocusRingBorderColor}, awsui.$color-border-item-focused);
-
-  @include styles.focus-highlight(
-    $gutter: 2px,
-    $border-radius: var(#{custom-props.$styleFocusRingBorderRadius}, awsui.$border-radius-control-circular-focus-ring),
-    $box-shadow: var(#{custom-props.$styleFocusRingBoxShadow})
-  );
-}
-
-.styled-circle-border {
-  stroke: awsui.$color-border-control-default;
-  fill: awsui.$color-background-control-default;
-  &.styled-circle-disabled,
-  &.styled-circle-readonly {
-    fill: awsui.$color-background-control-disabled;
-    stroke: awsui.$color-background-control-disabled;
-  }
-}
-
-.styled-circle-fill {
-  stroke: awsui.$color-background-control-checked;
-  fill: awsui.$color-foreground-control-default;
-  opacity: 0;
-  @include styles.with-motion {
-    transition: opacity awsui.$motion-duration-transition-quick awsui.$motion-easing-transition-quick;
-  }
-  &.styled-circle-checked {
-    opacity: 1;
-  }
-  &.styled-circle-disabled {
-    fill: awsui.$color-foreground-control-disabled;
-    stroke: awsui.$color-background-control-disabled;
-  }
-  &.styled-circle-readonly {
-    fill: awsui.$color-foreground-control-read-only;
-    stroke: awsui.$color-background-control-disabled;
-  }
-}
diff --git a/src/radio-group/test-classes/styles.scss b/src/radio-group/test-classes/styles.scss
new file mode 100644
index 0000000000..97dd664325
--- /dev/null
+++ b/src/radio-group/test-classes/styles.scss
@@ -0,0 +1,8 @@
+/*
+ Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+ SPDX-License-Identifier: Apache-2.0
+*/
+
+.root {
+  /*used in test-utils*/
+}
diff --git a/src/table/selection/selection-control.tsx b/src/table/selection/selection-control.tsx
index c0312588e8..1176f9ad82 100644
--- a/src/table/selection/selection-control.tsx
+++ b/src/table/selection/selection-control.tsx
@@ -7,8 +7,8 @@ import { useSingleTabStopNavigation, useUniqueId } from '@cloudscape-design/comp
 import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
 
 import InternalCheckbox from '../../checkbox/internal';
+import RadioButton from '../../internal/components/radio-button';
 import { KeyCode } from '../../internal/keycode';
-import RadioButton from '../../radio-group/radio-button';
 import { SelectionProps } from './interfaces';
 
 import styles from './styles.css.js';
@@ -90,7 +90,7 @@ export function SelectionControl({
       indeterminate={indeterminate}
     />
   ) : (
-    <RadioButton {...sharedProps} controlId={controlId} name={name} value={''} label={''} />
+    <RadioButton {...sharedProps} controlId={controlId} name={name} value={''} />
   );
 
   return (
diff --git a/src/test-utils/dom/radio-group/index.ts b/src/test-utils/dom/radio-group/index.ts
index 71c9fa7f69..9f43774326 100644
--- a/src/test-utils/dom/radio-group/index.ts
+++ b/src/test-utils/dom/radio-group/index.ts
@@ -5,13 +5,14 @@ import { escapeSelector } from '@cloudscape-design/test-utils-core/utils';
 
 import RadioButtonWrapper from './radio-button';
 
-import styles from '../../../radio-group/styles.selectors.js';
+import radioButtonStyles from '../../../internal/components/radio-button/test-classes/styles.selectors.js';
+import styles from '../../../radio-group/test-classes/styles.selectors.js';
 
 export default class RadioGroupWrapper extends ComponentWrapper {
   static rootSelector: string = styles.root;
 
   findButtons(): Array<RadioButtonWrapper> {
-    return this.findAllByClassName(styles.radio).map(r => new RadioButtonWrapper(r.getElement()));
+    return this.findAllByClassName(radioButtonStyles.root).map(r => new RadioButtonWrapper(r.getElement()));
   }
 
   findInputByValue(value: string): ElementWrapper<HTMLInputElement> | null {
diff --git a/src/test-utils/dom/radio-group/radio-button.ts b/src/test-utils/dom/radio-group/radio-button.ts
index bd88fb19ba..f9840c66d8 100644
--- a/src/test-utils/dom/radio-group/radio-button.ts
+++ b/src/test-utils/dom/radio-group/radio-button.ts
@@ -4,7 +4,11 @@ import { ComponentWrapper, ElementWrapper } from '@cloudscape-design/test-utils-
 
 import AbstractSwitchWrapper from '../internal/abstract-switch';
 
+import styles from '../../../internal/components/radio-button/test-classes/styles.selectors.js';
+
 export default class RadioButtonWrapper extends ComponentWrapper {
+  static rootSelector: string = styles.root;
+
   private findAbstractSwitch(): AbstractSwitchWrapper {
     return new AbstractSwitchWrapper(this.getElement());
   }
diff --git a/src/tiles/tile.tsx b/src/tiles/tile.tsx
index 3618487bf0..c4561a84ff 100644
--- a/src/tiles/tile.tsx
+++ b/src/tiles/tile.tsx
@@ -6,10 +6,10 @@ import clsx from 'clsx';
 import { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';
 import { copyAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
 
+import RadioButton from '../internal/components/radio-button';
 import { fireNonCancelableEvent } from '../internal/events';
 import { useContainerBreakpoints } from '../internal/hooks/container-queries';
 import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
-import RadioButton from '../radio-group/radio-button';
 import { TilesProps } from './interfaces';
 
 import analyticsSelectors from './analytics-metadata/styles.css.js';
@@ -63,13 +63,14 @@ export const Tile = React.forwardRef(
             ref={mergedRef}
             name={name}
             value={item.value}
-            label={item.label}
             description={item.description}
             disabled={item.disabled}
             controlId={item.controlId}
             readOnly={readOnly}
             className={analyticsSelectors['radio-button']}
-          />
+          >
+            {item.label}
+          </RadioButton>
         </div>
         {item.image && <div className={clsx(styles.image, { [styles.disabled]: !!item.disabled })}>{item.image}</div>}
       </div>