diff --git a/apps/vr-tests-web-components/src/stories/text-input/text-input.stories.tsx b/apps/vr-tests-web-components/src/stories/text-input/text-input.stories.tsx
new file mode 100644
index 00000000000000..e33c85d3642d24
--- /dev/null
+++ b/apps/vr-tests-web-components/src/stories/text-input/text-input.stories.tsx
@@ -0,0 +1,179 @@
+import * as React from 'react';
+import { default as parse } from 'html-react-parser';
+import { Steps, StoryWright } from 'storywright';
+import { TextInputDefinition, LabelDefinition, FluentDesignSystem } from '@fluentui/web-components';
+import { tokens } from '@fluentui/tokens';
+import { DARK_MODE, getStoryVariant, RTL } from '../../utilities/WCThemeDecorator.js';
+
+TextInputDefinition.define(FluentDesignSystem.registry);
+LabelDefinition.define(FluentDesignSystem.registry);
+
+export default {
+ title: 'TextInput',
+ decorators: [
+ (story: () => React.ReactElement) => {
+ return (
+
+
+ {story()}
+
+
+ );
+ },
+ ],
+};
+const Person20Regular = ``;
+
+export const Default = () =>
+ parse(`
+ Sample Input
+ `);
+
+export const ContentStart = () =>
+ parse(`
+
+ ${Person20Regular}
+ Content Start
+
+`);
+export const ContentStartDarkMode = getStoryVariant(ContentStart, DARK_MODE);
+export const ContentStartRTL = getStoryVariant(ContentStart, RTL);
+
+export const ContentEnd = () =>
+ parse(`
+
+ ${Person20Regular}
+ Content End
+
+`);
+export const ContentEndDarkMode = getStoryVariant(ContentEnd, DARK_MODE);
+export const ContentEndRTL = getStoryVariant(ContentEnd, RTL);
+
+export const ContentStartEnd = () =>
+ parse(`
+
+ $
+ .00
+ Content Before + After
+
+`);
+export const ContentStartEndDarkMode = getStoryVariant(ContentStartEnd, DARK_MODE);
+export const ContentStartEndRTL = getStoryVariant(ContentStartEnd, RTL);
+
+export const Placeholder = () =>
+ parse(`
+
+ ${Person20Regular}
+ Input with a placeholder
+
+`);
+export const PlaceholderDarkMode = getStoryVariant(Placeholder, DARK_MODE);
+
+export const Disabled = () =>
+ parse(`
+
+ ${Person20Regular}
+ Disabled Input
+
+`);
+export const DisabledDarkMode = getStoryVariant(Disabled, DARK_MODE);
+
+export const Required = () =>
+ parse(`
+
+ ${Person20Regular}
+ Required Input
+
+`);
+export const RequiredDarkMode = getStoryVariant(Required, DARK_MODE);
+
+export const AppearanceOutline = () =>
+ parse(`
+
+ ${Person20Regular}
+ Outline (default) Input
+
+`);
+
+export const AppearanceOutlineDarkMode = getStoryVariant(AppearanceOutline, DARK_MODE);
+
+export const AppearanceUnderline = () =>
+ parse(`
+
+ ${Person20Regular}
+ Underlined Input
+
+`);
+
+export const AppearanceUnderlineDarkMode = getStoryVariant(AppearanceUnderline, DARK_MODE);
+
+export const AppearanceFilledLighter = () =>
+ parse(`
+
+
+ ${Person20Regular}
+ Filled Lighter Input
+
+
+`);
+
+export const AppearanceFilledLighterDarkMode = getStoryVariant(AppearanceFilledLighter, DARK_MODE);
+
+export const AppearanceFilledDarker = () =>
+ parse(`
+
+
+ ${Person20Regular}
+ Filled Darker Input
+
+
+`);
+
+export const AppearanceFilledDarkerDarkMode = getStoryVariant(AppearanceFilledDarker, DARK_MODE);
+
+export const SizeSmall = () =>
+ parse(`
+
+ ${Person20Regular}
+ Small Input
+
+`);
+
+export const SizeMedium = () =>
+ parse(`
+
+ ${Person20Regular}
+ Medium (default) Input
+
+`);
+
+export const SizeLarge = () =>
+ parse(`
+
+ ${Person20Regular}
+ Large Input
+
+`);
+
+export const Inline = () =>
+ parse(`
+This is
+
+with a paragraph of text.
+`);
diff --git a/packages/web-components/src/text-input/text-input.stories.ts b/packages/web-components/src/text-input/text-input.stories.ts
index e1ba299ab0470c..8e014d2ca148c8 100644
--- a/packages/web-components/src/text-input/text-input.stories.ts
+++ b/packages/web-components/src/text-input/text-input.stories.ts
@@ -120,7 +120,7 @@ export const ContentStartAfter = renderComponent(html`
export const Placeholder = renderComponent(html`
${Person20Regular}
- Disabled Input
+ Input with a placeholder
`);