diff --git a/packages/react-components/react-radio/stories/Radio/RadioDefault.stories.tsx b/packages/react-components/react-radio/stories/Radio/RadioDefault.stories.tsx
deleted file mode 100644
index a5c810a7802be..0000000000000
--- a/packages/react-components/react-radio/stories/Radio/RadioDefault.stories.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as React from 'react';
-import type { RadioProps } from '@fluentui/react-components';
-import { makeStyles, Radio, tokens, useId } from '@fluentui/react-components';
-
-const useStyles = makeStyles({
-  field: {
-    display: 'grid',
-    gridRowGap: tokens.spacingVerticalS,
-  },
-});
-
-export const Default = (props: Partial<RadioProps>) => {
-  const radioName = useId('radio');
-  const styles = useStyles();
-  const labelId = useId('label');
-  return (
-    <div className={styles.field}>
-      <label id={labelId}>Favorite Color</label>
-      <div role="radiogroup" aria-labelledby={labelId}>
-        <Radio name={radioName} value="apple" label="Apple" {...props} />
-        <Radio name={radioName} value="pear" label="Pear" {...props} />
-        <Radio name={radioName} value="banana" label="Banana" {...props} />
-        <Radio name={radioName} value="orange" label="Orange" {...props} />
-      </div>
-    </div>
-  );
-};
diff --git a/packages/react-components/react-radio/stories/Radio/RadioDescription.md b/packages/react-components/react-radio/stories/Radio/RadioDescription.md
deleted file mode 100644
index 550b604eccef4..0000000000000
--- a/packages/react-components/react-radio/stories/Radio/RadioDescription.md
+++ /dev/null
@@ -1,3 +0,0 @@
-Radio is a single item in a RadioGroup. It is strongly recommended to use them inside a RadioGroup or RadioGroupField. However, they can also be used on their own: any Radio items with the same name will be treated as part of the same group.
-
-See documentation for RadioGroup for more examples.
diff --git a/packages/react-components/react-radio/stories/Radio/index.stories.tsx b/packages/react-components/react-radio/stories/Radio/index.stories.tsx
deleted file mode 100644
index 6ab1e5d4cebe2..0000000000000
--- a/packages/react-components/react-radio/stories/Radio/index.stories.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Radio } from '@fluentui/react-components';
-import descriptionMd from './RadioDescription.md';
-
-export { Default } from './RadioDefault.stories';
-
-export default {
-  title: 'Components/Radio',
-  component: Radio,
-  parameters: {
-    docs: {
-      description: {
-        component: descriptionMd,
-      },
-    },
-  },
-};
diff --git a/packages/react-components/react-radio/stories/RadioGroup/RadioGroupControlledValue.stories.tsx b/packages/react-components/react-radio/stories/RadioGroup/RadioGroupControlledValue.stories.tsx
index cd96ccf287601..d91d037f4266f 100644
--- a/packages/react-components/react-radio/stories/RadioGroup/RadioGroupControlledValue.stories.tsx
+++ b/packages/react-components/react-radio/stories/RadioGroup/RadioGroupControlledValue.stories.tsx
@@ -1,30 +1,26 @@
 import * as React from 'react';
-import { Label, makeStyles, Radio, RadioGroup, tokens, useId } from '@fluentui/react-components';
 
-const useStyles = makeStyles({
-  field: {
-    display: 'grid',
-    gridRowGap: tokens.spacingVerticalS,
-  },
-});
+import { Field, Radio, RadioGroup, Button } from '@fluentui/react-components';
 
 export const ControlledValue = () => {
   const [value, setValue] = React.useState('banana');
-  const styles = useStyles();
-  const labelId = useId('label');
   return (
-    <div className={styles.field}>
-      <Label id={labelId}>Favorite Fruit</Label>
-      <RadioGroup value={value} onChange={(_, data) => setValue(data.value)} aria-labelledby={labelId}>
-        <Radio value="apple" label="Apple" />
-        <Radio value="pear" label="Pear" />
-        <Radio value="banana" label="Banana" />
-        <Radio value="orange" label="Orange" />
-      </RadioGroup>
-      <div>Current value: {value}</div>
-    </div>
+    <>
+      <Field label="Favorite Fruit">
+        <RadioGroup value={value} onChange={(_, data) => setValue(data.value)}>
+          <Radio value="apple" label="Apple" />
+          <Radio value="pear" label="Pear" />
+          <Radio value="banana" label="Banana" />
+          <Radio value="orange" label="Orange" />
+        </RadioGroup>
+      </Field>
+      <Button disabled={!value} onClick={() => setValue('')}>
+        Clear selection
+      </Button>
+    </>
   );
 };
+
 ControlledValue.parameters = {
   docs: {
     description: {
diff --git a/packages/react-components/react-radio/stories/RadioGroup/RadioGroupDefault.stories.tsx b/packages/react-components/react-radio/stories/RadioGroup/RadioGroupDefault.stories.tsx
index 901089b803af5..85a962b32c24c 100644
--- a/packages/react-components/react-radio/stories/RadioGroup/RadioGroupDefault.stories.tsx
+++ b/packages/react-components/react-radio/stories/RadioGroup/RadioGroupDefault.stories.tsx
@@ -1,26 +1,15 @@
 import * as React from 'react';
-import type { RadioGroupProps } from '@fluentui/react-components';
-import { Label, makeStyles, Radio, RadioGroup, tokens, useId } from '@fluentui/react-components';
 
-const useStyles = makeStyles({
-  field: {
-    display: 'grid',
-    gridRowGap: tokens.spacingVerticalS,
-  },
-});
+import type { RadioGroupProps } from '@fluentui/react-components';
+import { Field, Radio, RadioGroup } from '@fluentui/react-components';
 
-export const Default = (props: Partial<RadioGroupProps>) => {
-  const styles = useStyles();
-  const labelId = useId('label');
-  return (
-    <div className={styles.field}>
-      <Label id={labelId}>Favorite Fruit</Label>
-      <RadioGroup {...props} aria-labelledby={labelId}>
-        <Radio value="apple" label="Apple" />
-        <Radio value="pear" label="Pear" />
-        <Radio value="banana" label="Banana" />
-        <Radio value="orange" label="Orange" />
-      </RadioGroup>
-    </div>
-  );
-};
+export const Default = (props: Partial<RadioGroupProps>) => (
+  <Field label="Favorite Fruit">
+    <RadioGroup {...props}>
+      <Radio value="apple" label="Apple" />
+      <Radio value="pear" label="Pear" />
+      <Radio value="banana" label="Banana" />
+      <Radio value="orange" label="Orange" />
+    </RadioGroup>
+  </Field>
+);
diff --git a/packages/react-components/react-radio/stories/RadioGroup/RadioGroupDefaultValue.stories.tsx b/packages/react-components/react-radio/stories/RadioGroup/RadioGroupDefaultValue.stories.tsx
new file mode 100644
index 0000000000000..3357d9f3d1317
--- /dev/null
+++ b/packages/react-components/react-radio/stories/RadioGroup/RadioGroupDefaultValue.stories.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+import { Field, Radio, RadioGroup } from '@fluentui/react-components';
+
+export const DefaultValue = () => (
+  <Field label="Favorite Fruit">
+    <RadioGroup defaultValue="pear">
+      <Radio value="apple" label="Apple" />
+      <Radio value="pear" label="Pear" />
+      <Radio value="banana" label="Banana" />
+      <Radio value="orange" label="Orange" />
+    </RadioGroup>
+  </Field>
+);
+
+DefaultValue.parameters = {
+  docs: {
+    description: {
+      story:
+        'The initially selected item can be set by setting the `defaultValue` of RadioGroup. ' +
+        'Alternatively, one Radio item can have `defaultChecked` set. ' +
+        'Both methods have the same effect, but only one should be used in a given RadioGroup.',
+    },
+  },
+};
diff --git a/packages/react-components/react-radio/stories/RadioGroup/RadioGroupDisabled.stories.tsx b/packages/react-components/react-radio/stories/RadioGroup/RadioGroupDisabled.stories.tsx
index 035b555869c94..4a696ece340d5 100644
--- a/packages/react-components/react-radio/stories/RadioGroup/RadioGroupDisabled.stories.tsx
+++ b/packages/react-components/react-radio/stories/RadioGroup/RadioGroupDisabled.stories.tsx
@@ -1,28 +1,18 @@
 import * as React from 'react';
-import { Label, makeStyles, Radio, RadioGroup, tokens, useId } from '@fluentui/react-components';
 
-const useStyles = makeStyles({
-  field: {
-    display: 'grid',
-    gridRowGap: tokens.spacingVerticalS,
-  },
-});
+import { Field, Radio, RadioGroup } from '@fluentui/react-components';
+
+export const Disabled = () => (
+  <Field label="Favorite Fruit">
+    <RadioGroup defaultValue="apple" disabled>
+      <Radio value="apple" label="Apple" />
+      <Radio value="pear" label="Pear" />
+      <Radio value="banana" label="Banana" />
+      <Radio value="orange" label="Orange" />
+    </RadioGroup>
+  </Field>
+);
 
-export const Disabled = () => {
-  const styles = useStyles();
-  const labelId = useId('label');
-  return (
-    <div className={styles.field}>
-      <Label id={labelId}>Favorite Fruit</Label>
-      <RadioGroup defaultValue="apple" disabled aria-labelledby={labelId}>
-        <Radio value="apple" label="Apple" />
-        <Radio value="pear" label="Pear" />
-        <Radio value="banana" label="Banana" />
-        <Radio value="orange" label="Orange" />
-      </RadioGroup>
-    </div>
-  );
-};
 Disabled.parameters = {
   docs: {
     description: {
diff --git a/packages/react-components/react-radio/stories/RadioGroup/RadioGroupDisabledItem.stories.tsx b/packages/react-components/react-radio/stories/RadioGroup/RadioGroupDisabledItem.stories.tsx
index 3bafffc046b38..39bd401a9b247 100644
--- a/packages/react-components/react-radio/stories/RadioGroup/RadioGroupDisabledItem.stories.tsx
+++ b/packages/react-components/react-radio/stories/RadioGroup/RadioGroupDisabledItem.stories.tsx
@@ -1,28 +1,18 @@
 import * as React from 'react';
-import { Label, makeStyles, Radio, RadioGroup, tokens, useId } from '@fluentui/react-components';
 
-const useStyles = makeStyles({
-  field: {
-    display: 'grid',
-    gridRowGap: tokens.spacingVerticalS,
-  },
-});
+import { Field, Radio, RadioGroup } from '@fluentui/react-components';
+
+export const DisabledItem = () => (
+  <Field label="Favorite Fruit">
+    <RadioGroup defaultValue="apple">
+      <Radio value="apple" label="Apple" />
+      <Radio value="pear" label="Pear" />
+      <Radio value="banana" label="Banana" disabled />
+      <Radio value="orange" label="Orange" />
+    </RadioGroup>
+  </Field>
+);
 
-export const DisabledItem = () => {
-  const styles = useStyles();
-  const labelId = useId('label');
-  return (
-    <div className={styles.field}>
-      <Label id={labelId}>Favorite Fruit</Label>
-      <RadioGroup defaultValue="apple" aria-labelledby={labelId}>
-        <Radio value="apple" label="Apple" />
-        <Radio value="pear" label="Pear" />
-        <Radio value="banana" label="Banana" disabled />
-        <Radio value="orange" label="Orange" />
-      </RadioGroup>
-    </div>
-  );
-};
 DisabledItem.parameters = {
   docs: {
     description: {
diff --git a/packages/react-components/react-radio/stories/RadioGroup/RadioGroupHorizontal.stories.tsx b/packages/react-components/react-radio/stories/RadioGroup/RadioGroupHorizontal.stories.tsx
index 8e3159b9d5e4e..18d137f127fdd 100644
--- a/packages/react-components/react-radio/stories/RadioGroup/RadioGroupHorizontal.stories.tsx
+++ b/packages/react-components/react-radio/stories/RadioGroup/RadioGroupHorizontal.stories.tsx
@@ -1,28 +1,18 @@
 import * as React from 'react';
-import { Label, makeStyles, Radio, RadioGroup, tokens, useId } from '@fluentui/react-components';
 
-const useStyles = makeStyles({
-  field: {
-    display: 'grid',
-    gridRowGap: tokens.spacingVerticalS,
-  },
-});
+import { Field, Radio, RadioGroup } from '@fluentui/react-components';
+
+export const Horizontal = () => (
+  <Field label="Favorite Fruit">
+    <RadioGroup layout="horizontal">
+      <Radio value="apple" label="Apple" />
+      <Radio value="pear" label="Pear" />
+      <Radio value="banana" label="Banana" />
+      <Radio value="orange" label="Orange" />
+    </RadioGroup>
+  </Field>
+);
 
-export const Horizontal = () => {
-  const styles = useStyles();
-  const labelId = useId('label');
-  return (
-    <div className={styles.field}>
-      <Label id={labelId}>Favorite Fruit</Label>
-      <RadioGroup layout="horizontal" aria-labelledby={labelId}>
-        <Radio value="apple" label="Apple" />
-        <Radio value="pear" label="Pear" />
-        <Radio value="banana" label="Banana" />
-        <Radio value="orange" label="Orange" />
-      </RadioGroup>
-    </div>
-  );
-};
 Horizontal.storyName = 'Layout: horizontal';
 Horizontal.parameters = {
   docs: {
diff --git a/packages/react-components/react-radio/stories/RadioGroup/RadioGroupHorizontalStacked.stories.tsx b/packages/react-components/react-radio/stories/RadioGroup/RadioGroupHorizontalStacked.stories.tsx
index 5c0a671e506d7..660fef2723675 100644
--- a/packages/react-components/react-radio/stories/RadioGroup/RadioGroupHorizontalStacked.stories.tsx
+++ b/packages/react-components/react-radio/stories/RadioGroup/RadioGroupHorizontalStacked.stories.tsx
@@ -1,29 +1,18 @@
 import * as React from 'react';
-import { Label, makeStyles, Radio, RadioGroup, tokens, useId } from '@fluentui/react-components';
 
-const useStyles = makeStyles({
-  field: {
-    display: 'grid',
-    gridRowGap: tokens.spacingVerticalS,
-  },
-});
+import { Field, Radio, RadioGroup } from '@fluentui/react-components';
 
-export const HorizontalStacked = () => {
-  const styles = useStyles();
-  const labelId = useId('label');
+export const HorizontalStacked = () => (
+  <Field label="Favorite Fruit">
+    <RadioGroup layout="horizontal-stacked">
+      <Radio value="apple" label="Apple" />
+      <Radio value="pear" label="Pear" />
+      <Radio value="banana" label="Banana" />
+      <Radio value="orange" label="Orange" />
+    </RadioGroup>
+  </Field>
+);
 
-  return (
-    <div className={styles.field}>
-      <Label id={labelId}>Favorite Fruit</Label>
-      <RadioGroup layout="horizontal-stacked" aria-labelledby={labelId}>
-        <Radio value="apple" label="Apple" />
-        <Radio value="pear" label="Pear" />
-        <Radio value="banana" label="Banana" />
-        <Radio value="orange" label="Orange" />
-      </RadioGroup>
-    </div>
-  );
-};
 HorizontalStacked.storyName = 'Layout: horizontal-stacked';
 HorizontalStacked.parameters = {
   docs: {
diff --git a/packages/react-components/react-radio/stories/RadioGroup/RadioGroupLabelSubtext.stories.tsx b/packages/react-components/react-radio/stories/RadioGroup/RadioGroupLabelSubtext.stories.tsx
index 4c617e48a2db2..633b70d1c5697 100644
--- a/packages/react-components/react-radio/stories/RadioGroup/RadioGroupLabelSubtext.stories.tsx
+++ b/packages/react-components/react-radio/stories/RadioGroup/RadioGroupLabelSubtext.stories.tsx
@@ -1,44 +1,34 @@
 import * as React from 'react';
-import { Label, makeStyles, Radio, RadioGroup, Text, tokens, useId } from '@fluentui/react-components';
 
-const useStyles = makeStyles({
-  field: {
-    display: 'grid',
-    gridRowGap: tokens.spacingVerticalS,
-  },
-});
+import { Field, Radio, RadioGroup, Text } from '@fluentui/react-components';
+
+export const LabelSubtext = () => (
+  <Field label="Favorite Fruit">
+    <RadioGroup>
+      <Radio
+        value="A"
+        label={
+          <>
+            Banana
+            <br />
+            <Text size={200}>This is an example subtext of the first option</Text>
+          </>
+        }
+      />
+      <Radio
+        value="B"
+        label={
+          <>
+            Pear
+            <br />
+            <Text size={200}>This is some more example subtext</Text>
+          </>
+        }
+      />
+    </RadioGroup>
+  </Field>
+);
 
-export const LabelSubtext = () => {
-  const styles = useStyles();
-  const labelId = useId('label');
-  return (
-    <div className={styles.field}>
-      <Label id={labelId}>Favorite Fruit</Label>
-      <RadioGroup aria-labelledby={labelId}>
-        <Radio
-          value="A"
-          label={
-            <>
-              Banana
-              <br />
-              <Text size={200}>This is an example subtext of the first option</Text>
-            </>
-          }
-        />
-        <Radio
-          value="B"
-          label={
-            <>
-              Pear
-              <br />
-              <Text size={200}>This is some more example subtext</Text>
-            </>
-          }
-        />
-      </RadioGroup>
-    </div>
-  );
-};
 LabelSubtext.parameters = {
   docs: {
     description: {
diff --git a/packages/react-components/react-radio/stories/RadioGroup/RadioGroupLabeled.stories.tsx b/packages/react-components/react-radio/stories/RadioGroup/RadioGroupLabeled.stories.tsx
deleted file mode 100644
index f00948cae5e66..0000000000000
--- a/packages/react-components/react-radio/stories/RadioGroup/RadioGroupLabeled.stories.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import * as React from 'react';
-import { Label, makeStyles, Radio, RadioGroup, tokens, useId } from '@fluentui/react-components';
-
-const useStyles = makeStyles({
-  field: {
-    display: 'grid',
-    gridRowGap: tokens.spacingVerticalS,
-  },
-});
-
-export const Labeled = () => {
-  const styles = useStyles();
-  const labelId = useId('label-');
-  return (
-    <div className={styles.field}>
-      <Label id={labelId}>Favorite Fruit</Label>
-      <RadioGroup aria-labelledby={labelId}>
-        <Radio value="apple" label="Apple" />
-        <Radio value="pear" label="Pear" />
-        <Radio value="banana" label="Banana" />
-        <Radio value="orange" label="Orange" />
-      </RadioGroup>
-    </div>
-  );
-};
-Labeled.parameters = {
-  docs: {
-    description: {
-      story:
-        'Use the `aria-labelledby` property on RadioGroup to associate a label with the group.<br />' +
-        '**Note**: The `<label>` attribute `htmlFor` does _not_ work with RadioGroup, as the group is not ' +
-        'an input element. You must use `aria-labelledby` instead.',
-    },
-  },
-};
diff --git a/packages/react-components/react-radio/stories/RadioGroup/RadioGroupRequired.stories.tsx b/packages/react-components/react-radio/stories/RadioGroup/RadioGroupRequired.stories.tsx
index 620f926a3ad98..a524b259733f9 100644
--- a/packages/react-components/react-radio/stories/RadioGroup/RadioGroupRequired.stories.tsx
+++ b/packages/react-components/react-radio/stories/RadioGroup/RadioGroupRequired.stories.tsx
@@ -1,34 +1,24 @@
 import * as React from 'react';
-import { Label, makeStyles, Radio, RadioGroup, tokens, useId } from '@fluentui/react-components';
 
-const useStyles = makeStyles({
-  field: {
-    display: 'grid',
-    gridRowGap: tokens.spacingVerticalS,
-  },
-});
+import { Field, Radio, RadioGroup } from '@fluentui/react-components';
+
+export const Required = () => (
+  <Field label="Favorite Fruit" required>
+    <RadioGroup>
+      <Radio value="apple" label="Apple" />
+      <Radio value="pear" label="Pear" />
+      <Radio value="banana" label="Banana" />
+      <Radio value="orange" label="Orange" />
+    </RadioGroup>
+  </Field>
+);
 
-export const Required = () => {
-  const styles = useStyles();
-  const labelId = useId('label-');
-  return (
-    <div className={styles.field}>
-      <Label id={labelId} required>
-        Favorite Fruit
-      </Label>
-      <RadioGroup aria-labelledby={labelId} required>
-        <Radio value="apple" label="Apple" />
-        <Radio value="pear" label="Pear" />
-        <Radio value="banana" label="Banana" />
-        <Radio value="orange" label="Orange" />
-      </RadioGroup>
-    </div>
-  );
-};
 Required.parameters = {
   docs: {
     description: {
-      story: 'Use the `required` prop on `RadioGroup` to indicate that one of the radio items must be selected.',
+      story:
+        'Use the `required` prop to indicate that one of the radio items must be selected. ' +
+        'Or, if the RadioGroup is inside a Field, it will inherit the `required` prop from the Field.',
     },
   },
 };
diff --git a/packages/react-components/react-radio/stories/RadioGroup/RadioGroupUncontrolledValue.stories.tsx b/packages/react-components/react-radio/stories/RadioGroup/RadioGroupUncontrolledValue.stories.tsx
deleted file mode 100644
index bd76ee7e15405..0000000000000
--- a/packages/react-components/react-radio/stories/RadioGroup/RadioGroupUncontrolledValue.stories.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import * as React from 'react';
-import { Label, makeStyles, Radio, RadioGroup, tokens, useId } from '@fluentui/react-components';
-
-const useStyles = makeStyles({
-  field: {
-    display: 'grid',
-    gridRowGap: tokens.spacingVerticalS,
-  },
-});
-
-export const UncontrolledValue = () => {
-  const styles = useStyles();
-  const labelId = useId('label');
-  return (
-    <div className={styles.field}>
-      <Label id={labelId}>Favorite Fruit</Label>
-      <RadioGroup defaultValue="pear" aria-labelledby={labelId}>
-        <Radio value="apple" label="Apple" />
-        <Radio value="pear" label="Pear" />
-        <Radio value="banana" label="Banana" />
-        <Radio value="orange" label="Orange" />
-      </RadioGroup>
-    </div>
-  );
-};
-UncontrolledValue.parameters = {
-  docs: {
-    description: {
-      story:
-        'The initially selected item can be set by setting the `defaultValue` of RadioGroup. ' +
-        'Alternatively, one Radio item can have `defaultChecked` set. ' +
-        'Both methods have the same effect, but only one should be used in a given RadioGroup.',
-    },
-  },
-};
diff --git a/packages/react-components/react-radio/stories/RadioGroup/index.stories.tsx b/packages/react-components/react-radio/stories/RadioGroup/index.stories.tsx
index fd75838510eb5..ddc692f014dd3 100644
--- a/packages/react-components/react-radio/stories/RadioGroup/index.stories.tsx
+++ b/packages/react-components/react-radio/stories/RadioGroup/index.stories.tsx
@@ -1,13 +1,12 @@
-import { RadioGroup } from '@fluentui/react-components';
+import { Radio, RadioGroup } from '@fluentui/react-components';
 import bestPracticesMd from './RadioGroupBestPractices.md';
 import descriptionMd from './RadioGroupDescription.md';
 
 export { Default } from './RadioGroupDefault.stories';
-export { Labeled } from './RadioGroupLabeled.stories';
 export { Horizontal } from './RadioGroupHorizontal.stories';
 export { HorizontalStacked } from './RadioGroupHorizontalStacked.stories';
+export { DefaultValue } from './RadioGroupDefaultValue.stories';
 export { ControlledValue } from './RadioGroupControlledValue.stories';
-export { UncontrolledValue } from './RadioGroupUncontrolledValue.stories';
 export { Required } from './RadioGroupRequired.stories';
 export { Disabled } from './RadioGroupDisabled.stories';
 export { DisabledItem } from './RadioGroupDisabledItem.stories';
@@ -16,6 +15,9 @@ export { LabelSubtext } from './RadioGroupLabelSubtext.stories';
 export default {
   title: 'Components/RadioGroup',
   component: RadioGroup,
+  subcomponents: {
+    Radio,
+  },
   parameters: {
     docs: {
       description: {