From 68221bcab6bcd725b9b51afedcda1971db2c8f4c Mon Sep 17 00:00:00 2001
From: Bea Esguerra <beaesguerra@users.noreply.github.com>
Date: Thu, 19 Dec 2024 14:49:39 -0700
Subject: [PATCH] Use LabeledField in other component stories (#2400)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary:
Use LabeledField in other component stories

Issue: WB-1783

## Test plan:
Verify stories for the following components:
- SingleSelect (`?path=/docs/packages-dropdown-singleselect--docs`)
- MultiSelect (`?path=/docs/packages-dropdown-multiselect--docs`)
- TextArea (`?path=/docs/packages-form-textarea--docs`)
- TextArea Variants (`?path=/docs/packages-form-textarea-all-variants--docs`)
- TextField (`?path=/docs/packages-form-textfield--docs`)
- TextField Variants (`?path=/docs/packages-form-textfield-all-variants--docs`)
- SearchField (`?path=/docs/packages-searchfield--docs`)
- SearchField Variants (`?path=/docs/packages-searchfield-all-variants--docs`)

Note: This addresses Storybook a11y issues related to form fields and labels. There are some stories that focus on the form field without the label so those warnings will need to be handled separately!

Author: beaesguerra

Reviewers: jandrade, beaesguerra

Required Reviewers:

Approved By: jandrade

Checks: ✅ Chromatic - Get results on regular PRs (ubuntu-latest, 20.x), ✅ Lint / Lint (ubuntu-latest, 20.x), ✅ Test / Test (ubuntu-latest, 20.x, 2/2), ✅ Test / Test (ubuntu-latest, 20.x, 1/2), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Chromatic - Build on regular PRs / chromatic (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ⏭️  Chromatic - Skip on Release PR (changesets), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ gerald, ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ⏭️  dependabot

Pull Request URL: https://github.com/Khan/wonder-blocks/pull/2400
---
 .../multi-select.stories.tsx                  | 117 ++--
 .../single-select.stories.tsx                 | 135 ++---
 .../text-area-variants.stories.tsx            |  23 +-
 .../wonder-blocks-form/text-area.stories.tsx  | 195 ++++---
 .../text-field-variants.stories.tsx           |  23 +-
 .../wonder-blocks-form/text-field.stories.tsx | 505 +++++-------------
 .../search-field-variants.stories.tsx         |  23 +-
 .../search-field.stories.tsx                  |  64 ++-
 8 files changed, 433 insertions(+), 652 deletions(-)

diff --git a/__docs__/wonder-blocks-dropdown/multi-select.stories.tsx b/__docs__/wonder-blocks-dropdown/multi-select.stories.tsx
index db9426d7d..fcc46c63e 100644
--- a/__docs__/wonder-blocks-dropdown/multi-select.stories.tsx
+++ b/__docs__/wonder-blocks-dropdown/multi-select.stories.tsx
@@ -8,8 +8,8 @@ import {PropsFor, View} from "@khanacademy/wonder-blocks-core";
 import Button from "@khanacademy/wonder-blocks-button";
 import {Checkbox} from "@khanacademy/wonder-blocks-form";
 import {OnePaneDialog, ModalLauncher} from "@khanacademy/wonder-blocks-modal";
-import {color, semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
-import {HeadingLarge, LabelMedium} from "@khanacademy/wonder-blocks-typography";
+import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {HeadingLarge} from "@khanacademy/wonder-blocks-typography";
 import {MultiSelect, OptionItem} from "@khanacademy/wonder-blocks-dropdown";
 import Pill from "@khanacademy/wonder-blocks-pill";
 import type {Labels} from "@khanacademy/wonder-blocks-dropdown";
@@ -25,7 +25,7 @@ import {
     chatIcon,
 } from "./option-item-examples";
 import {OpenerProps} from "../../packages/wonder-blocks-dropdown/src/util/types";
-import Strut from "../../packages/wonder-blocks-layout/src/components/strut";
+import {LabeledField} from "@khanacademy/wonder-blocks-labeled-field";
 
 type StoryComponentType = StoryObj<typeof MultiSelect>;
 
@@ -271,7 +271,10 @@ export const CustomStylesOpened: StoryComponentType = {
     ],
 };
 
-const ControlledMultiSelect = (args: PropsFor<typeof MultiSelect>) => {
+const ControlledMultiSelect = (
+    storyArgs: PropsFor<typeof MultiSelect> & {label?: string},
+) => {
+    const {label, ...args} = storyArgs;
     const [opened, setOpened] = React.useState(false);
     const [selectedValues, setSelectedValues] = React.useState<string[]>(
         args.selectedValues || [],
@@ -280,31 +283,29 @@ const ControlledMultiSelect = (args: PropsFor<typeof MultiSelect>) => {
         null | string | void
     >(null);
     return (
-        <View style={{gap: spacing.xSmall_8}}>
-            <MultiSelect
-                {...args}
-                id="multi-select"
-                opened={opened}
-                onToggle={setOpened}
-                selectedValues={selectedValues}
-                onChange={setSelectedValues}
-                validate={(values) => {
-                    if (values.includes("jupiter")) {
-                        return "Don't pick jupiter!";
-                    }
-                }}
-                onValidate={setErrorMessage}
-            >
-                {items}
-            </MultiSelect>
-            {(errorMessage || args.error) && (
-                <LabelMedium
-                    style={{color: semanticColor.status.critical.foreground}}
+        <LabeledField
+            label={label || "MultiSelect"}
+            errorMessage={
+                errorMessage || (args.error && "Error from error prop")
+            }
+            field={
+                <MultiSelect
+                    {...args}
+                    opened={opened}
+                    onToggle={setOpened}
+                    selectedValues={selectedValues}
+                    onChange={setSelectedValues}
+                    validate={(values) => {
+                        if (values.includes("jupiter")) {
+                            return "Don't pick jupiter!";
+                        }
+                    }}
+                    onValidate={setErrorMessage}
                 >
-                    {errorMessage || "Error from error prop"}
-                </LabelMedium>
-            )}
-        </View>
+                    {items}
+                </MultiSelect>
+            }
+        />
     );
 };
 
@@ -378,20 +379,17 @@ export const Required: StoryComponentType = {
 export const ErrorFromValidation: StoryComponentType = {
     render: (args: PropsFor<typeof MultiSelect>) => {
         return (
-            <View style={{gap: spacing.xSmall_8}}>
-                <LabelMedium htmlFor="multi-select" tag="label">
-                    Validation example (try picking jupiter)
-                </LabelMedium>
-                <ControlledMultiSelect {...args} id="multi-select">
+            <View style={{gap: spacing.large_24}}>
+                <ControlledMultiSelect
+                    {...args}
+                    label="Validation example (try picking jupiter)"
+                >
                     {items}
                 </ControlledMultiSelect>
-                <LabelMedium htmlFor="multi-select" tag="label">
-                    Validation example (on mount)
-                </LabelMedium>
                 <ControlledMultiSelect
                     {...args}
+                    label="Validation example (on mount)"
                     selectedValues={["jupiter"]}
-                    id="multi-select"
                 >
                     {items}
                 </ControlledMultiSelect>
@@ -494,27 +492,30 @@ export const DropdownInModal: StoryComponentType = {
  */
 export const Disabled: StoryComponentType = {
     render: () => (
-        <View>
-            <LabelMedium style={{marginBottom: spacing.xSmall_8}}>
-                Disabled prop is set to true
-            </LabelMedium>
-            <MultiSelect disabled={true} onChange={() => {}}>
-                <OptionItem label="Mercury" value="1" />
-                <OptionItem label="Venus" value="2" />
-            </MultiSelect>
-            <Strut size={spacing.xLarge_32} />
-            <LabelMedium style={{marginBottom: spacing.xSmall_8}}>
-                No items
-            </LabelMedium>
-            <MultiSelect onChange={() => {}} />
-            <Strut size={spacing.xLarge_32} />
-            <LabelMedium style={{marginBottom: spacing.xSmall_8}}>
-                All items are disabled
-            </LabelMedium>
-            <MultiSelect onChange={() => {}}>
-                <OptionItem label="Mercury" value="1" disabled={true} />
-                <OptionItem label="Venus" value="2" disabled={true} />
-            </MultiSelect>
+        <View style={{gap: spacing.xLarge_32}}>
+            <LabeledField
+                label="Disabled prop is set to true"
+                field={
+                    <MultiSelect disabled={true} onChange={() => {}}>
+                        <OptionItem label="Mercury" value="1" />
+                        <OptionItem label="Venus" value="2" />
+                    </MultiSelect>
+                }
+            />
+            <LabeledField
+                label="No items"
+                field={<MultiSelect onChange={() => {}} />}
+            />
+
+            <LabeledField
+                label="All items are disabled"
+                field={
+                    <MultiSelect onChange={() => {}}>
+                        <OptionItem label="Mercury" value="1" disabled={true} />
+                        <OptionItem label="Venus" value="2" disabled={true} />
+                    </MultiSelect>
+                }
+            />
         </View>
     ),
 };
diff --git a/__docs__/wonder-blocks-dropdown/single-select.stories.tsx b/__docs__/wonder-blocks-dropdown/single-select.stories.tsx
index 99760b932..77a74acba 100644
--- a/__docs__/wonder-blocks-dropdown/single-select.stories.tsx
+++ b/__docs__/wonder-blocks-dropdown/single-select.stories.tsx
@@ -7,19 +7,14 @@ import {action} from "@storybook/addon-actions";
 import type {Meta, StoryObj} from "@storybook/react";
 
 import Button from "@khanacademy/wonder-blocks-button";
-import {color, semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {PropsFor, View} from "@khanacademy/wonder-blocks-core";
 import {TextField} from "@khanacademy/wonder-blocks-form";
 import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
 import {OnePaneDialog, ModalLauncher} from "@khanacademy/wonder-blocks-modal";
 import Pill from "@khanacademy/wonder-blocks-pill";
-import {
-    Body,
-    HeadingLarge,
-    LabelMedium,
-    LabelSmall,
-} from "@khanacademy/wonder-blocks-typography";
+import {Body, HeadingLarge} from "@khanacademy/wonder-blocks-typography";
 import {
     SingleSelect,
     OptionItem,
@@ -39,6 +34,7 @@ import {
     currencies,
 } from "./option-item-examples";
 import {OpenerProps} from "../../packages/wonder-blocks-dropdown/src/util/types";
+import {LabeledField} from "@khanacademy/wonder-blocks-labeled-field";
 
 type StoryComponentType = StoryObj<typeof SingleSelect>;
 type SingleSelectArgs = Partial<typeof SingleSelect>;
@@ -353,36 +349,49 @@ export const LongOptionLabels: StoryComponentType = {
  */
 export const Disabled: StoryComponentType = {
     render: () => (
-        <View>
-            <LabelMedium style={{marginBottom: spacing.xSmall_8}}>
-                Disabled prop is set to true
-            </LabelMedium>
-            <SingleSelect
-                placeholder="Choose a fruit"
-                onChange={() => {}}
-                selectedValue=""
-                disabled={true}
-            >
-                {items}
-            </SingleSelect>
-            <Strut size={spacing.xLarge_32} />
-            <LabelMedium style={{marginBottom: spacing.xSmall_8}}>
-                No items
-            </LabelMedium>
-            <SingleSelect placeholder="Choose a fruit" onChange={() => {}} />
-            <Strut size={spacing.xLarge_32} />
-            <LabelMedium style={{marginBottom: spacing.xSmall_8}}>
-                All items are disabled
-            </LabelMedium>
-            <SingleSelect placeholder="Choose a fruit" onChange={() => {}}>
-                <OptionItem label="Apple" value="1" disabled={true} />
-                <OptionItem label="Orange" value="2" disabled={true} />
-            </SingleSelect>
+        <View style={{gap: spacing.xLarge_32}}>
+            <LabeledField
+                label="Disabled prop is set to true"
+                field={
+                    <SingleSelect
+                        placeholder="Choose a fruit"
+                        onChange={() => {}}
+                        selectedValue=""
+                        disabled={true}
+                    >
+                        {items}
+                    </SingleSelect>
+                }
+            />
+            <LabeledField
+                label="No items"
+                field={
+                    <SingleSelect
+                        placeholder="Choose a fruit"
+                        onChange={() => {}}
+                    />
+                }
+            />
+            <LabeledField
+                label="All items are disabled"
+                field={
+                    <SingleSelect
+                        placeholder="Choose a fruit"
+                        onChange={() => {}}
+                    >
+                        <OptionItem label="Apple" value="1" disabled={true} />
+                        <OptionItem label="Orange" value="2" disabled={true} />
+                    </SingleSelect>
+                }
+            />
         </View>
     ),
 };
 
-const ControlledSingleSelect = (args: PropsFor<typeof SingleSelect>) => {
+const ControlledSingleSelect = (
+    storyArgs: PropsFor<typeof SingleSelect> & {label?: string},
+) => {
+    const {label, ...args} = storyArgs;
     const [opened, setOpened] = React.useState(false);
     const [selectedValue, setSelectedValue] = React.useState(
         args.selectedValue,
@@ -391,32 +400,30 @@ const ControlledSingleSelect = (args: PropsFor<typeof SingleSelect>) => {
         null | string | void
     >(null);
     return (
-        <View style={{gap: spacing.xSmall_8}}>
-            <SingleSelect
-                {...args}
-                id="single-select"
-                opened={opened}
-                onToggle={setOpened}
-                selectedValue={selectedValue}
-                onChange={setSelectedValue}
-                placeholder="Choose a fruit"
-                validate={(value) => {
-                    if (value === "lemon") {
-                        return "Pick another option!";
-                    }
-                }}
-                onValidate={setErrorMessage}
-            >
-                {items}
-            </SingleSelect>
-            {(errorMessage || args.error) && (
-                <LabelSmall
-                    style={{color: semanticColor.status.critical.foreground}}
+        <LabeledField
+            label={label || "SingleSelect"}
+            errorMessage={
+                errorMessage || (args.error && "Error from error prop")
+            }
+            field={
+                <SingleSelect
+                    {...args}
+                    opened={opened}
+                    onToggle={setOpened}
+                    selectedValue={selectedValue}
+                    onChange={setSelectedValue}
+                    placeholder="Choose a fruit"
+                    validate={(value) => {
+                        if (value === "lemon") {
+                            return "Pick another option!";
+                        }
+                    }}
+                    onValidate={setErrorMessage}
                 >
-                    {errorMessage || "Error from error prop"}
-                </LabelSmall>
-            )}
-        </View>
+                    {items}
+                </SingleSelect>
+            }
+        />
     );
 };
 
@@ -490,13 +497,10 @@ export const Required: StoryComponentType = {
 export const ErrorFromValidation: StoryComponentType = {
     render: (args: PropsFor<typeof SingleSelect>) => {
         return (
-            <View style={{gap: spacing.xSmall_8}}>
-                <LabelSmall htmlFor="single-select" tag="label">
-                    Validation example (try picking lemon to trigger an error)
-                </LabelSmall>
+            <View style={{gap: spacing.large_24}}>
                 <ControlledSingleSelect
                     {...args}
-                    id="single-select"
+                    label="Validation example (try picking lemon to trigger an error)"
                     validate={(value) => {
                         if (value === "lemon") {
                             return "Pick another option!";
@@ -505,12 +509,9 @@ export const ErrorFromValidation: StoryComponentType = {
                 >
                     {items}
                 </ControlledSingleSelect>
-                <LabelSmall htmlFor="single-select" tag="label">
-                    Validation example (on mount)
-                </LabelSmall>
                 <ControlledSingleSelect
                     {...args}
-                    id="single-select"
+                    label="Validation example (on mount)"
                     validate={(value) => {
                         if (value === "lemon") {
                             return "Pick another option!";
diff --git a/__docs__/wonder-blocks-form/text-area-variants.stories.tsx b/__docs__/wonder-blocks-form/text-area-variants.stories.tsx
index 93b95967b..9ea9b2db6 100644
--- a/__docs__/wonder-blocks-form/text-area-variants.stories.tsx
+++ b/__docs__/wonder-blocks-form/text-area-variants.stories.tsx
@@ -4,8 +4,9 @@ import type {Meta, StoryObj} from "@storybook/react";
 
 import {View} from "@khanacademy/wonder-blocks-core";
 import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
-import {LabelLarge, LabelMedium} from "@khanacademy/wonder-blocks-typography";
+import {LabelLarge} from "@khanacademy/wonder-blocks-typography";
 import {TextArea} from "@khanacademy/wonder-blocks-form";
+import {LabeledField} from "@khanacademy/wonder-blocks-labeled-field";
 
 /**
  * The following stories are used to generate the pseudo states for the
@@ -58,16 +59,16 @@ const States = (props: {
                 {states.map((scenario) => {
                     return (
                         <View style={styles.scenario} key={scenario.label}>
-                            <LabelMedium
-                                style={props.light && {color: color.white}}
-                            >
-                                {scenario.label}
-                            </LabelMedium>
-                            <TextArea
-                                value=""
-                                onChange={() => {}}
-                                {...props}
-                                {...scenario.props}
+                            <LabeledField
+                                label={scenario.label}
+                                field={
+                                    <TextArea
+                                        value=""
+                                        onChange={() => {}}
+                                        {...props}
+                                        {...scenario.props}
+                                    />
+                                }
                             />
                         </View>
                     );
diff --git a/__docs__/wonder-blocks-form/text-area.stories.tsx b/__docs__/wonder-blocks-form/text-area.stories.tsx
index 1f8e2251c..39b826649 100644
--- a/__docs__/wonder-blocks-form/text-area.stories.tsx
+++ b/__docs__/wonder-blocks-form/text-area.stories.tsx
@@ -8,9 +8,10 @@ import packageConfig from "../../packages/wonder-blocks-form/package.json";
 import ComponentInfo from "../../.storybook/components/component-info";
 import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
 import Button from "@khanacademy/wonder-blocks-button";
-import {LabelSmall, LabelLarge} from "@khanacademy/wonder-blocks-typography";
+import {LabelLarge} from "@khanacademy/wonder-blocks-typography";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
 import {PropsFor, View} from "@khanacademy/wonder-blocks-core";
+import {LabeledField} from "@khanacademy/wonder-blocks-labeled-field";
 
 import TextAreaArgTypes from "./text-area.argtypes";
 import {validateEmail} from "./form-utilities";
@@ -45,6 +46,7 @@ export default {
 } as Meta<typeof TextArea>;
 
 type StoryComponentType = StoryObj<typeof TextArea>;
+type ControlledStoryComponentType = StoryObj<typeof ControlledTextArea>;
 
 const styles = StyleSheet.create({
     customField: {
@@ -56,12 +58,12 @@ const styles = StyleSheet.create({
             color: color.white64,
         },
     },
-    error: {
-        color: color.red,
-    },
 });
 
-const ControlledTextArea = (args: PropsFor<typeof TextArea>) => {
+const ControlledTextArea = (
+    storyArgs: PropsFor<typeof TextArea> & {label?: string},
+) => {
+    const {label, ...args} = storyArgs;
     const [value, setValue] = React.useState(args.value || "");
     const [error, setError] = React.useState<string | null | undefined>(null);
 
@@ -70,20 +72,18 @@ const ControlledTextArea = (args: PropsFor<typeof TextArea>) => {
     };
 
     return (
-        <View>
-            <TextArea
-                {...args}
-                value={value}
-                onChange={handleChange}
-                onValidate={setError}
-            />
-            <Strut size={spacing.xxSmall_6} />
-            {(error || args.error) && (
-                <LabelSmall style={styles.error}>
-                    {error || "Error from error prop"}
-                </LabelSmall>
-            )}
-        </View>
+        <LabeledField
+            label={label || "Text Area"}
+            errorMessage={error || (args.error && "Error from error prop")}
+            field={
+                <TextArea
+                    {...args}
+                    value={value}
+                    onChange={handleChange}
+                    onValidate={setError}
+                />
+            }
+        />
     );
 };
 
@@ -98,8 +98,11 @@ export const Default: StoryComponentType = {
  * When setting a value and onChange props, you can use it as a controlled
  * component.
  */
-export const Controlled: StoryComponentType = {
+export const Controlled: ControlledStoryComponentType = {
     render: ControlledTextArea,
+    args: {
+        label: "Controlled",
+    },
     parameters: {
         chromatic: {
             // Disabling because this doesn't test anything visual.
@@ -111,10 +114,11 @@ export const Controlled: StoryComponentType = {
 /**
  * When the `value` prop is provided, the value is rendered in the text area.
  */
-export const WithValue: StoryComponentType = {
+export const WithValue: ControlledStoryComponentType = {
     args: {
         value: "Text",
         onChange: () => {},
+        label: "With Value",
     },
     render: ControlledTextArea,
 };
@@ -173,11 +177,12 @@ export const ReadOnly: StoryComponentType = {
  * Note: The `required` and `validate` props can also put the TextArea in an
  * error state.
  */
-export const Error: StoryComponentType = {
+export const Error: ControlledStoryComponentType = {
     render: ControlledTextArea,
     args: {
         value: "With error",
         error: true,
+        label: "Error using error prop",
     },
     parameters: {
         chromatic: {
@@ -198,10 +203,11 @@ export const Error: StoryComponentType = {
  * - `aria-invalid="true"` if there is an error.
  * - `aria-invalid="false"` if there is no error.
  */
-export const ErrorFromValidation: StoryComponentType = {
+export const ErrorFromValidation: ControlledStoryComponentType = {
     args: {
         value: "khan",
         validate: validateEmail,
+        label: "Error from validation",
     },
     render: ControlledTextArea,
     parameters: {
@@ -246,20 +252,21 @@ export const ErrorFromPropAndValidation = (args: PropsFor<typeof TextArea>) => {
     const errorMessage = validationErrorMessage || backendErrorMessage;
 
     return (
-        <View>
-            <TextArea
-                {...args}
-                value={value}
-                onChange={handleChange}
-                validate={validateEmail}
-                onValidate={setValidationErrorMessage}
-                error={!!errorMessage}
+        <View style={{gap: spacing.small_12}}>
+            <LabeledField
+                label="Error from prop and validation"
+                field={
+                    <TextArea
+                        {...args}
+                        value={value}
+                        onChange={handleChange}
+                        validate={validateEmail}
+                        onValidate={setValidationErrorMessage}
+                        error={!!errorMessage}
+                    />
+                }
+                errorMessage={errorMessage}
             />
-            <Strut size={spacing.xxSmall_6} />
-            {errorMessage && (
-                <LabelSmall style={styles.error}>{errorMessage}</LabelSmall>
-            )}
-            <Strut size={spacing.xxSmall_6} />
             <Button
                 onClick={() => {
                     if (value === "test@test.com") {
@@ -311,53 +318,39 @@ export const InstantValidation: StoryComponentType = {
     render: (args) => {
         return (
             <View style={{gap: spacing.small_12}}>
-                <LabelSmall htmlFor="instant-validation-true-not-required">
-                    Validation on mount if there is a value
-                </LabelSmall>
                 <ControlledTextArea
                     {...args}
-                    id="instant-validation-true-not-required"
+                    label="Validation on mount if there is a value"
                     value="invalid"
                 />
-                <LabelSmall htmlFor="instant-validation-true-not-required">
-                    Error shown immediately (instantValidation: true, required:
-                    false)
-                </LabelSmall>
                 <ControlledTextArea
                     {...args}
-                    id="instant-validation-true-not-required"
+                    label="Error shown immediately (instantValidation: true, required:
+                    false)"
                     instantValidation={true}
                 />
-                <LabelSmall htmlFor="instant-validation-false-not-required">
-                    Error shown onBlur (instantValidation: false, required:
-                    false)
-                </LabelSmall>
                 <ControlledTextArea
                     {...args}
-                    id="instant-validation-false-not-required"
+                    label="Error shown onBlur (instantValidation: false, required:
+                    false)"
                     instantValidation={false}
                 />
 
-                <LabelSmall htmlFor="instant-validation-true-required">
-                    Error shown immediately after clearing the value
-                    (instantValidation: true, required: true)
-                </LabelSmall>
                 <ControlledTextArea
                     {...args}
                     validate={undefined}
                     value="T"
-                    id="instant-validation-true-required"
+                    label="Error shown immediately after clearing the value
+                    (instantValidation: true, required: true)"
                     instantValidation={true}
                     required="Required"
                 />
-                <LabelSmall htmlFor="instant-validation-false-required">
-                    Error shown on blur if it is empty (instantValidation:
-                    false, required: true)
-                </LabelSmall>
+
                 <ControlledTextArea
                     {...args}
+                    label="Error shown on blur if it is empty (instantValidation:
+                    false, required: true)"
                     validate={undefined}
-                    id="instant-validation-false-required"
                     instantValidation={false}
                     required="Required"
                 />
@@ -550,32 +543,31 @@ export const Wrap: StoryComponentType = {
                     onSubmit={handleSubmit}
                     style={{width: "300px"}}
                 >
-                    <label htmlFor="soft-wrap">Wrap: soft</label>
-                    <TextArea
-                        {...args}
-                        wrap="soft"
-                        id="soft-wrap"
-                        name="soft-wrap"
+                    <LabeledField
+                        label="Wrap: soft"
+                        field={
+                            <TextArea {...args} wrap="soft" name="soft-wrap" />
+                        }
                     />
                     <br />
-                    <label htmlFor="hard-wrap">Wrap: hard</label>
-                    <TextArea
-                        {...args}
-                        wrap="hard"
-                        id="hard-wrap"
-                        name="hard-wrap"
+                    <LabeledField
+                        label="Wrap: hard"
+                        field={
+                            <TextArea {...args} wrap="hard" name="hard-wrap" />
+                        }
                     />
                     <br />
-                    <label htmlFor="off-wrap">Wrap: off</label>
-                    <TextArea
-                        {...args}
-                        wrap="off"
-                        id="off-wrap"
-                        name="off-wrap"
+                    <LabeledField
+                        label="Wrap: off"
+                        field={
+                            <TextArea {...args} wrap="off" name="off-wrap" />
+                        }
                     />
                     <br />
-                    <label htmlFor="default-wrap">Wrap: default (soft)</label>
-                    <TextArea {...args} id="default-wrap" name="default-wrap" />
+                    <LabeledField
+                        label="Wrap: default (soft)"
+                        field={<TextArea {...args} name="default-wrap" />}
+                    />
                     <br />
                     <Button type="submit">Submit</Button>
                 </form>
@@ -599,7 +591,6 @@ export const MinMaxLength: StoryComponentType = {
         maxLength: 4,
         value: "Text",
     },
-    render: ControlledTextArea,
     parameters: {
         chromatic: {
             // Disabling because this doesn't test anything visual.
@@ -621,32 +612,30 @@ export const ResizeType: StoryComponentType = {
     render(args) {
         return (
             <div>
-                <label htmlFor="resize-both">Resize Type: both</label>
-                <TextArea {...args} resizeType="both" id="resize-both" />
+                <LabeledField
+                    label="Resize Type: both"
+                    field={<TextArea {...args} resizeType="both" />}
+                />
                 <br />
-                <label htmlFor="resize-vertical">Resize Type: vertical</label>
-                <TextArea
-                    {...args}
-                    resizeType="vertical"
-                    id="resize-vertical"
+                <LabeledField
+                    label="Resize Type: vertical"
+                    field={<TextArea {...args} resizeType="vertical" />}
                 />
                 <br />
-                <label htmlFor="resize-horizontal">
-                    Resize Type: horizontal
-                </label>
-                <TextArea
-                    {...args}
-                    resizeType="horizontal"
-                    id="resize-horizontal"
+                <LabeledField
+                    label="Resize Type: horizontal"
+                    field={<TextArea {...args} resizeType="horizontal" />}
                 />
                 <br />
-                <label htmlFor="resize-none">Resize Type: none</label>
-                <TextArea {...args} resizeType="none" id="resize-none" />
+                <LabeledField
+                    label="Resize Type: none"
+                    field={<TextArea {...args} resizeType="none" />}
+                />
                 <br />
-                <label htmlFor="resize-default">
-                    Resize Type: default (both)
-                </label>
-                <TextArea {...args} id="resize-default" />
+                <LabeledField
+                    label="Resize Type: default (both)"
+                    field={<TextArea {...args} />}
+                />
             </div>
         );
     },
@@ -660,11 +649,13 @@ export const Light: StoryComponentType = {
         light: true,
         value: "Text",
     },
-    render: ControlledTextArea,
     parameters: {
         backgrounds: {
             default: "darkBlue",
         },
+        chromatic: {
+            disableSnapshot: true, // Disabling because it's covered in variants stories
+        },
     },
 };
 
diff --git a/__docs__/wonder-blocks-form/text-field-variants.stories.tsx b/__docs__/wonder-blocks-form/text-field-variants.stories.tsx
index 4e0656c1b..0734cd035 100644
--- a/__docs__/wonder-blocks-form/text-field-variants.stories.tsx
+++ b/__docs__/wonder-blocks-form/text-field-variants.stories.tsx
@@ -4,8 +4,9 @@ import type {Meta, StoryObj} from "@storybook/react";
 
 import {View} from "@khanacademy/wonder-blocks-core";
 import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
-import {LabelLarge, LabelMedium} from "@khanacademy/wonder-blocks-typography";
+import {LabelLarge} from "@khanacademy/wonder-blocks-typography";
 import {TextField} from "@khanacademy/wonder-blocks-form";
+import {LabeledField} from "@khanacademy/wonder-blocks-labeled-field";
 
 /**
  * The following stories are used to generate the pseudo states for the
@@ -58,16 +59,16 @@ const States = (props: {
                 {states.map((scenario) => {
                     return (
                         <View style={styles.scenario} key={scenario.label}>
-                            <LabelMedium
-                                style={props.light && {color: color.white}}
-                            >
-                                {scenario.label}
-                            </LabelMedium>
-                            <TextField
-                                value=""
-                                onChange={() => {}}
-                                {...props}
-                                {...scenario.props}
+                            <LabeledField
+                                label={scenario.label}
+                                field={
+                                    <TextField
+                                        value=""
+                                        onChange={() => {}}
+                                        {...props}
+                                        {...scenario.props}
+                                    />
+                                }
                             />
                         </View>
                     );
diff --git a/__docs__/wonder-blocks-form/text-field.stories.tsx b/__docs__/wonder-blocks-form/text-field.stories.tsx
index 89ca9e2e6..f1fd884f5 100644
--- a/__docs__/wonder-blocks-form/text-field.stories.tsx
+++ b/__docs__/wonder-blocks-form/text-field.stories.tsx
@@ -3,15 +3,11 @@ import * as React from "react";
 import {StyleSheet} from "aphrodite";
 import type {Meta, StoryObj} from "@storybook/react";
 
-import {PropsFor, View, Text as _Text} from "@khanacademy/wonder-blocks-core";
+import {PropsFor, View} from "@khanacademy/wonder-blocks-core";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
 import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
 import Button from "@khanacademy/wonder-blocks-button";
-import {
-    LabelLarge,
-    Body,
-    LabelSmall,
-} from "@khanacademy/wonder-blocks-typography";
+import {LabelLarge, Body} from "@khanacademy/wonder-blocks-typography";
 
 import {TextField} from "@khanacademy/wonder-blocks-form";
 import packageConfig from "../../packages/wonder-blocks-form/package.json";
@@ -19,6 +15,7 @@ import packageConfig from "../../packages/wonder-blocks-form/package.json";
 import ComponentInfo from "../../.storybook/components/component-info";
 import TextFieldArgTypes from "./text-field.argtypes";
 import {validateEmail, validatePhoneNumber} from "./form-utilities";
+import LabeledField from "../../packages/wonder-blocks-labeled-field/src/components/labeled-field";
 
 /**
  * A TextField is an element used to accept a single line of text from the user.
@@ -38,6 +35,7 @@ export default {
 } as Meta<typeof TextField>;
 
 type StoryComponentType = StoryObj<typeof TextField>;
+type ControlledStoryComponentType = StoryObj<typeof ControlledTextField>;
 
 export const Default: StoryComponentType = {
     args: {
@@ -91,43 +89,48 @@ Text.parameters = {
     },
 };
 
-export const Required: StoryComponentType = () => {
-    const [value, setValue] = React.useState("");
+const ControlledTextField = (
+    storyArgs: PropsFor<typeof TextField> & {label?: string},
+) => {
+    const {label, ...args} = storyArgs;
+    const [value, setValue] = React.useState(args.value || "");
+    const [error, setError] = React.useState<string | null | undefined>(null);
 
     const handleChange = (newValue: string) => {
         setValue(newValue);
     };
 
-    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-        if (event.key === "Enter") {
-            event.currentTarget.blur();
-        }
-    };
-
     return (
-        <TextField
-            id="tf-2"
-            type="text"
-            value={value}
-            onChange={handleChange}
-            onKeyDown={handleKeyDown}
-            required={true}
+        <LabeledField
+            label={label || "Text Field"}
+            errorMessage={error || (args.error && "Error from error prop")}
+            field={
+                <TextField
+                    {...args}
+                    value={value}
+                    onChange={handleChange}
+                    onValidate={setError}
+                />
+            }
         />
     );
 };
 
-Required.parameters = {
-    docs: {
-        description: {
-            story: `A required field will have error styling if the
-        field is left blank. To observe this, type something into the
-        field, backspace all the way, and then shift focus out of the field.`,
-        },
+/**
+ * A required field will have error styling if the field is left blank. To
+ * observe this, type something into the field, backspace all the way,
+ * and then shift focus out of the field.
+ */
+export const Required: StoryComponentType = {
+    args: {
+        required: true,
     },
-    chromatic: {
-        // Disabling snapshot because it doesn't show the error style
-        // until after the user interacts with this field.
-        disableSnapshot: true,
+    render: ControlledTextField,
+    parameters: {
+        chromatic: {
+            // Disabling because this doesn't test anything visual.
+            disableSnapshot: true,
+        },
     },
 };
 
@@ -193,7 +196,6 @@ Number.parameters = {
 export const Password: StoryComponentType = () => {
     const [value, setValue] = React.useState("Password123");
     const [errorMessage, setErrorMessage] = React.useState<any>();
-    const [focused, setFocused] = React.useState(false);
 
     const handleChange = (newValue: string) => {
         setValue(newValue);
@@ -218,35 +220,23 @@ export const Password: StoryComponentType = () => {
         }
     };
 
-    const handleFocus = () => {
-        setFocused(true);
-    };
-
-    const handleBlur = () => {
-        setFocused(false);
-    };
-
     return (
-        <View>
-            <TextField
-                id="tf-4"
-                type="password"
-                value={value}
-                placeholder="Password"
-                validate={validate}
-                onValidate={handleValidate}
-                onChange={handleChange}
-                onKeyDown={handleKeyDown}
-                onFocus={handleFocus}
-                onBlur={handleBlur}
-            />
-            {!focused && errorMessage && (
-                <View>
-                    <Strut size={spacing.xSmall_8} />
-                    <_Text style={styles.errorMessage}>{errorMessage}</_Text>
-                </View>
-            )}
-        </View>
+        <LabeledField
+            label="Password"
+            errorMessage={errorMessage}
+            field={
+                <TextField
+                    id="tf-4"
+                    type="password"
+                    value={value}
+                    placeholder="Password"
+                    validate={validate}
+                    onValidate={handleValidate}
+                    onChange={handleChange}
+                    onKeyDown={handleKeyDown}
+                />
+            }
+        />
     );
 };
 
@@ -264,7 +254,6 @@ Password.parameters = {
 export const Email: StoryComponentType = () => {
     const [value, setValue] = React.useState("khan@khanacademy.org");
     const [errorMessage, setErrorMessage] = React.useState<any>();
-    const [focused, setFocused] = React.useState(false);
 
     const handleChange = (newValue: string) => {
         setValue(newValue);
@@ -280,35 +269,23 @@ export const Email: StoryComponentType = () => {
         }
     };
 
-    const handleFocus = () => {
-        setFocused(true);
-    };
-
-    const handleBlur = () => {
-        setFocused(false);
-    };
-
     return (
-        <View>
-            <TextField
-                id="tf-5"
-                type="email"
-                value={value}
-                placeholder="Email"
-                validate={validateEmail}
-                onValidate={handleValidate}
-                onChange={handleChange}
-                onKeyDown={handleKeyDown}
-                onFocus={handleFocus}
-                onBlur={handleBlur}
-            />
-            {!focused && errorMessage && (
-                <View>
-                    <Strut size={spacing.xSmall_8} />
-                    <_Text style={styles.errorMessage}>{errorMessage}</_Text>
-                </View>
-            )}
-        </View>
+        <LabeledField
+            label="Email"
+            errorMessage={errorMessage}
+            field={
+                <TextField
+                    id="tf-5"
+                    type="email"
+                    value={value}
+                    placeholder="Email"
+                    validate={validateEmail}
+                    onValidate={handleValidate}
+                    onChange={handleChange}
+                    onKeyDown={handleKeyDown}
+                />
+            }
+        />
     );
 };
 
@@ -326,7 +303,6 @@ Email.parameters = {
 export const Telephone: StoryComponentType = () => {
     const [value, setValue] = React.useState("123-456-7890");
     const [errorMessage, setErrorMessage] = React.useState<any>();
-    const [focused, setFocused] = React.useState(false);
 
     const handleChange = (newValue: string) => {
         setValue(newValue);
@@ -342,35 +318,23 @@ export const Telephone: StoryComponentType = () => {
         }
     };
 
-    const handleFocus = () => {
-        setFocused(true);
-    };
-
-    const handleBlur = () => {
-        setFocused(false);
-    };
-
     return (
-        <View>
-            <TextField
-                id="tf-6"
-                type="tel"
-                value={value}
-                placeholder="Telephone"
-                validate={validatePhoneNumber}
-                onValidate={handleValidate}
-                onChange={handleChange}
-                onKeyDown={handleKeyDown}
-                onFocus={handleFocus}
-                onBlur={handleBlur}
-            />
-            {!focused && errorMessage && (
-                <View>
-                    <Strut size={spacing.xSmall_8} />
-                    <_Text style={styles.errorMessage}>{errorMessage}</_Text>
-                </View>
-            )}
-        </View>
+        <LabeledField
+            label="Telephone"
+            errorMessage={errorMessage}
+            field={
+                <TextField
+                    id="tf-6"
+                    type="tel"
+                    value={value}
+                    placeholder="Telephone"
+                    validate={validatePhoneNumber}
+                    onValidate={handleValidate}
+                    onChange={handleChange}
+                    onKeyDown={handleKeyDown}
+                />
+            }
+        />
     );
 };
 
@@ -385,75 +349,6 @@ Telephone.parameters = {
     },
 };
 
-const ControlledTextField = (args: PropsFor<typeof TextField>) => {
-    const [value, setValue] = React.useState(args.value || "");
-    const [error, setError] = React.useState<string | null | undefined>(null);
-
-    const handleChange = (newValue: string) => {
-        setValue(newValue);
-    };
-
-    return (
-        <View>
-            <TextField
-                {...args}
-                value={value}
-                onChange={handleChange}
-                onValidate={setError}
-            />
-            <Strut size={spacing.xxSmall_6} />
-            {(error || args.error) && (
-                <LabelSmall style={styles.errorMessage}>
-                    {error || "Error from error prop"}
-                </LabelSmall>
-            )}
-        </View>
-    );
-};
-
-function ErrorRender(args: PropsFor<typeof TextField>) {
-    const [value, setValue] = React.useState("khan");
-    const [errorMessage, setErrorMessage] = React.useState<any>();
-
-    const handleChange = (newValue: string) => {
-        setValue(newValue);
-    };
-
-    const handleValidate = (errorMessage?: string | null) => {
-        setErrorMessage(errorMessage);
-    };
-
-    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-        if (event.key === "Enter") {
-            event.currentTarget.blur();
-        }
-    };
-
-    return (
-        <View>
-            <TextField
-                id="tf-7"
-                type="email"
-                placeholder="Email"
-                validate={validateEmail}
-                onValidate={handleValidate}
-                onKeyDown={handleKeyDown}
-                {...args}
-                value={value}
-                onChange={handleChange}
-            />
-            {(errorMessage || args.error) && (
-                <View>
-                    <Strut size={spacing.xxSmall_6} />
-                    <LabelSmall style={styles.errorMessage}>
-                        {errorMessage || "Error from error prop"}
-                    </LabelSmall>
-                </View>
-            )}
-        </View>
-    );
-}
-
 /**
  * If the `error` prop is set to true, the TextField will have error styling and
  * `aria-invalid` set to `true`.
@@ -464,11 +359,13 @@ function ErrorRender(args: PropsFor<typeof TextField>) {
  * Note: The `required` and `validate` props can also put the TextField in an
  * error state.
  */
-export const Error: StoryComponentType = {
-    render: ErrorRender,
+export const Error: ControlledStoryComponentType = {
+    render: ControlledTextField,
     args: {
         error: true,
         validate: undefined,
+        value: "khan",
+        label: "Error state using error prop",
     },
     parameters: {
         chromatic: {
@@ -489,8 +386,13 @@ export const Error: StoryComponentType = {
  * - aria-invalid="true" if there is an error.
  * - aria-invalid="false" if there is no error.
  */
-export const ErrorFromValidation: StoryComponentType = {
-    render: ErrorRender,
+export const ErrorFromValidation: ControlledStoryComponentType = {
+    render: ControlledTextField,
+    args: {
+        label: "Error state from validation",
+        validate: validateEmail,
+        value: "khan",
+    },
     parameters: {
         chromatic: {
             // Disabling because this doesn't test anything visual.
@@ -535,22 +437,21 @@ export const ErrorFromPropAndValidation = (
     const errorMessage = validationErrorMessage || backendErrorMessage;
 
     return (
-        <View>
-            <TextField
-                {...args}
-                value={value}
-                onChange={handleChange}
-                validate={validateEmail}
-                onValidate={setValidationErrorMessage}
-                error={!!errorMessage}
+        <View style={{gap: spacing.medium_16}}>
+            <LabeledField
+                label="Error state from prop and validation"
+                errorMessage={errorMessage}
+                field={
+                    <TextField
+                        {...args}
+                        value={value}
+                        onChange={handleChange}
+                        validate={validateEmail}
+                        onValidate={setValidationErrorMessage}
+                        error={!!errorMessage}
+                    />
+                }
             />
-            <Strut size={spacing.xxSmall_6} />
-            {errorMessage && (
-                <LabelSmall style={styles.errorMessage}>
-                    {errorMessage}
-                </LabelSmall>
-            )}
-            <Strut size={spacing.xxSmall_6} />
             <Button
                 onClick={() => {
                     if (value === "test@test.com") {
@@ -602,53 +503,38 @@ export const InstantValidation: StoryComponentType = {
     render: (args) => {
         return (
             <View style={{gap: spacing.small_12}}>
-                <LabelSmall htmlFor="instant-validation-true-not-required">
-                    Validation on mount if there is a value
-                </LabelSmall>
                 <ControlledTextField
                     {...args}
-                    id="instant-validation-true-not-required"
+                    label="Validation on mount if there is a value"
                     value="invalid"
                 />
-                <LabelSmall htmlFor="instant-validation-true-not-required">
-                    Error shown immediately (instantValidation: true, required:
-                    false)
-                </LabelSmall>
                 <ControlledTextField
                     {...args}
-                    id="instant-validation-true-not-required"
+                    label="Error shown immediately (instantValidation: true, required:
+                    false)"
                     instantValidation={true}
                 />
-                <LabelSmall htmlFor="instant-validation-false-not-required">
-                    Error shown onBlur (instantValidation: false, required:
-                    false)
-                </LabelSmall>
                 <ControlledTextField
                     {...args}
-                    id="instant-validation-false-not-required"
+                    label="Error shown onBlur (instantValidation: false, required:
+                    false)"
                     instantValidation={false}
                 />
-
-                <LabelSmall htmlFor="instant-validation-true-required">
-                    Error shown immediately after clearing the value
-                    (instantValidation: true, required: true)
-                </LabelSmall>
                 <ControlledTextField
                     {...args}
+                    label="Error shown immediately after clearing the value
+                    (instantValidation: true, required: true)"
                     validate={undefined}
                     value="T"
                     id="instant-validation-true-required"
                     instantValidation={true}
                     required="Required"
                 />
-                <LabelSmall htmlFor="instant-validation-false-required">
-                    Error shown on blur if it is empty (instantValidation:
-                    false, required: true)
-                </LabelSmall>
                 <ControlledTextField
                     {...args}
+                    label="Error shown on blur if it is empty (instantValidation:
+                    false, required: true)"
                     validate={undefined}
-                    id="instant-validation-false-required"
                     instantValidation={false}
                     required="Required"
                 />
@@ -663,133 +549,46 @@ export const InstantValidation: StoryComponentType = {
     },
 };
 
-export const Light: StoryComponentType = () => {
-    const [value, setValue] = React.useState("khan@khanacademy.org");
-    const [errorMessage, setErrorMessage] = React.useState<any>();
-    const [focused, setFocused] = React.useState(false);
-
-    const handleChange = (newValue: string) => {
-        setValue(newValue);
-    };
-
-    const handleValidate = (errorMessage?: string | null) => {
-        setErrorMessage(errorMessage);
-    };
-
-    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-        if (event.key === "Enter") {
-            event.currentTarget.blur();
-        }
-    };
-
-    const handleFocus = () => {
-        setFocused(true);
-    };
-
-    const handleBlur = () => {
-        setFocused(false);
-    };
-
-    return (
-        <View style={styles.darkBackground}>
-            <TextField
-                id="tf-9"
-                type="email"
-                value={value}
-                placeholder="Email"
-                light={true}
-                validate={validateEmail}
-                onValidate={handleValidate}
-                onChange={handleChange}
-                onKeyDown={handleKeyDown}
-                onFocus={handleFocus}
-                onBlur={handleBlur}
-            />
-            {!focused && errorMessage && (
-                <View>
-                    <Strut size={spacing.xSmall_8} />
-                    <_Text style={styles.errorMessageLight}>
-                        {errorMessage}
-                    </_Text>
-                </View>
-            )}
-        </View>
-    );
-};
-
-Light.parameters = {
-    docs: {
+export const Light: StoryComponentType = {
+    args: {
+        light: true,
+    },
+    parameters: {
+        backgrounds: {
+            default: "darkBlue",
+        },
         description: {
             story: `If the \`light\` prop is set to true,
         \`TextField\` will have light styling. This is intended to be used
         on a dark background. There is also a specific light styling for the
         error state, as seen in the \`ErrorLight\` story.`,
         },
+        chromatic: {
+            disableSnapshot: true, // Disable snapshot because it's covered by variants stories
+        },
     },
 };
 
-export const ErrorLight: StoryComponentType = () => {
-    const [value, setValue] = React.useState("khan");
-    const [errorMessage, setErrorMessage] = React.useState<any>();
-    const [focused, setFocused] = React.useState(false);
-
-    const handleChange = (newValue: string) => {
-        setValue(newValue);
-    };
-
-    const handleValidate = (errorMessage?: string | null) => {
-        setErrorMessage(errorMessage);
-    };
-
-    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-        if (event.key === "Enter") {
-            event.currentTarget.blur();
-        }
-    };
-
-    const handleFocus = () => {
-        setFocused(true);
-    };
-
-    const handleBlur = () => {
-        setFocused(false);
-    };
-
-    return (
-        <View style={styles.darkBackground}>
-            <TextField
-                id="tf-7"
-                type="email"
-                value={value}
-                placeholder="Email"
-                light={true}
-                validate={validateEmail}
-                onValidate={handleValidate}
-                onChange={handleChange}
-                onKeyDown={handleKeyDown}
-                onFocus={handleFocus}
-                onBlur={handleBlur}
-            />
-            {!focused && errorMessage && (
-                <View>
-                    <Strut size={spacing.xSmall_8} />
-                    <_Text style={styles.errorMessage}>{errorMessage}</_Text>
-                </View>
-            )}
-        </View>
-    );
-};
-
-ErrorLight.parameters = {
-    docs: {
-        description: {
-            story: `If an input value fails validation and the
+export const ErrorLight: StoryComponentType = {
+    args: {
+        light: true,
+        error: true,
+        value: "khan",
+    },
+    parameters: {
+        backgrounds: {
+            default: "darkBlue",
+        },
+        docs: {
+            description: {
+                story: `If an input value fails validation and the
         \`light\` prop is true, \`TextField\` will have light error styling.`,
+            },
+        },
+        chromatic: {
+            // Disabling because this doesn't test anything visual.
+            disableSnapshot: true,
         },
-    },
-    chromatic: {
-        // Disabling because this doesn't test anything visual.
-        disableSnapshot: true,
     },
 };
 
@@ -1072,18 +871,6 @@ AutoComplete.parameters = {
 };
 
 const styles = StyleSheet.create({
-    errorMessage: {
-        color: color.red,
-        paddingLeft: spacing.xxxSmall_4,
-    },
-    errorMessageLight: {
-        color: color.white,
-        paddingLeft: spacing.xxxSmall_4,
-    },
-    darkBackground: {
-        backgroundColor: color.darkBlue,
-        padding: spacing.medium_16,
-    },
     customField: {
         backgroundColor: color.darkBlue,
         color: color.white,
diff --git a/__docs__/wonder-blocks-search-field/search-field-variants.stories.tsx b/__docs__/wonder-blocks-search-field/search-field-variants.stories.tsx
index e821674f9..e6c839874 100644
--- a/__docs__/wonder-blocks-search-field/search-field-variants.stories.tsx
+++ b/__docs__/wonder-blocks-search-field/search-field-variants.stories.tsx
@@ -4,8 +4,9 @@ import type {Meta, StoryObj} from "@storybook/react";
 
 import {View} from "@khanacademy/wonder-blocks-core";
 import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
-import {LabelLarge, LabelMedium} from "@khanacademy/wonder-blocks-typography";
+import {LabelLarge} from "@khanacademy/wonder-blocks-typography";
 import SearchField from "@khanacademy/wonder-blocks-search-field";
+import {LabeledField} from "@khanacademy/wonder-blocks-labeled-field";
 
 /**
  * The following stories are used to generate the pseudo states for the
@@ -58,16 +59,16 @@ const States = (props: {
                 {states.map((scenario) => {
                     return (
                         <View style={styles.scenario} key={scenario.label}>
-                            <LabelMedium
-                                style={props.light && {color: color.white}}
-                            >
-                                {scenario.label}
-                            </LabelMedium>
-                            <SearchField
-                                value=""
-                                onChange={() => {}}
-                                {...props}
-                                {...scenario.props}
+                            <LabeledField
+                                label={scenario.label}
+                                field={
+                                    <SearchField
+                                        value=""
+                                        onChange={() => {}}
+                                        {...props}
+                                        {...scenario.props}
+                                    />
+                                }
                             />
                         </View>
                     );
diff --git a/__docs__/wonder-blocks-search-field/search-field.stories.tsx b/__docs__/wonder-blocks-search-field/search-field.stories.tsx
index 9b15c8567..2dd953ebe 100644
--- a/__docs__/wonder-blocks-search-field/search-field.stories.tsx
+++ b/__docs__/wonder-blocks-search-field/search-field.stories.tsx
@@ -6,13 +6,14 @@ import type {Meta, StoryObj} from "@storybook/react";
 import {PropsFor, View} from "@khanacademy/wonder-blocks-core";
 import Button from "@khanacademy/wonder-blocks-button";
 import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
-import {LabelLarge, LabelSmall} from "@khanacademy/wonder-blocks-typography";
+import {LabelLarge} from "@khanacademy/wonder-blocks-typography";
 
 import SearchField from "@khanacademy/wonder-blocks-search-field";
 
 import ComponentInfo from "../../.storybook/components/component-info";
 import packageConfig from "../../packages/wonder-blocks-search-field/package.json";
 import SearchFieldArgtypes from "./search-field.argtypes";
+import {LabeledField} from "@khanacademy/wonder-blocks-labeled-field";
 
 /**
  * `SearchField` helps users input text to search for relevant content. It is
@@ -52,7 +53,10 @@ export default {
 
 type StoryComponentType = StoryObj<typeof SearchField>;
 
-const Template = (args: PropsFor<typeof SearchField>) => {
+const Template = (
+    storyArgs: PropsFor<typeof SearchField> & {label?: string},
+) => {
+    const {label, ...args} = storyArgs;
     const [value, setValue] = React.useState(args?.value || "");
     const [errorMessage, setErrorMessage] = React.useState<
         string | null | undefined
@@ -69,22 +73,25 @@ const Template = (args: PropsFor<typeof SearchField>) => {
     };
 
     return (
-        <View style={{gap: spacing.xSmall_8}}>
-            <SearchField
-                {...args}
-                value={value}
-                onChange={handleChange}
-                onKeyDown={(e) => {
-                    action("onKeyDown")(e);
-                    handleKeyDown(e);
-                }}
-                onValidate={setErrorMessage}
+        <View>
+            <LabeledField
+                label={label || "Search Field"}
+                field={
+                    <SearchField
+                        {...args}
+                        value={value}
+                        onChange={handleChange}
+                        onKeyDown={(e) => {
+                            action("onKeyDown")(e);
+                            handleKeyDown(e);
+                        }}
+                        onValidate={setErrorMessage}
+                    />
+                }
+                errorMessage={
+                    errorMessage || (args.error && "Error from error prop")
+                }
             />
-            {(errorMessage || args.error) && (
-                <LabelSmall style={styles.errorMessage}>
-                    {errorMessage || "Error from error prop"}
-                </LabelSmall>
-            )}
         </View>
     );
 };
@@ -262,24 +269,19 @@ export const Validation: StoryComponentType = {
     render: (args) => {
         return (
             <View style={{gap: spacing.small_12}}>
-                <LabelSmall htmlFor="instant-validation-true">
-                    Validation on mount if there is a value
-                </LabelSmall>
-                <Template {...args} id="instant-validation-true" value="T" />
-                <LabelSmall htmlFor="instant-validation-true">
-                    Error shown immediately (instantValidation: true)
-                </LabelSmall>
                 <Template
                     {...args}
-                    id="instant-validation-true"
+                    label="Validation on mount if there is a value"
+                    value="T"
+                />
+                <Template
+                    {...args}
+                    label="Error shown immediately (instantValidation: true)"
                     instantValidation={true}
                 />
-                <LabelSmall htmlFor="instant-validation-false">
-                    Error shown onBlur (instantValidation: false)
-                </LabelSmall>
                 <Template
                     {...args}
-                    id="instant-validation-false"
+                    label="Error shown onBlur (instantValidation: false)"
                     instantValidation={false}
                 />
             </View>
@@ -298,8 +300,4 @@ const styles = StyleSheet.create({
         background: color.darkBlue,
         padding: spacing.medium_16,
     },
-    errorMessage: {
-        color: color.red,
-        paddingLeft: spacing.xxxSmall_4,
-    },
 });