diff --git a/apps/vr-tests-react-components/src/stories/Checkbox.stories.tsx b/apps/vr-tests-react-components/src/stories/Checkbox.stories.tsx
deleted file mode 100644
index 375a23d90e89b..0000000000000
--- a/apps/vr-tests-react-components/src/stories/Checkbox.stories.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import * as React from 'react';
-import { Steps, StoryWright } from 'storywright';
-import { storiesOf } from '@storybook/react';
-import { Checkbox } from '@fluentui/react-checkbox';
-import { TestWrapperDecoratorFixedWidth } from '../utilities/TestWrapperDecorator';
-
-storiesOf('Checkbox Converged', module)
-  .addDecorator(TestWrapperDecoratorFixedWidth)
-  .addDecorator(story => (
-    <StoryWright
-      steps={new Steps()
-        .snapshot('rest', { cropTo: '.testWrapper' })
-        .hover('input')
-        .snapshot('hover', { cropTo: '.testWrapper' })
-        .mouseDown('input')
-        .snapshot('active', { cropTo: '.testWrapper' })
-        .end()}
-    >
-      {story()}
-    </StoryWright>
-  ))
-  .addStory('unchecked', () => <Checkbox label="Unchecked" />, { includeRtl: true })
-  .addStory('checked', () => <Checkbox checked label="Checked" />)
-  .addStory('mixed', () => <Checkbox checked="mixed" label="Mixed" />)
-  .addStory('disabled', () => <Checkbox disabled label="Disabled" />);
-
-storiesOf('Checkbox Converged', module)
-  .addDecorator(TestWrapperDecoratorFixedWidth)
-  .addDecorator(story => (
-    <StoryWright steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>{story()}</StoryWright>
-  ))
-  .addStory('disabled+checked', () => <Checkbox disabled checked label="Disabled checked" />)
-  .addStory('disabled+mixed', () => <Checkbox disabled checked="mixed" label="Disabled mixed" />)
-  .addStory('no-label', () => <Checkbox />)
-  .addStory('label-before', () => <Checkbox labelPosition="before" label="Label before" />, { includeRtl: true })
-  .addStory(
-    'label-wrapping',
-    () => (
-      <Checkbox
-        label={
-          <>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
-            dolore magna aliqua
-          </>
-        }
-      />
-    ),
-    { includeRtl: true },
-  )
-  .addStory('required', () => <Checkbox required label="Required" />)
-  .addStory('required+label-before', () => (
-    <Checkbox required labelPosition="before" label="Required with label before" />
-  ))
-  .addStory('circular', () => <Checkbox shape="circular" label="Circular" />)
-  .addStory('circular+checked', () => <Checkbox shape="circular" checked label="Circular checked" />)
-  .addStory('circular+mixed', () => <Checkbox shape="circular" checked="mixed" label="Circular mixed" />)
-  //
-  // large variants
-  //
-  .addStory('large', () => <Checkbox size="large" label="Large" />, { includeRtl: true })
-  .addStory('large+checked', () => <Checkbox size="large" checked label="Large checked" />)
-  .addStory('large+mixed', () => <Checkbox size="large" checked="mixed" label="Large mixed" />)
-  .addStory('large+circular', () => <Checkbox size="large" shape="circular" label="Large circular" />)
-  .addStory('large+circular+checked', () => (
-    <Checkbox size="large" shape="circular" checked label="Large circular checked" />
-  ))
-  .addStory('large+circular+mixed', () => (
-    <Checkbox size="large" shape="circular" checked="mixed" label="Large circular mixed" />
-  ))
-  .addStory(
-    'large+label-wrapping',
-    () => (
-      <Checkbox
-        size="large"
-        label={
-          <>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
-            dolore magna aliqua
-          </>
-        }
-      />
-    ),
-    { includeRtl: true },
-  );
diff --git a/apps/vr-tests-react-components/src/stories/Checkbox/Checkbox.stories.tsx b/apps/vr-tests-react-components/src/stories/Checkbox/Checkbox.stories.tsx
new file mode 100644
index 0000000000000..c634620275734
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Checkbox/Checkbox.stories.tsx
@@ -0,0 +1,105 @@
+import * as React from 'react';
+import { Steps, StoryWright } from 'storywright';
+import type { Meta, StoryFn } from '@storybook/react';
+import { Checkbox } from '@fluentui/react-checkbox';
+import { getStoryVariant, RTL, TestWrapperDecoratorFixedWidth } from '../../utilities';
+
+export default {
+  title: 'Checkbox Converged',
+  component: Checkbox,
+  decorators: [
+    TestWrapperDecoratorFixedWidth,
+    story => (
+      <StoryWright steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>{story()}</StoryWright>
+    ),
+  ],
+} satisfies Meta<typeof Checkbox>;
+
+type Story = StoryFn<typeof Checkbox>;
+
+export const DisabledChecked: Story = () => <Checkbox disabled checked label="Disabled checked" />;
+DisabledChecked.storyName = 'disabled+checked';
+
+export const DisabledMixed: Story = () => <Checkbox disabled checked="mixed" label="Disabled mixed" />;
+DisabledMixed.storyName = 'disabled+mixed';
+
+export const NoLabel: Story = () => <Checkbox />;
+NoLabel.storyName = 'no-label';
+
+export const LabelBefore: Story = () => <Checkbox labelPosition="before" label="Label before" />;
+LabelBefore.storyName = 'label-before';
+
+export const LabelBeforeRTL = getStoryVariant(LabelBefore, RTL);
+
+export const LabelWrapping: Story = () => (
+  <Checkbox
+    label={
+      <>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua
+      </>
+    }
+  />
+);
+LabelWrapping.storyName = 'label-wrapping';
+
+export const LabelWrappingRTL = getStoryVariant(LabelWrapping, RTL);
+
+export const Required: Story = () => <Checkbox required label="Required" />;
+Required.storyName = 'required';
+
+export const RequiredLabelBefore: Story = () => (
+  <Checkbox required labelPosition="before" label="Required with label before" />
+);
+RequiredLabelBefore.storyName = 'required+label-before';
+
+export const Circular: Story = () => <Checkbox shape="circular" label="Circular" />;
+Circular.storyName = 'circular';
+
+export const CircularChecked: Story = () => <Checkbox shape="circular" checked label="Circular checked" />;
+CircularChecked.storyName = 'circular+checked';
+
+export const CircularMixed: Story = () => <Checkbox shape="circular" checked="mixed" label="Circular mixed" />;
+CircularMixed.storyName = 'circular+mixed';
+
+//
+// large variants
+//
+export const Large: Story = () => <Checkbox size="large" label="Large" />;
+Large.storyName = 'large';
+
+export const LargeRTL = getStoryVariant(Large, RTL);
+
+export const LargeChecked: Story = () => <Checkbox size="large" checked label="Large checked" />;
+LargeChecked.storyName = 'large+checked';
+
+export const LargeMixed: Story = () => <Checkbox size="large" checked="mixed" label="Large mixed" />;
+LargeMixed.storyName = 'large+mixed';
+
+export const LargeCircular: Story = () => <Checkbox size="large" shape="circular" label="Large circular" />;
+LargeCircular.storyName = 'large+circular';
+
+export const LargeCircularChecked: Story = () => (
+  <Checkbox size="large" shape="circular" checked label="Large circular checked" />
+);
+LargeCircularChecked.storyName = 'large+circular+checked';
+
+export const LargeCircularMixed: Story = () => (
+  <Checkbox size="large" shape="circular" checked="mixed" label="Large circular mixed" />
+);
+LargeCircularMixed.storyName = 'large+circular+mixed';
+
+export const LargeLabelWrapping: Story = () => (
+  <Checkbox
+    size="large"
+    label={
+      <>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua
+      </>
+    }
+  />
+);
+LargeLabelWrapping.storyName = 'large+label-wrapping';
+
+export const LargeLabelWrappingRTL = getStoryVariant(LargeLabelWrapping, RTL);
diff --git a/apps/vr-tests-react-components/src/stories/Checkbox/CheckboxInteractions.stories.tsx b/apps/vr-tests-react-components/src/stories/Checkbox/CheckboxInteractions.stories.tsx
new file mode 100644
index 0000000000000..3897a890df69f
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Checkbox/CheckboxInteractions.stories.tsx
@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { Steps, StoryWright } from 'storywright';
+import type { Meta, StoryFn } from '@storybook/react';
+import { Checkbox } from '@fluentui/react-checkbox';
+import { getStoryVariant, RTL, TestWrapperDecoratorFixedWidth } from '../../utilities';
+
+export default {
+  title: 'Checkbox Converged',
+  component: Checkbox,
+  decorators: [
+    TestWrapperDecoratorFixedWidth,
+    story => (
+      <StoryWright
+        steps={new Steps()
+          .snapshot('rest', { cropTo: '.testWrapper' })
+          .hover('input')
+          .snapshot('hover', { cropTo: '.testWrapper' })
+          .mouseDown('input')
+          .snapshot('active', { cropTo: '.testWrapper' })
+          .end()}
+      >
+        {story()}
+      </StoryWright>
+    ),
+  ],
+} satisfies Meta<typeof Checkbox>;
+
+type Story = StoryFn<typeof Checkbox>;
+
+export const Unchecked: Story = () => <Checkbox label="Unchecked" />;
+Unchecked.storyName = 'unchecked';
+
+export const UncheckedRTL = getStoryVariant(Unchecked, RTL);
+
+export const Checked: Story = () => <Checkbox checked label="Checked" />;
+Checked.storyName = 'checked';
+
+export const Mixed: Story = () => <Checkbox checked="mixed" label="Mixed" />;
+Mixed.storyName = 'mixed';
+
+export const Disabled: Story = () => <Checkbox disabled label="Disabled" />;
+Disabled.storyName = 'disabled';