diff --git a/site/src/components/Form/Form.stories.tsx b/site/src/components/Form/Form.stories.tsx
new file mode 100644
index 0000000000000..b1dafb94f03a1
--- /dev/null
+++ b/site/src/components/Form/Form.stories.tsx
@@ -0,0 +1,36 @@
+import TextField from "@mui/material/TextField";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Form, FormFields, FormSection } from "./Form";
+
+const meta: Meta<typeof Form> = {
+  title: "components/Form",
+  component: Form,
+  args: {
+    children: (
+      <FormSection
+        title="General"
+        description="The name of the workspace and its owner. Only admins can create workspace for other users."
+      >
+        <FormFields>
+          <TextField label="Workspace Name" />
+          <TextField label="Owner" />
+        </FormFields>
+      </FormSection>
+    ),
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Form>;
+
+export const Vertical: Story = {
+  args: {
+    direction: "vertical",
+  },
+};
+
+export const Horizontal: Story = {
+  args: {
+    direction: "horizontal",
+  },
+};