diff --git a/frontend/documentation/components/CopyField.stories.tsx b/frontend/documentation/components/CopyField.stories.tsx
index cdf5cb4ace76..5e773a2f8dd7 100644
--- a/frontend/documentation/components/CopyField.stories.tsx
+++ b/frontend/documentation/components/CopyField.stories.tsx
@@ -31,6 +31,19 @@ export const Default: Story = {
),
}
+// The label lives inside CopyField so htmlFor can reach the inner input.
+export const WithTitle: Story = {
+ render: () => (
+
+
+
+ ),
+}
+
export const Monospace: Story = {
render: () => (
diff --git a/frontend/documentation/components/Field.stories.tsx b/frontend/documentation/components/Field.stories.tsx
new file mode 100644
index 000000000000..f99cf3a299d6
--- /dev/null
+++ b/frontend/documentation/components/Field.stories.tsx
@@ -0,0 +1,79 @@
+import React from 'react'
+import type { Meta, StoryObj } from 'storybook'
+
+import Field from 'components/base/forms/Field'
+import Input from 'components/base/forms/Input'
+
+const meta: Meta = {
+ component: Field,
+ decorators: [
+ (Story: React.FC) => (
+
+
+
+ ),
+ ],
+ parameters: {
+ docs: {
+ description: {
+ component:
+ 'The field skeleton: wrapper, label, control, error. Layout only; pass `htmlFor` (and put the matching `id` on the control) to wire the label, or omit it as a visible statement that the label is decorative.',
+ },
+ },
+ layout: 'centered',
+ },
+ title: 'Components/Forms/Field',
+}
+export default meta
+
+type Story = StoryObj
+
+// Declaring htmlFor once wires everything: Input adopts it as its id via
+// FieldContext, and picks up aria-invalid/aria-describedby when there is
+// an error.
+export const Default: Story = {
+ render: () => (
+
+
+
+ ),
+}
+
+export const WithTooltip: Story = {
+ render: () => (
+
+
+
+ ),
+}
+
+export const WithError: Story = {
+ render: () => (
+
+
+
+ ),
+}
+
+export const CustomControl: Story = {
+ render: () => (
+
+