diff --git a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/RadioGroup.stories.mdx b/apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/RadioGroup.stories.mdx
index 3d1c1cbcc18e1a..c7fe56f58aec0d 100644
--- a/apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/RadioGroup.stories.mdx
+++ b/apps/public-docsite-v9/src/Concepts/Upgrade/FromV8/Components/RadioGroup.stories.mdx
@@ -40,7 +40,7 @@ import { Label, Radio, RadioGroup } from '@fluentui/react-components/unstable';
import { useId } from '@fluentui/react-utilities';
const RadioGroupBasicExample = () => {
- const labelId = useId('label-');
+ const labelId = useId('label');
return (
<>
@@ -48,10 +48,10 @@ const RadioGroupBasicExample = () => {
Pick One
-
-
-
-
+
+
+
+
>
);
@@ -129,7 +129,7 @@ const useGreenBorderOptionStyles = makeStyles({
});
const RadioGroupCustomOptionExample = () => {
- const labelId = useId('label-');
+ const labelId = useId('label');
const iconOptionStyles = useIconOptionStyles();
const labelStyles = useLabelStyles();
const greenBorderOptionStyles = useGreenBorderOptionStyles();
@@ -153,9 +153,9 @@ const RadioGroupCustomOptionExample = () => {
}}
/>
-
-
-
+
+
+
>
);
@@ -180,19 +180,28 @@ This table maps v8 `ChoiceGroup` props to the v9 `RadioGroup` equivalent.
This table maps v8 `IChoiceGroupOption` props to the v9 `Radio` equivalent.
-| v8 | v9 | Notes |
-| ------------------ | ------------ | ------------------------------------------------------------------------------------ |
-| `key` | `key` | This is only necessary if you `.map()` an array to generate the list of `Radio`s. |
-| `text` | `label` | In v9 this is a slot so this prop can be a string, a component or a shorthand object |
-| `onRenderField` | n/a | Provide a custom child to `RadioGroup` |
-| `onRenderLabel` | `label` | Provide a custom component to the `label` slot |
-| `iconProps` | n/a | Use slots to customize `Radio` |
-| `imageSRc` | n/a | Use slots to customize `Radio` |
-| `imageAlt` | n/a | Use slots to customize `Radio` |
-| `selectedImageSrc` | n/a | Use slots to customize `Radio` |
-| `imageSize` | n/a | Use slots to customize `Radio` |
-| `disabled` | `disabled` | |
-| `id` | `id` | In v9 this is the intrinsic HTML prop |
-| `labeldId` | n/a | Provide an id to the `label` slot via shorthand props or a custom component |
-| `ariaLabel` | `aria-label` | In v9 this is the intrinsic HTML prop |
-| `styles` | `className` | |
+| v8 | v9 | Notes |
+| ------------------ | ------------ | -------------------------------------------------------------------------------------------------------------- |
+| `key` | `key` | This is only necessary if you `.map()` an array to generate the list of `Radio`s. |
+| `text` | `label` | In v9 this is a slot so this prop can be a string, a component or a shorthand object |
+| `onRenderField` | n/a | Provide a custom child to `RadioGroup` |
+| `onRenderLabel` | `label` | Provide a custom component to the `label` slot |
+| `iconProps` | n/a | Use slots to customize `Radio` |
+| `imageSrc` | n/a | Use slots to customize `Radio` |
+| `imageAlt` | n/a | Use slots to customize `Radio` |
+| `selectedImageSrc` | n/a | Use slots to customize `Radio` |
+| `imageSize` | n/a | Use slots to customize `Radio` |
+| `disabled` | `disabled` | |
+| `id` | `id` | In v9 this is the intrinsic HTML prop |
+| `labeldId` | n/a | Provide an id to the `label` slot via shorthand props or a custom component |
+| `ariaLabel` | `aria-label` | In v9 this is the intrinsic HTML prop |
+| `styles` | `className` | |
+| `itemKey` | n/a | |
+| `checked` | `checked` | When used in a `RadioGroup` use the `value` prop on `RadioGroup` instead |
+| `onChange` | `onChange` | Typescript types have changed |
+| `onFocus` | `onFocus` | v9 uses native `onFocus` |
+| `onBlur` | `onBlur` | v9 uses native `onBlur` |
+| `focused` | n/a | |
+| `theme` | n/a | Use `FluentProvider` to customize themes |
+| `required` | `required` | |
+| `name` | `name` | v9 uses native HTML prop. When used in a `RadioGroup` this prop is inherited from the `RadioGroup` by default. |