diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index a4b03ffa35aa..62bad90809e1 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -5967,6 +5967,7 @@ Map {
},
},
"RadioTile" => Object {
+ "$$typeof": Symbol(react.forward_ref),
"defaultProps": Object {
"onChange": [Function],
"tabIndex": 0,
@@ -6012,6 +6013,7 @@ Map {
"type": "oneOfType",
},
},
+ "render": [Function],
},
"Row" => Object {
"propTypes": Object {
diff --git a/packages/react/src/components/RadioTile/RadioTile-test.js b/packages/react/src/components/RadioTile/RadioTile-test.js
index ae9be5381f49..13e3aad80ab6 100644
--- a/packages/react/src/components/RadioTile/RadioTile-test.js
+++ b/packages/react/src/components/RadioTile/RadioTile-test.js
@@ -86,5 +86,13 @@ describe('RadioTile', () => {
expect(screen.getByRole('radio')).toHaveAttribute('value', 'standard');
});
+
+ it('should pass a given ref to the input element', () => {
+ const ref = React.createRef();
+ render();
+
+ expect(ref.current.type).toEqual('radio');
+ expect(ref.current.value).toEqual('some test value');
+ });
});
});
diff --git a/packages/react/src/components/RadioTile/RadioTile.js b/packages/react/src/components/RadioTile/RadioTile.js
index 80bf810d92b3..a26ab772ad1e 100644
--- a/packages/react/src/components/RadioTile/RadioTile.js
+++ b/packages/react/src/components/RadioTile/RadioTile.js
@@ -14,20 +14,23 @@ import { useFallbackId } from '../../internal/useId';
import { usePrefix } from '../../internal/usePrefix';
import deprecate from '../../prop-types/deprecate';
-function RadioTile({
- children,
- className: customClassName,
- disabled,
- // eslint-disable-next-line no-unused-vars
- light,
- checked,
- name,
- value,
- id,
- onChange,
- tabIndex,
- ...rest
-}) {
+const RadioTile = React.forwardRef(function RadioTile(
+ {
+ children,
+ className: customClassName,
+ disabled,
+ // eslint-disable-next-line no-unused-vars
+ light,
+ checked,
+ name,
+ value,
+ id,
+ onChange,
+ tabIndex,
+ ...rest
+ },
+ ref
+) {
const prefix = usePrefix();
const inputId = useFallbackId(id);
const className = cx(
@@ -65,6 +68,7 @@ function RadioTile({
tabIndex={!disabled ? tabIndex : null}
type="radio"
value={value}
+ ref={ref}
/>
>
);
-}
+});
RadioTile.propTypes = {
/**