diff --git a/apps/vr-tests-react-components/package.json b/apps/vr-tests-react-components/package.json
index 1d8539ff652875..dfec01568ca74d 100644
--- a/apps/vr-tests-react-components/package.json
+++ b/apps/vr-tests-react-components/package.json
@@ -24,6 +24,7 @@
     "@fluentui/react-card": "9.0.0-beta.24",
     "@fluentui/react-checkbox": "^9.0.4",
     "@fluentui/react-divider": "^9.0.4",
+    "@fluentui/react-field": "9.0.0-alpha.0",
     "@fluentui/react-icons": "^2.0.175",
     "@fluentui/react-image": "^9.0.4",
     "@fluentui/react-input": "^9.0.4",
diff --git a/apps/vr-tests-react-components/src/stories/Field.stories.tsx b/apps/vr-tests-react-components/src/stories/Field.stories.tsx
new file mode 100644
index 00000000000000..827ba779dda754
--- /dev/null
+++ b/apps/vr-tests-react-components/src/stories/Field.stories.tsx
@@ -0,0 +1,98 @@
+import * as React from 'react';
+import Screener, { Steps } from 'screener-storybook/src/screener';
+import { storiesOf } from '@storybook/react';
+import { Radio } from '@fluentui/react-radio';
+import {
+  CheckboxField,
+  ComboboxField,
+  InputField,
+  InputFieldProps,
+  RadioGroupField,
+  SelectField,
+  SliderField,
+  SpinButtonField,
+  SwitchField,
+  TextareaField,
+} from '@fluentui/react-field';
+import { SparkleFilled } from '@fluentui/react-icons';
+
+const AllFields = (
+  props: Pick<
+    InputFieldProps,
+    'orientation' | 'required' | 'label' | 'validationState' | 'validationMessage' | 'validationMessageIcon' | 'hint'
+  >,
+) => {
+  return (
+    <div style={{ display: 'grid', rowGap: '12px' }}>
+      <CheckboxField label="Checkbox" {...props} />
+      <ComboboxField label="Combo box field" {...props} />
+      <InputField label="Input field" {...props} />
+      <RadioGroupField label="Radio group field" {...props}>
+        <Radio label="Option one" />
+        <Radio label="Option two" />
+        <Radio label="Option three" />
+      </RadioGroupField>
+      <SelectField label="Select field" {...props}>
+        <option>Option</option>
+      </SelectField>
+      <SliderField label="Slider field" {...props} />
+      <SpinButtonField label="Spin button field" {...props} />
+      <SwitchField label="Switch field" {...props} />
+      <TextareaField label="Textarea field" {...props} />
+    </div>
+  );
+};
+
+storiesOf('Field Converged', module)
+  .addDecorator(story => (
+    <div style={{ display: 'flex' }}>
+      <div className="testWrapper" style={{ padding: '10px', width: '480px' }}>
+        <Screener steps={new Steps().snapshot('default', { cropTo: '.testWrapper' }).end()}>{story()}</Screener>
+      </div>
+    </div>
+  ))
+  .addStory('base', () => <AllFields />)
+  .addStory('required', () => <AllFields required />)
+  .addStory('validation:error', () => <AllFields validationState="error" validationMessage="Error message" />)
+  .addStory('validation:warning', () => <AllFields validationState="warning" validationMessage="Warning message" />)
+  .addStory('validation:success', () => <AllFields validationState="success" validationMessage="Success message" />)
+  .addStory('validation:custom', () => (
+    <AllFields validationMessageIcon={<SparkleFilled />} validationMessage="Custom message" />
+  ))
+  .addStory('hint', () => <AllFields hint="Hint message" />)
+  .addStory('horizontal', () => <AllFields orientation="horizontal" />)
+  .addStory('horizontal+label:multiline', () => (
+    <AllFields
+      orientation="horizontal"
+      label="This is a very long label that should wrap around to be multiple lines in height"
+    />
+  ))
+  .addStory('horizontal+validation:error+hint', () => (
+    <AllFields orientation="horizontal" validationState="error" validationMessage="Error message" hint="Hint text" />
+  ))
+  .addStory('size:small', () => (
+    <div style={{ display: 'grid', rowGap: '12px' }}>
+      <ComboboxField label="Combo box field" size="small" />
+      <InputField label="Input field" size="small" />
+      <SelectField label="Select field" size="small">
+        <option>Option</option>
+      </SelectField>
+      <SliderField label="Slider field" size="small" />
+      <SpinButtonField label="Spin button field" size="small" />
+      <TextareaField label="Textarea field" size="small" />
+    </div>
+  ))
+  .addStory('size:large', () => (
+    <div style={{ display: 'grid', rowGap: '12px' }}>
+      <CheckboxField label="Checkbox" size="large" />
+      <ComboboxField label="Combo box field" size="large" />
+      <InputField label="Input field" size="large" />
+      <SelectField label="Select field" size="large">
+        <option>Option</option>
+      </SelectField>
+      <TextareaField label="Textarea field" size="large" />
+    </div>
+  ))
+  .addStory('CheckboxField+fieldLabel', () => (
+    <CheckboxField label="Label for the checkbox" fieldLabel="Field label" required />
+  ));