diff --git a/web/src/lib/components/ui/Field.stories.svelte b/web/src/lib/components/ui/Field.stories.svelte
index af54d1fbb..352487c96 100644
--- a/web/src/lib/components/ui/Field.stories.svelte
+++ b/web/src/lib/components/ui/Field.stories.svelte
@@ -20,70 +20,30 @@
 	});
 </script>
 
-<!-- Field wraps any form control via its `children` snippet. -->
-<Story name="Default">
-	{#snippet template(args)}
-		<Field {...args} for="field-default">
-			<input
-				id="field-default"
-				type="text"
-				placeholder="Placeholder"
-				class="w-full rounded-sm border border-border-default bg-background-default px-3 py-2 typography-paragraph-small outline-none placeholder:text-foreground-placeholder focus:border-border-strong focus:ring-1 focus:ring-border-strong"
-			/>
-		</Field>
-	{/snippet}
-</Story>
+<!-- Field wraps any form control via its `children` snippet, which receives the id the
+     label points at, so the control never has to hardcode one. The snippet goes through
+     `args` like any other prop, which also keeps it out of the controls' way. -->
+{#snippet textInput({ id }: { id: string })}
+	<input
+		{id}
+		type="text"
+		placeholder="Placeholder"
+		class="w-full rounded-sm border border-border-default bg-background-default px-3 py-2 typography-paragraph-small outline-none placeholder:text-foreground-placeholder focus:border-border-strong focus:ring-1 focus:ring-border-strong"
+	/>
+{/snippet}
 
-<Story name="LabelOnly" args={{ subtitle: undefined }}>
-	{#snippet template(args)}
-		<Field {...args} for="field-label-only">
-			<input
-				id="field-label-only"
-				type="text"
-				placeholder="Placeholder"
-				class="w-full rounded-sm border border-border-default bg-background-default px-3 py-2 typography-paragraph-small outline-none placeholder:text-foreground-placeholder focus:border-border-strong focus:ring-1 focus:ring-border-strong"
-			/>
-		</Field>
-	{/snippet}
-</Story>
+{#snippet select({ id }: { id: string })}
+	<Select
+		{id}
+		placeholder="Select"
+		options={[
+			{ value: "one", label: "One" },
+			{ value: "two", label: "Two" }
+		]}
+	/>
+{/snippet}
 
-<Story name="Required" args={{ required: true }}>
-	{#snippet template(args)}
-		<Field {...args} for="field-required">
-			<input
-				id="field-required"
-				type="text"
-				placeholder="Placeholder"
-				class="w-full rounded-sm border border-border-default bg-background-default px-3 py-2 typography-paragraph-small outline-none placeholder:text-foreground-placeholder focus:border-border-strong focus:ring-1 focus:ring-border-strong"
-			/>
-		</Field>
-	{/snippet}
-</Story>
-
-<Story name="WithSelect">
-	{#snippet template(args)}
-		<Field {...args} for="field-select">
-			<Select
-				id="field-select"
-				placeholder="Select"
-				options={[
-					{ value: "one", label: "One" },
-					{ value: "two", label: "Two" }
-				]}
-			/>
-		</Field>
-	{/snippet}
-</Story>
-
-<Story name="WithInput">
-	{#snippet template(args)}
-		<Field {...args} for="field-input">
-			<input
-				id="field-input"
-				type="text"
-				placeholder="Placeholder"
-				class="w-full rounded-sm border border-border-default bg-background-default px-3 py-2 typography-paragraph-small outline-none placeholder:text-foreground-placeholder focus:border-border-strong focus:ring-1 focus:ring-border-strong"
-			/>
-		</Field>
-	{/snippet}
-</Story>
+<Story name="Default" args={{ children: textInput }} />
+<Story name="LabelOnly" args={{ subtitle: undefined, children: textInput }} />
+<Story name="Required" args={{ required: true, children: textInput }} />
+<Story name="WithSelect" args={{ children: select }} />