From d9bc865b924aea41f1effd7f88c6e6da0cb8185f Mon Sep 17 00:00:00 2001
From: Bea Esguerra <beaesguerra@users.noreply.github.com>
Date: Thu, 19 Dec 2024 14:43:16 -0700
Subject: [PATCH] LabeledField: integrate with field components and fixes
 (#2399)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary:
Putting LabeledField work together with field updates and addressing some issues. Fixes include:

TextField and TextArea:
- Set `aria-required` based on `required` prop
- Always clear error state onChange if instantValidation is false so that external error messages set using the `error` prop can still be cleared (This is useful for clearing any backend errors when the input value changes)

LabeledField updates:
- Let `required` prop be a boolean or string so it can be passed down to the field prop
- Conditionally set spacing above the error message depending on if there is an error message
- Set `required`, `error` and `light` props for LabeledField and field component if it is set on either LabeledField or field component
- Rename `error` prop to `errorMessage` (This technically isn't a breaking change since the batch of labeled field work hasn't been released yet, labeled field work is currently in the `feature/labeled-field` branch)

Stories/docs:
- Add docs on best practices for forms and fields
- Add docs around LabeledTextField deprecation in favour of LabeledField + TextField
- Update LabeledField examples and docs. Includes examples for validation and moving focus to the first field that has an error message after form submission


Issue: WB-1783

## Test plan:
1. Review new docs:
- LabeledField (`?path=/docs/packages-labeledfield--docs`)
- LabeledTextField (`/?path=/docs/packages-form-labeledtextfield-deprecated--docs`)
- Form Best Practices (`?path=/docs/packages-form-overview--docs`)

2. Test LabeledField with Field Validation: Confirm validation works as expected
- LabeledField Required story (`?path=/story/packages-labeledfield--required`)
  - Tabbing through fields without entering anything
  - Submitting without filling in fields
  - Inputting/selecting a value and removing it
- LabeledField Validation story (`?path=/story/packages-labeledfield--validation`)
  - Triggering validation errors
  - Clearing validation errors when selected value changes
  - Submitting the form to see an example for backend errors

Note: Did some preliminary testing with LabeledField and new validation features. Different screen reader and browser combinations had different behaviours around announcing errors so I created WB-1842 for more testing + documentation.

Author: beaesguerra

Reviewers: beaesguerra, jandrade

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), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Chromatic - Build on regular PRs / chromatic (ubuntu-latest, 20.x), ⏭️  Chromatic - Skip on Release PR (changesets), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ gerald, ⏭️  dependabot

Pull Request URL: https://github.com/Khan/wonder-blocks/pull/2399
---
 .changeset/chilly-mirrors-add.md              |   5 +
 .changeset/metal-maps-move.md                 |   5 +
 .changeset/slow-otters-crash.md               |   5 +
 .changeset/smart-grapes-serve.md              |   5 +
 .changeset/spicy-rivers-marry.md              |   5 +
 __docs__/wonder-blocks-form/_overview_.mdx    |  52 ++-
 __docs__/wonder-blocks-form/accessibility.mdx |  34 --
 .../accessibility.stories.tsx                 |   2 +-
 .../labeled-text-field.stories.tsx            |  74 +++-
 .../labeled-field.stories.tsx                 | 334 ++++++++++++++++--
 .../components/__tests__/text-area.test.tsx   |  72 +++-
 .../components/__tests__/text-field.test.tsx  |  68 +++-
 .../src/components/text-area.tsx              |   1 +
 .../src/components/text-field.tsx             |   1 +
 .../src/hooks/use-field-validation.ts         |  14 +-
 .../__tests__/labeled-field.test.tsx          | 219 ++++++++----
 .../src/components/labeled-field.tsx          |  89 +++--
 .../tsconfig-build.json                       |   1 -
 18 files changed, 791 insertions(+), 195 deletions(-)
 create mode 100644 .changeset/chilly-mirrors-add.md
 create mode 100644 .changeset/metal-maps-move.md
 create mode 100644 .changeset/slow-otters-crash.md
 create mode 100644 .changeset/smart-grapes-serve.md
 create mode 100644 .changeset/spicy-rivers-marry.md
 delete mode 100644 __docs__/wonder-blocks-form/accessibility.mdx

diff --git a/.changeset/chilly-mirrors-add.md b/.changeset/chilly-mirrors-add.md
new file mode 100644
index 000000000..4d82d7b9d
--- /dev/null
+++ b/.changeset/chilly-mirrors-add.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-form": patch
+---
+
+TextField and TextArea: Set `aria-required` if it is required
diff --git a/.changeset/metal-maps-move.md b/.changeset/metal-maps-move.md
new file mode 100644
index 000000000..f4a0999de
--- /dev/null
+++ b/.changeset/metal-maps-move.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-form": patch
+---
+
+TextField and TextArea validation: Always clear error message onChange if instantValidation=false so externally set error state can still be cleared
diff --git a/.changeset/slow-otters-crash.md b/.changeset/slow-otters-crash.md
new file mode 100644
index 000000000..0888206d7
--- /dev/null
+++ b/.changeset/slow-otters-crash.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-labeled-field": patch
+---
+
+Set required, error and light props for LabeledField and field component if it is set on either LabeledField or field component
diff --git a/.changeset/smart-grapes-serve.md b/.changeset/smart-grapes-serve.md
new file mode 100644
index 000000000..5835a09e5
--- /dev/null
+++ b/.changeset/smart-grapes-serve.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-labeled-field": patch
+---
+
+Use `errorMessage` prop instead of `error` prop for consistency (`error` prop is used for boolean props in form field components).
diff --git a/.changeset/spicy-rivers-marry.md b/.changeset/spicy-rivers-marry.md
new file mode 100644
index 000000000..be94ec3c4
--- /dev/null
+++ b/.changeset/spicy-rivers-marry.md
@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-labeled-field": patch
+---
+
+LabeledField: Let `required` prop be a boolean or string so it can be passed down to the field prop
diff --git a/__docs__/wonder-blocks-form/_overview_.mdx b/__docs__/wonder-blocks-form/_overview_.mdx
index 78c7e733d..cdece2c84 100644
--- a/__docs__/wonder-blocks-form/_overview_.mdx
+++ b/__docs__/wonder-blocks-form/_overview_.mdx
@@ -1,4 +1,6 @@
-import {Meta} from "@storybook/blocks";
+import {Meta, Story, Canvas} from "@storybook/blocks";
+import * as AccessibilityStories from './accessibility.stories';
+import * as LabeledFieldStories from '../wonder-blocks-labeled-field/labeled-field.stories';
 
 <Meta
     title="Packages / Form / Overview"
@@ -6,5 +8,51 @@ import {Meta} from "@storybook/blocks";
 
 # Form
 
-`wonder-blocks-form` provides building blocks form Form components, including
+`wonder-blocks-form` provides building blocks for Form components, including
 TextField, TextArea, Choice, Checkbox, RadioButton, etc.
+
+
+## Best Practices
+
+### Form Field Labels
+
+- Use form field components with the `LabeledField` component. `LabeledField`
+provides a consistent pattern for things like the label,
+description, required indicator, and error message for a field. It will also
+provide unique ids automatically and wire up the proper attributes for
+accessibility. Use `LabeledField` for the following components:
+  - `TextField`
+  - `TextArea`
+  - `SingleSelect`
+  - `MultiSelect`
+  - `SearchField`
+- If you are using the `CheckboxGroup` or `RadioGroup` components, use the
+`label` prop for an accessible field label. This uses `<fieldset>` and
+`<legend>` elements instead of a `<label>` since the label is for a group of
+related controls. See [Grouping Controls](https://www.w3.org/WAI/tutorials/forms/grouping/)
+for more details!
+- For custom implementations of field labels:
+  - Make sure the id of the form field element is unique to the page
+  - When using Wonder Blocks typography components for the form field label,
+  set the `tag` prop to `label` to change the underlying element to render and
+  use the `htmlFor` prop. Here is an example of a form field label using Wonder
+  Blocks components `LabelMedium` and `TextArea`:
+
+<Canvas of={AccessibilityStories.FormLabelExample} />
+
+### Error Validation
+
+- For fields like `TextField`, `TextArea`, and `SearchField` prefer setting
+`instantValidation=false`. This makes it so validation occurs on blur after a
+user is done interacting with a field.
+- Avoid disabling form submission buttons. There could be exceptions if the
+button is for one field.
+- If there are errors after a form is submitted, programatically move the user's
+focus to the first field with an error.
+
+Here is an example of validation behaviour in a form. It validates when a
+user is done filling out a field and also shows a validation error once
+the form is submitted (this simulates a backend validation error). When the form
+is submitted, the focus is also moved to the first field with an error.
+
+<Canvas of={LabeledFieldStories.Validation} />
diff --git a/__docs__/wonder-blocks-form/accessibility.mdx b/__docs__/wonder-blocks-form/accessibility.mdx
deleted file mode 100644
index 21a876f9a..000000000
--- a/__docs__/wonder-blocks-form/accessibility.mdx
+++ /dev/null
@@ -1,34 +0,0 @@
-import {Meta, Story, Canvas} from "@storybook/blocks";
-import * as AccessibilityStories from './accessibility.stories';
-
-<Meta of={AccessibilityStories} />
-
-# Form Accessibility
-
-## Form Field Labels
-
-Form fields should have an associated `<label>` element that has the `htmlFor`
-prop set to the `id` of the form field element. This is helpful for
-screenreaders so that it can communicate the relationship between the label and
-the form field.
-
-### Guidelines
-- Make sure the id of the form field element is unique to the page
-- Consider using the `LabeledTextField` component if you are using `TextField`.
-This will automatically wire up the label and text input. (Note: we will have
-a more generic `LabelField` component later on to provide this functionality
-for other form fields.)
-- If you are using the `CheckboxGroup` or `RadioGroup` components, the accessible
-label for the field is already built-in when the `label` prop is used. This
-uses `<fieldset>` and `<legend>` elements instead of a `<label>` since the label
-is for a group of related controls. See
-[Grouping Controls](https://www.w3.org/WAI/tutorials/forms/grouping/)
-for more details!
-- When using Wonder Blocks typography components for form labels, the `tag`
-prop can be set to `label` to change the underlying element to render.
-
-
-Here is an example of a form field label using Wonder Blocks components
-`LabelMedium` and `TextArea`:
-
-<Canvas of={AccessibilityStories.FormLabelExample} />
diff --git a/__docs__/wonder-blocks-form/accessibility.stories.tsx b/__docs__/wonder-blocks-form/accessibility.stories.tsx
index 447719853..3bd9b57e5 100644
--- a/__docs__/wonder-blocks-form/accessibility.stories.tsx
+++ b/__docs__/wonder-blocks-form/accessibility.stories.tsx
@@ -6,7 +6,7 @@ import {TextArea} from "@khanacademy/wonder-blocks-form";
 import {spacing} from "@khanacademy/wonder-blocks-tokens";
 
 export default {
-    title: "Packages / Form / Accessibility",
+    title: "Packages / Form / Overview", // Named the same as overiew docs to hide it from the sidebar
     parameters: {
         previewTabs: {
             canvas: {
diff --git a/__docs__/wonder-blocks-form/labeled-text-field.stories.tsx b/__docs__/wonder-blocks-form/labeled-text-field.stories.tsx
index 06c387218..f3e05e61b 100644
--- a/__docs__/wonder-blocks-form/labeled-text-field.stories.tsx
+++ b/__docs__/wonder-blocks-form/labeled-text-field.stories.tsx
@@ -13,13 +13,18 @@ import packageConfig from "../../packages/wonder-blocks-form/package.json";
 
 import ComponentInfo from "../../.storybook/components/component-info";
 import LabeledTextFieldArgTypes from "./labeled-text-field.argtypes";
+import {LabeledField} from "@khanacademy/wonder-blocks-labeled-field";
+import TextField from "../../packages/wonder-blocks-form/src/components/text-field";
 
 /**
+ * ** DEPRECATED: Please use LabeledField with TextField instead. See [Migration
+ * story](#migration%20to%20labeled%20field) for more details. **
+ *
  * A LabeledTextField is an element used to accept a single line of text from
  * the user paired with a label, description, and error field elements.
  */
 export default {
-    title: "Packages / Form / LabeledTextField",
+    title: "Packages / Form / LabeledTextField (Deprecated)",
     component: LabeledTextField,
     parameters: {
         componentSubtitle: (
@@ -56,6 +61,73 @@ export const Default: StoryComponentType = {
     },
 };
 
+/**
+ * Please use the **LabeledField** component with the **TextField** component
+ * instead of the `LabeledTextField` component.
+ *
+ * LabeledField is more flexible since it is decoupled from specific field
+ * components. It also allows use of everything supported by TextField since it
+ * is used directly.
+ *
+ * Note: Validation is now handled by the specific field component and an error
+ * message is passed into LabeledField. For TextField validation, it is preferred
+ * that validation occurs on blur once a user is done interacting with a field.
+ * This can be done using `instantValidation=false` on `TextField`, see TextField
+ * validation docs for more details!
+ *
+ * This example shows how LabeledTextField functionality can be mapped to
+ * LabeledField and TextField components.
+ */
+export const MigrationToLabeledField: StoryComponentType = {
+    render: function Story(args) {
+        const [labeledTextFieldValue, setLabeledTextFieldValue] =
+            React.useState("");
+        const [textFieldValue, setTextFieldValue] = React.useState("");
+        const [textFieldErrorMessage, setTextFieldErrorMessage] =
+            React.useState<string | null | undefined>("");
+
+        const description = "Enter text that is at least 5 characters long.";
+        const placeholder = "Placeholder";
+        const required = "Custom required message";
+        const validate = (value: string) => {
+            if (value.length < 5) {
+                return "Should be 5 or more characters";
+            }
+        };
+        return (
+            <View style={{gap: spacing.xxxLarge_64}}>
+                <LabeledTextField
+                    {...args}
+                    label="Using LabeledTextField"
+                    description={description}
+                    value={labeledTextFieldValue}
+                    onChange={setLabeledTextFieldValue}
+                    required={required}
+                    placeholder={placeholder}
+                    validate={validate}
+                />
+                <LabeledField
+                    label="Using LabeledField with TextField (recommended)"
+                    description={description}
+                    required={required}
+                    errorMessage={textFieldErrorMessage}
+                    field={
+                        <TextField
+                            {...args}
+                            value={textFieldValue}
+                            onChange={setTextFieldValue}
+                            placeholder={placeholder}
+                            validate={validate}
+                            onValidate={setTextFieldErrorMessage}
+                            instantValidation={false}
+                        />
+                    }
+                />
+            </View>
+        );
+    },
+};
+
 export const Text: StoryComponentType = () => {
     const [value, setValue] = React.useState("Khan");
 
diff --git a/__docs__/wonder-blocks-labeled-field/labeled-field.stories.tsx b/__docs__/wonder-blocks-labeled-field/labeled-field.stories.tsx
index 668c51966..cc6575cef 100644
--- a/__docs__/wonder-blocks-labeled-field/labeled-field.stories.tsx
+++ b/__docs__/wonder-blocks-labeled-field/labeled-field.stories.tsx
@@ -27,6 +27,21 @@ import Button from "@khanacademy/wonder-blocks-button";
  *
  * It is highly recommended that all form fields should be used with the
  * `LabeledField` component so that our form fields are consistent and accessible.
+ *
+ * Tips for using LabeledField:
+ * - If the `errorMessage` prop is set on `LabeledField`, the `error` prop on the
+ * form field component will be auto-populated so it doesn't need to be set
+ * explicitly on the field
+ * - If the `required` prop is set on `LabeledField`, it will be passed onto the
+ * `field` prop component so it doesn't need to be set explicitly. If the `required`
+ * prop is set on the `field` component, it will also get set for `LabeledField`
+ * so that the required indicator is shown
+ * - If the `light` prop is set on either `LabeledField` or the `field` prop,
+ * both components will render in light mode
+ * - For TextField and TextArea, it is highly recommended that they are
+ * configured with `instantValidation=false` so that validation happens on blur.
+ * See Validation docs for those components for more details!
+ *
  */
 export default {
     title: "Packages / LabeledField",
@@ -43,18 +58,27 @@ export default {
 } as Meta<typeof LabeledField>;
 
 type StoryComponentType = StoryObj<typeof LabeledField>;
+type AllFieldsStoryComponentType = StoryObj<typeof AllFields>;
 
 export const Default: StoryComponentType = {
     args: {
         field: <TextField value="" onChange={() => {}} />,
         label: "Name",
         description: "Helpful description text.",
-        error: "Message about the error",
-        required: true,
+        errorMessage: "Message about the error",
+        required: "Custom required message",
     },
 };
 
-const AllFields = (args: PropsFor<typeof LabeledField>) => {
+const AllFields = (
+    storyArgs: PropsFor<typeof LabeledField> & {
+        shouldValidateInStory?: boolean;
+        showSubmitButtonInStory?: boolean;
+    },
+) => {
+    const {shouldValidateInStory, showSubmitButtonInStory, ...args} = storyArgs;
+
+    /** Values */
     const [textFieldValue, setTextFieldValue] = React.useState("");
     const [textAreaValue, setTextAreaValue] = React.useState("");
     const [singleSelectValue, setSingleSelectValue] = React.useState("");
@@ -63,38 +87,180 @@ const AllFields = (args: PropsFor<typeof LabeledField>) => {
     );
     const [searchValue, setSearchValue] = React.useState("");
 
+    /** Error messages */
+    const errorMessage =
+        typeof args.errorMessage === "string" ? args.errorMessage : "";
+    const [textFieldErrorMessage, setTextFieldErrorMessage] = React.useState<
+        string | null | undefined
+    >(errorMessage);
+    const [textAreaErrorMessage, setTextAreaErrorMessage] = React.useState<
+        string | null | undefined
+    >(errorMessage);
+    const [singleSelectErrorMessage, setSingleSelectErrorMessage] =
+        React.useState<string | null | undefined>(errorMessage);
+    const [multiSelectErrorMessage, setMultiSelectErrorMessage] =
+        React.useState<string | null | undefined>(errorMessage);
+    const [searchErrorMessage, setSearchErrorMessage] = React.useState<
+        string | null | undefined
+    >(errorMessage);
+
+    /** Refs */
+    const textFieldRef = React.createRef<HTMLInputElement>();
+    const textAreaRef = React.createRef<HTMLTextAreaElement>();
+    const singleSelectRef = React.createRef<HTMLButtonElement>();
+    const multiSelectRef = React.createRef<HTMLButtonElement>();
+    const searchRef = React.createRef<HTMLInputElement>();
+
+    const [isFormSubmitted, setIsFormSubmitted] = React.useState(false);
+
+    const moveFocusToFirstFieldWithError = React.useCallback(() => {
+        // The errors in the order they are presented, along with the refs
+        const errors = [
+            {message: textFieldErrorMessage, ref: textFieldRef},
+            {message: textAreaErrorMessage, ref: textAreaRef},
+            {message: singleSelectErrorMessage, ref: singleSelectRef},
+            {message: multiSelectErrorMessage, ref: multiSelectRef},
+            {message: searchErrorMessage, ref: searchRef},
+        ];
+
+        for (const error of errors) {
+            if (error.message) {
+                // Once a field with an error is found, focus on it and end the loop
+                error.ref?.current?.focus();
+                break;
+            }
+        }
+    }, [
+        multiSelectErrorMessage,
+        multiSelectRef,
+        searchErrorMessage,
+        searchRef,
+        singleSelectErrorMessage,
+        singleSelectRef,
+        textAreaErrorMessage,
+        textAreaRef,
+        textFieldErrorMessage,
+        textFieldRef,
+    ]);
+
+    React.useEffect(() => {
+        if (isFormSubmitted) {
+            // If the form has been submitted, move focus. We use useEffect
+            // so that the error message states are updated before we move focus
+            moveFocusToFirstFieldWithError();
+            setIsFormSubmitted(false);
+        }
+    }, [isFormSubmitted, moveFocusToFirstFieldWithError]);
+
+    const handleSubmit = () => {
+        const backendErrorMessage = "Example server side error message";
+        if (args.required) {
+            const requiredMsg =
+                typeof args.required === "string"
+                    ? args.required
+                    : "Story default required msg";
+            if (!textFieldValue) {
+                setTextFieldErrorMessage(requiredMsg);
+            }
+            if (!textAreaValue) {
+                setTextAreaErrorMessage(requiredMsg);
+            }
+            if (!singleSelectValue) {
+                setSingleSelectErrorMessage(requiredMsg);
+            }
+            if (multiSelectValue.length === 0) {
+                setMultiSelectErrorMessage(requiredMsg);
+            }
+            if (!searchValue) {
+                setSearchErrorMessage(requiredMsg);
+            }
+        } else {
+            setTextFieldErrorMessage(backendErrorMessage);
+            setTextAreaErrorMessage(backendErrorMessage);
+            setSingleSelectErrorMessage(backendErrorMessage);
+            setMultiSelectErrorMessage(backendErrorMessage);
+            setSearchErrorMessage(backendErrorMessage);
+        }
+        setIsFormSubmitted(true);
+    };
+
+    const textDescription = shouldValidateInStory
+        ? "Trigger error by entering text that is 4 characters or less"
+        : args.description;
+    const selectDescription = shouldValidateInStory
+        ? "Trigger error by selecting mango"
+        : args.description;
+
+    const textValidate = (value: string) => {
+        if (value.length < 5) {
+            return "Should be 5 or more characters";
+        }
+    };
+
+    const singleSelectValidate = (value?: string | null) => {
+        if (value === "mango") {
+            return "Don't pick mango!";
+        }
+    };
+
+    const multiSelectValidate = (values: string[]) => {
+        if (values.includes("mango")) {
+            return "Don't pick mango!";
+        }
+    };
+
     return (
         <View style={{gap: spacing.large_24}}>
             <LabeledField
                 {...args}
+                errorMessage={textFieldErrorMessage}
                 label="Text Field"
+                description={textDescription}
                 field={
                     <TextField
+                        ref={textFieldRef}
                         value={textFieldValue}
                         onChange={setTextFieldValue}
+                        onValidate={setTextFieldErrorMessage}
+                        validate={
+                            shouldValidateInStory ? textValidate : undefined
+                        }
+                        instantValidation={false}
                     />
                 }
             />
             <LabeledField
                 {...args}
+                errorMessage={textAreaErrorMessage}
                 label="Text Area"
+                description={textDescription}
                 field={
                     <TextArea
+                        ref={textAreaRef}
                         value={textAreaValue}
                         onChange={setTextAreaValue}
+                        onValidate={setTextAreaErrorMessage}
+                        validate={
+                            shouldValidateInStory ? textValidate : undefined
+                        }
+                        instantValidation={false}
                     />
                 }
             />
 
             <LabeledField
                 {...args}
+                errorMessage={singleSelectErrorMessage}
                 label="Single Select"
+                description={selectDescription}
                 field={
                     <SingleSelect
+                        // ref={singleSelectRef} // TODO(WB-1841) once SingleSelect supports ref
                         placeholder="Choose a fruit"
                         selectedValue={singleSelectValue}
                         onChange={setSingleSelectValue}
-                        error={!!args.error}
+                        onValidate={setSingleSelectErrorMessage}
+                        validate={singleSelectValidate}
                     >
                         <OptionItem label="Mango" value="mango" />
                         <OptionItem label="Strawberry" value="strawberry" />
@@ -105,12 +271,20 @@ const AllFields = (args: PropsFor<typeof LabeledField>) => {
 
             <LabeledField
                 {...args}
+                errorMessage={multiSelectErrorMessage}
                 label="Multi Select"
+                description={selectDescription}
                 field={
                     <MultiSelect
+                        // ref={multiSelectRef} // TODO(WB-1841) once MultiSelect supports ref
                         selectedValues={multiSelectValue}
                         onChange={setMultiSelectValue}
-                        error={!!args.error}
+                        onValidate={setMultiSelectErrorMessage}
+                        validate={
+                            shouldValidateInStory
+                                ? multiSelectValidate
+                                : undefined
+                        }
                     >
                         <OptionItem label="Mango" value="mango" />
                         <OptionItem label="Strawberry" value="strawberry" />
@@ -121,14 +295,26 @@ const AllFields = (args: PropsFor<typeof LabeledField>) => {
 
             <LabeledField
                 {...args}
+                errorMessage={searchErrorMessage}
                 label="Search"
+                description={textDescription}
                 field={
                     <SearchField
+                        ref={searchRef}
                         value={searchValue}
                         onChange={setSearchValue}
+                        validate={
+                            shouldValidateInStory ? textValidate : undefined
+                        }
+                        onValidate={setSearchErrorMessage}
+                        instantValidation={false}
                     />
                 }
             />
+
+            {showSubmitButtonInStory && (
+                <Button onClick={handleSubmit}>Submit</Button>
+            )}
         </View>
     );
 };
@@ -140,41 +326,92 @@ const AllFields = (args: PropsFor<typeof LabeledField>) => {
  * - `SingleSelect`
  * - `MultiSelect`
  * - `SearchField`
+ *
+ * LabeledField works best with field components that accept `error`, `light`,
+ * and `required` props since these props will get auto-populated by
+ * LabeledField.
  */
 export const Fields: StoryComponentType = {
     args: {
         description: "Helpful description text.",
-        required: true,
     },
     render: AllFields,
 };
 
+/**
+ * The `errorMessage` prop can be used to define the error message to show for
+ * the field.
+ *
+ * It will also put the field component in an error state by
+ * auto-populating the field's `error` prop depending on if there is an error
+ * message.
+ */
 export const Error: StoryComponentType = {
     args: {
         description: "Helpful description text.",
-        error: "Message about the error",
-        required: true,
+        errorMessage: "Message about the error",
     },
     render: AllFields,
 };
 
 /**
- * If the labeled field is used on a dark background, the `light` prop can be
- * set to `true`. When abled, the text in the component (label, required
- * indicator, description, and error message) are modified to work on a dark
- * background.
+ * If it is mandatory for a user to fill out a field, it can be marked as
+ * required.
+ *
+ * LabeledField will auto-populate the `required` prop for the field
+ * component and validation is handled by the specific field components. See
+ * docs for each component for more details on validation logic.
+ *
+ * If LabeledField's `required` prop is used and the field's `onValidate` prop
+ * sets LabeledField's `errorMessage` prop, the error message for the required
+ * field will be shown.
+ *
+ * Note: The validation around required fields is only triggered if a field is
+ * interacted with. If the form is submitted with required empty fields, it is
+ * up to the parent component to set the `errorMessage` prop on the
+ * LabeledField component.
  */
-export const Light: StoryComponentType = {
+export const Required: AllFieldsStoryComponentType = {
     args: {
         description: "Helpful description text.",
-        error: "Message about the error",
-        required: true,
-        light: true,
+        required: "Custom required error message",
+        showSubmitButtonInStory: true,
     },
+    render: AllFields,
     parameters: {
-        backgrounds: {default: "darkBlue"},
+        chromatic: {
+            // Disabling because this doesn't test anything visual.
+            disableSnapshot: true,
+        },
+    },
+};
+
+/**
+ * The LabeledField's `errorMessage` prop can be configured with the form field's
+ * validation props like `validate` and `onValidate`. This example also shows
+ * how an error message can be shown after the form is submitted.
+ *
+ * Note: For `TextField` and `TextArea` components, it is recommended to use
+ * `instantValidation=false` so that validation occurs on blur for better
+ * usability.
+ *
+ * In this example, the text-based fields will show an error if the value has
+ * less than 5 characters. The select-based fields will show an error if "Mango"
+ * is selected.
+ */
+export const Validation: AllFieldsStoryComponentType = {
+    args: {
+        description: "Helpful description text.",
+        shouldValidateInStory: true,
+        showSubmitButtonInStory: true,
     },
     render: AllFields,
+    parameters: {
+        chromatic: {
+            // Disabling because this doesn't test anything visual.
+            disableSnapshot: true,
+        },
+    },
 };
 
 /**
@@ -192,7 +429,7 @@ export const ChangingErrors: StoryComponentType = () => {
             <LabeledField
                 label="Label"
                 field={<TextField value="" onChange={() => {}} />}
-                error={errorMessage}
+                errorMessage={errorMessage}
             />
             <Strut size={spacing.small_12} />
             <Button
@@ -215,6 +452,25 @@ ChangingErrors.parameters = {
     },
 };
 
+/**
+ * If the labeled field is used on a dark background, the `light` prop can be
+ * set to `true`. When enabled, the text in the component (label, required
+ * indicator, description, and error message) are modified to work on a dark
+ * background.
+ */
+export const Light: StoryComponentType = {
+    args: {
+        description: "Helpful description text.",
+        errorMessage: "Message about the error",
+        required: "Custom required message",
+        light: true,
+    },
+    parameters: {
+        backgrounds: {default: "darkBlue"},
+    },
+    render: AllFields,
+};
+
 /**
  * The following story shows what the LabeledField looks like when different
  * props are set.
@@ -252,7 +508,7 @@ export const Scenarios = (args: PropsFor<typeof LabeledField>) => {
             <LabeledField
                 {...args}
                 label="With error"
-                error="Message about the error"
+                errorMessage="Message about the error"
                 field={
                     <TextField
                         value="invalid value"
@@ -264,7 +520,7 @@ export const Scenarios = (args: PropsFor<typeof LabeledField>) => {
             <LabeledField
                 {...args}
                 label="With description and error"
-                error="Message about the error"
+                errorMessage="Message about the error"
                 description="Description"
                 field={
                     <TextField
@@ -280,7 +536,7 @@ export const Scenarios = (args: PropsFor<typeof LabeledField>) => {
                 required={true}
                 {...args}
                 label={longText}
-                error={longText}
+                errorMessage={longText}
                 description={longText}
                 field={
                     <TextField
@@ -295,7 +551,7 @@ export const Scenarios = (args: PropsFor<typeof LabeledField>) => {
                 required={true}
                 {...args}
                 label={longTextWithNoBreak}
-                error={longTextWithNoBreak}
+                errorMessage={longTextWithNoBreak}
                 description={longTextWithNoBreak}
                 field={
                     <TextField
@@ -308,3 +564,37 @@ export const Scenarios = (args: PropsFor<typeof LabeledField>) => {
         </View>
     );
 };
+
+/**
+ * Here is an example where LabeledField is used with a non-Wonder Blocks
+ * component.
+ *
+ * Although it can be used with custom components, it is recommended that
+ * LabeledField is used with the following Wonder Blocks components:
+ * - TextField
+ * - TextArea
+ * - SearchField
+ * - SingleSelect
+ * - MultiSelect
+ *
+ * This is recommended because LabeledField will inject WB specific props:
+ * `required`, `error`, `light`, and `testId`. The `field` component should
+ * handle these props accordingly. This is helpful because for example,
+ * if LabeledField has an error message, the field should also be in an error state.
+ * If the `field` component doesn't support these props, there will be console warnings.
+ */
+export const WithNonWb = {
+    args: {
+        label: "Label",
+        description: "Description",
+        errorMessage: "Error message",
+        required: true,
+        field: <input type="text" />,
+    },
+    parameters: {
+        chromatic: {
+            // Disabling because this doesn't test anything visual.
+            disableSnapshot: true,
+        },
+    },
+};
diff --git a/packages/wonder-blocks-form/src/components/__tests__/text-area.test.tsx b/packages/wonder-blocks-form/src/components/__tests__/text-area.test.tsx
index 089d061f8..1e4822ba3 100644
--- a/packages/wonder-blocks-form/src/components/__tests__/text-area.test.tsx
+++ b/packages/wonder-blocks-form/src/components/__tests__/text-area.test.tsx
@@ -851,6 +851,47 @@ describe("TextArea", () => {
                 const textArea = await screen.findByRole("textbox");
                 expect(textArea).toHaveAttribute("aria-invalid", "false");
             });
+
+            describe("aria-required", () => {
+                it.each([
+                    {
+                        required: true,
+                        ariaRequired: "true",
+                    },
+                    {
+                        required: false,
+                        ariaRequired: "false",
+                    },
+                    {
+                        required: undefined,
+                        ariaRequired: "false",
+                    },
+                    {
+                        required: "Custom required message",
+                        ariaRequired: "true",
+                    },
+                ])(
+                    "should set the aria-required attribute to $ariaRequired if required prop is $required",
+                    ({required, ariaRequired}) => {
+                        // Arrange
+                        // Act
+                        render(
+                            <TextArea
+                                value=""
+                                onChange={() => {}}
+                                required={required}
+                            />,
+                            defaultOptions,
+                        );
+
+                        // Assert
+                        expect(screen.getByRole("textbox")).toHaveAttribute(
+                            "aria-required",
+                            ariaRequired,
+                        );
+                    },
+                );
+            });
         });
     });
 
@@ -1519,10 +1560,11 @@ describe("TextArea", () => {
                         />,
                         defaultOptions,
                     );
-
-                    // Act
                     const field = screen.getByRole("textbox");
                     await userEvent.type(field, "test");
+                    handleValidate.mockReset(); // Reset mock before leaving the field
+
+                    // Act
                     await userEvent.tab();
 
                     // Assert
@@ -1599,20 +1641,20 @@ describe("TextArea", () => {
                         />,
                         defaultOptions,
                     );
-
-                    // Act
                     const field = screen.getByRole("textbox");
                     await userEvent.type(field, "test");
                     // Blur will trigger error to be shown
                     await userEvent.tab();
+                    handleValidate.mockReset(); // Reset mock before changing the value
+
+                    // Act
                     // Updating the value should clear the error using the onValidate prop
-                    await userEvent.type(field, "tests");
+                    await userEvent.type(field, "t");
 
                     // Assert
-                    expect(handleValidate.mock.calls).toStrictEqual([
-                        [errorMsg],
-                        [null],
-                    ]);
+                    expect(handleValidate).toHaveBeenCalledExactlyOnceWith(
+                        null,
+                    );
                 });
 
                 it("should not call the validate prop on blur if it is disabled", async () => {
@@ -1696,17 +1738,17 @@ describe("TextArea", () => {
                             />,
                             defaultOptions,
                         );
-
-                        // Act
                         const field = await screen.findByRole("textbox");
                         await userEvent.type(field, "{backspace}");
+                        onValidate.mockReset(); // Reset mock before leaving the field
+
+                        // Act
                         await userEvent.tab();
 
                         // Assert
-                        expect(onValidate.mock.calls).toStrictEqual([
-                            [null],
-                            [requiredMessage],
-                        ]);
+                        expect(onValidate).toHaveBeenCalledExactlyOnceWith(
+                            requiredMessage,
+                        );
                     });
 
                     it("shound be in error state if it is required, the value is empty, and the user tabs away", async () => {
diff --git a/packages/wonder-blocks-form/src/components/__tests__/text-field.test.tsx b/packages/wonder-blocks-form/src/components/__tests__/text-field.test.tsx
index 7588470a4..1d76d9bbf 100644
--- a/packages/wonder-blocks-form/src/components/__tests__/text-field.test.tsx
+++ b/packages/wonder-blocks-form/src/components/__tests__/text-field.test.tsx
@@ -1266,6 +1266,44 @@ describe("TextField", () => {
                     validateErrorMessage,
                 );
             });
+
+            it.each([
+                {
+                    required: true,
+                    ariaRequired: "true",
+                },
+                {
+                    required: false,
+                    ariaRequired: "false",
+                },
+                {
+                    required: undefined,
+                    ariaRequired: "false",
+                },
+                {
+                    required: "Custom required message",
+                    ariaRequired: "true",
+                },
+            ])(
+                "should set the aria-required attribute to $ariaRequired if required prop is $required",
+                ({required, ariaRequired}) => {
+                    // Arrange
+                    // Act
+                    render(
+                        <TextField
+                            value=""
+                            onChange={() => {}}
+                            required={required}
+                        />,
+                    );
+
+                    // Assert
+                    expect(screen.getByRole("textbox")).toHaveAttribute(
+                        "aria-required",
+                        ariaRequired,
+                    );
+                },
+            );
         });
 
         describe("instantValidation prop", () => {
@@ -1386,10 +1424,11 @@ describe("TextField", () => {
                             instantValidation={false}
                         />,
                     );
-
-                    // Act
                     const field = screen.getByRole("textbox");
                     await userEvent.type(field, "test");
+                    handleValidate.mockReset(); // Reset mock before leaving the field
+
+                    // Act
                     await userEvent.tab();
 
                     // Assert
@@ -1462,20 +1501,19 @@ describe("TextField", () => {
                             instantValidation={false}
                         />,
                     );
-
-                    // Act
                     const field = screen.getByRole("textbox");
                     await userEvent.type(field, "test");
                     // Blur will trigger error to be shown
                     await userEvent.tab();
+                    handleValidate.mockReset(); // Reset mock before changing the value
+                    // Act
                     // Updating the value should clear the error using the onValidate prop
-                    await userEvent.type(field, "tests");
+                    await userEvent.type(field, "t");
 
                     // Assert
-                    expect(handleValidate.mock.calls).toStrictEqual([
-                        [errorMsg],
-                        [null],
-                    ]);
+                    expect(handleValidate).toHaveBeenCalledExactlyOnceWith(
+                        null,
+                    );
                 });
 
                 it("should not call the validate prop on blur if it is disabled", async () => {
@@ -1547,17 +1585,17 @@ describe("TextField", () => {
                                 onValidate={onValidate}
                             />,
                         );
-
-                        // Act
                         const field = await screen.findByRole("textbox");
                         await userEvent.type(field, "{backspace}");
+                        onValidate.mockReset(); // Reset mock before leaving the field
+
+                        // Act
                         await userEvent.tab();
 
                         // Assert
-                        expect(onValidate.mock.calls).toStrictEqual([
-                            [null],
-                            [requiredMessage],
-                        ]);
+                        expect(onValidate).toHaveBeenCalledExactlyOnceWith(
+                            requiredMessage,
+                        );
                     });
 
                     it("shound be in error state if it is required, the value is empty, and the user tabs away", async () => {
diff --git a/packages/wonder-blocks-form/src/components/text-area.tsx b/packages/wonder-blocks-form/src/components/text-area.tsx
index 978df76d8..5280efa60 100644
--- a/packages/wonder-blocks-form/src/components/text-area.tsx
+++ b/packages/wonder-blocks-form/src/components/text-area.tsx
@@ -305,6 +305,7 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
                     wrap={wrap}
                     minLength={minLength}
                     maxLength={maxLength}
+                    aria-required={!!required}
                     onClick={disabled ? undefined : onClick}
                     onKeyDown={disabled ? undefined : onKeyDown}
                     onKeyUp={disabled ? undefined : onKeyUp}
diff --git a/packages/wonder-blocks-form/src/components/text-field.tsx b/packages/wonder-blocks-form/src/components/text-field.tsx
index d64930e61..048f29c9e 100644
--- a/packages/wonder-blocks-form/src/components/text-field.tsx
+++ b/packages/wonder-blocks-form/src/components/text-field.tsx
@@ -255,6 +255,7 @@ const TextField = (props: PropsWithForwardRef) => {
                     value={value}
                     name={name}
                     aria-disabled={disabled}
+                    aria-required={!!required}
                     onChange={handleChange}
                     onKeyDown={disabled ? undefined : onKeyDown}
                     onFocus={handleFocus} // TextField can be focused if disabled
diff --git a/packages/wonder-blocks-form/src/hooks/use-field-validation.ts b/packages/wonder-blocks-form/src/hooks/use-field-validation.ts
index 2002e90d0..68d3e7236 100644
--- a/packages/wonder-blocks-form/src/hooks/use-field-validation.ts
+++ b/packages/wonder-blocks-form/src/hooks/use-field-validation.ts
@@ -84,14 +84,12 @@ export const useFieldValidation = ({
         if (instantValidation) {
             handleValidation(newValue);
         } else {
-            if (errorMessage) {
-                // If instantValidation is false and there is an error
-                // message, error needs to be cleared when the user updates
-                // the value
-                setErrorMessage(null);
-                if (onValidate) {
-                    onValidate(null);
-                }
+            // If instantValidation is false and there is an error
+            // message, error needs to be cleared when the user updates
+            // the value
+            setErrorMessage(null);
+            if (onValidate) {
+                onValidate(null);
             }
         }
     };
diff --git a/packages/wonder-blocks-labeled-field/src/components/__tests__/labeled-field.test.tsx b/packages/wonder-blocks-labeled-field/src/components/__tests__/labeled-field.test.tsx
index 44c541422..872a6dafe 100644
--- a/packages/wonder-blocks-labeled-field/src/components/__tests__/labeled-field.test.tsx
+++ b/packages/wonder-blocks-labeled-field/src/components/__tests__/labeled-field.test.tsx
@@ -2,9 +2,6 @@ import * as React from "react";
 import {render, screen, within} from "@testing-library/react";
 import {StyleSheet} from "aphrodite";
 
-import {I18nInlineMarkup} from "@khanacademy/wonder-blocks-i18n";
-import {Body} from "@khanacademy/wonder-blocks-typography";
-
 import {TextField} from "@khanacademy/wonder-blocks-form";
 import {RenderStateRoot} from "@khanacademy/wonder-blocks-core";
 import LabeledField from "../labeled-field";
@@ -17,7 +14,7 @@ describe("LabeledField", () => {
     const id = "example-id";
     const label = "Label";
     const description = "Description of the field";
-    const error = "Error message";
+    const errorMessage = "Error message";
     const testId = "test-id";
 
     const getLabel = () => screen.getByText(label);
@@ -62,20 +59,20 @@ describe("LabeledField", () => {
 
     it("LabeledField renders the error text", () => {
         // Arrange
-        const error = "Error";
+        const errorMessage = "Error";
 
         // Act
         render(
             <LabeledField
                 field={<TextField id="tf-1" value="" onChange={() => {}} />}
                 label="Label"
-                error={error}
+                errorMessage={errorMessage}
             />,
             defaultOptions,
         );
 
         // Assert
-        expect(screen.getByText(error)).toBeInTheDocument();
+        expect(screen.getByText(errorMessage)).toBeInTheDocument();
     });
 
     it("LabeledField adds testId to label", () => {
@@ -126,7 +123,7 @@ describe("LabeledField", () => {
             <LabeledField
                 field={<TextField id="tf-1" value="" onChange={() => {}} />}
                 label="Label"
-                error="Error"
+                errorMessage="Error"
                 testId={testId}
             />,
             defaultOptions,
@@ -151,7 +148,7 @@ describe("LabeledField", () => {
             <LabeledField
                 field={<TextField id="tf-1" value="" onChange={() => {}} />}
                 label="Label"
-                error="Error"
+                errorMessage="Error"
                 style={styles.style1}
             />,
             defaultOptions,
@@ -162,51 +159,6 @@ describe("LabeledField", () => {
         expect(labeledField).toHaveStyle("background: blue");
     });
 
-    it("should render a LabelMedium when the 'label' prop is a I18nInlineMarkup", () => {
-        // Arrange
-
-        // Act
-        render(
-            <LabeledField
-                field={<TextField id="tf-1" value="" onChange={() => {}} />}
-                label={
-                    <I18nInlineMarkup b={(s: string) => <b>{s}</b>}>
-                        {"<b>Test</b> Hello, world!"}
-                    </I18nInlineMarkup>
-                }
-            />,
-            defaultOptions,
-        );
-
-        // Assert
-        const label = screen.getByText("Hello, world!");
-        // LabelMedium has a font-size of 16px
-        expect(label).toHaveStyle("font-size: 16px");
-    });
-
-    it("should render a LabelSmall when the 'description' prop is a I18nInlineMarkup", () => {
-        // Arrange
-
-        // Act
-        render(
-            <LabeledField
-                field={<TextField id="tf-1" value="" onChange={() => {}} />}
-                label={<Body>Hello, world</Body>}
-                description={
-                    <I18nInlineMarkup b={(s: string) => <b>{s}</b>}>
-                        {"<b>Test</b> description"}
-                    </I18nInlineMarkup>
-                }
-            />,
-            defaultOptions,
-        );
-
-        // Assert
-        const description = screen.getByText("description");
-        // LabelSmall has a font-size of 16px
-        expect(description).toHaveStyle("font-size: 14px");
-    });
-
     describe("Labels prop", () => {
         it("should use the errorIconAriaLabel for the error icon aria label", () => {
             // Arrange
@@ -215,7 +167,7 @@ describe("LabeledField", () => {
                 <LabeledField
                     field={<TextField value="" onChange={() => {}} />}
                     label="Label"
-                    error="Error message"
+                    errorMessage="Error message"
                     labels={{errorIconAriaLabel}}
                 />,
                 defaultOptions,
@@ -234,7 +186,7 @@ describe("LabeledField", () => {
                 <LabeledField
                     field={<TextField value="" onChange={() => {}} />}
                     label="Label"
-                    error="Error message"
+                    errorMessage="Error message"
                     testId="labeled-field"
                 />,
                 defaultOptions,
@@ -271,7 +223,7 @@ describe("LabeledField", () => {
                             id={id}
                             label={label}
                             description={description}
-                            error={error}
+                            errorMessage={errorMessage}
                             testId={testId}
                         />,
                         defaultOptions,
@@ -303,7 +255,7 @@ describe("LabeledField", () => {
                             field={<TextField value="" onChange={() => {}} />}
                             label={label}
                             description={description}
-                            error={error}
+                            errorMessage={errorMessage}
                             testId={testId}
                         />,
                         defaultOptions,
@@ -338,7 +290,7 @@ describe("LabeledField", () => {
                             testId={testId}
                             label={label}
                             description={description}
-                            error={error}
+                            errorMessage={errorMessage}
                         />,
                         defaultOptions,
                     );
@@ -362,7 +314,7 @@ describe("LabeledField", () => {
                         // without using testId, we get the parent of the error
                         // text
                         // eslint-disable-next-line testing-library/no-node-access
-                        const el = screen.getByText(error).parentElement;
+                        const el = screen.getByText(errorMessage).parentElement;
                         if (!el) {
                             throw Error(
                                 "Error section in LabeledField not found",
@@ -383,7 +335,7 @@ describe("LabeledField", () => {
                             field={<TextField value="" onChange={() => {}} />}
                             label={label}
                             description={description}
-                            error={error}
+                            errorMessage={errorMessage}
                         />,
                         defaultOptions,
                     );
@@ -430,7 +382,7 @@ describe("LabeledField", () => {
                         field={<TextField value="" onChange={() => {}} />}
                         label="Label"
                         description="Description for the field"
-                        error="Error message"
+                        errorMessage="Error message"
                     />,
                     defaultOptions,
                 );
@@ -485,12 +437,12 @@ describe("LabeledField", () => {
 
             it("should set the aria-describedby on the field to the id of the error section", () => {
                 // Arrange
-                const error = "Error message";
+                const errorMessage = "Error message";
                 render(
                     <LabeledField
                         field={<TextField value="" onChange={() => {}} />}
                         label="Label"
-                        error={error}
+                        errorMessage={errorMessage}
                         testId="labeled-field"
                     />,
                     defaultOptions,
@@ -511,12 +463,12 @@ describe("LabeledField", () => {
 
             it("should have aria-live=assertive set on the error section", () => {
                 // Arrange
-                const error = "Error message";
+                const errorMessage = "Error message";
                 render(
                     <LabeledField
                         field={<TextField value="" onChange={() => {}} />}
                         label="Label"
-                        error={error}
+                        errorMessage={errorMessage}
                         testId="labeled-field"
                     />,
                     defaultOptions,
@@ -536,12 +488,12 @@ describe("LabeledField", () => {
 
             it("should have aria-atomic=true set on the error section", () => {
                 // Arrange
-                const error = "Error message";
+                const errorMessage = "Error message";
                 render(
                     <LabeledField
                         field={<TextField value="" onChange={() => {}} />}
                         label="Label"
-                        error={error}
+                        errorMessage={errorMessage}
                         testId="labeled-field"
                     />,
                     defaultOptions,
@@ -557,4 +509,135 @@ describe("LabeledField", () => {
             });
         });
     });
+
+    describe("Field", () => {
+        it.each([
+            {
+                required: true,
+                ariaRequired: "true",
+            },
+            {
+                required: false,
+                ariaRequired: "false",
+            },
+            {
+                required: undefined,
+                ariaRequired: "false",
+            },
+            {
+                required: "Custom required message",
+                ariaRequired: "true",
+            },
+        ])(
+            "should set aria-required to $ariaRequired on the field if LabeledField has the required set to $required",
+            ({required, ariaRequired}) => {
+                // Arrange
+                // Act
+                render(
+                    <LabeledField
+                        field={<TextField value="" onChange={() => {}} />}
+                        required={required}
+                        label="Label"
+                    />,
+                    defaultOptions,
+                );
+
+                // Assert
+                expect(screen.getByRole("textbox")).toHaveAttribute(
+                    "aria-required",
+                    ariaRequired,
+                );
+            },
+        );
+
+        it("should set aria-invalid on the field if LabeledField has the errorMessage prop", () => {
+            // Arrange
+            // Act
+            render(
+                <LabeledField
+                    field={<TextField value="" onChange={() => {}} />}
+                    errorMessage="Error"
+                    label="Label"
+                />,
+                defaultOptions,
+            );
+
+            // Assert
+            expect(screen.getByRole("textbox")).toHaveAttribute(
+                "aria-invalid",
+                "true",
+            );
+        });
+
+        describe("Using props set on field", () => {
+            it("should set the required indicator if the field has the required prop set", async () => {
+                // Arrange
+                // Act
+                render(
+                    <LabeledField
+                        field={
+                            <TextField
+                                value=""
+                                onChange={() => {}}
+                                required="Required msg"
+                            />
+                        }
+                        label="Label"
+                    />,
+                    defaultOptions,
+                );
+
+                // Assert
+                await screen.findByLabelText("Label *");
+            });
+
+            it("should still set the field as required if it is set on the field and not LabeledField", () => {
+                // Arrange
+                // Act
+                render(
+                    <LabeledField
+                        field={
+                            <TextField
+                                value=""
+                                onChange={() => {}}
+                                required="Required msg"
+                            />
+                        }
+                        label="Label"
+                    />,
+                    defaultOptions,
+                );
+
+                // Assert
+                expect(screen.getByRole("textbox")).toHaveAttribute(
+                    "aria-required",
+                    "true",
+                );
+            });
+
+            it("should still use the field's error prop if it is not set on LabeledField", () => {
+                // Arrange
+                // Act
+                render(
+                    <LabeledField
+                        field={
+                            <TextField
+                                value=""
+                                onChange={() => {}}
+                                error={true}
+                            />
+                        }
+                        label="Label"
+                    />,
+                    defaultOptions,
+                );
+
+                // Assert
+                expect(screen.getByRole("textbox")).toHaveAttribute(
+                    "aria-invalid",
+                    "true",
+                );
+            });
+        });
+    });
 });
diff --git a/packages/wonder-blocks-labeled-field/src/components/labeled-field.tsx b/packages/wonder-blocks-labeled-field/src/components/labeled-field.tsx
index ec8f0aa4a..f65a42162 100644
--- a/packages/wonder-blocks-labeled-field/src/components/labeled-field.tsx
+++ b/packages/wonder-blocks-labeled-field/src/components/labeled-field.tsx
@@ -2,12 +2,7 @@ import * as React from "react";
 import {StyleSheet} from "aphrodite";
 import WarningCircle from "@phosphor-icons/core/bold/warning-circle-bold.svg";
 
-import {
-    View,
-    addStyle,
-    StyleType,
-    useUniqueIdWithMock,
-} from "@khanacademy/wonder-blocks-core";
+import {View, addStyle, StyleType} from "@khanacademy/wonder-blocks-core";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
 import {color, semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {LabelMedium, LabelSmall} from "@khanacademy/wonder-blocks-typography";
@@ -27,17 +22,38 @@ type Props = {
      */
     description?: React.ReactNode;
     /**
-     * Whether this field is required to continue.
+     * Whether this field is required to to continue, or the error message to
+     * render if this field is left blank. This is passed into the field
+     * component.
+     *
+     * This can be a boolean or a string.
+     *
+     * String:
+     * Please pass in a translated string to use as the error message that will
+     * render if the user leaves this field blank. If this field is required,
+     * and a string is not passed in, a default untranslated string will render
+     * upon error.
+     * Note: The string will not be used if a `validate` prop is passed in.
+     *
+     * Example message: i18n._("A password is required to log in.")
+     *
+     * Boolean:
+     * True/false indicating whether this field is required. Please do not pass
+     * in `true` if possible - pass in the error string instead.
+     * If `true` is passed, and a `validate` prop is not passed, that means
+     * there is no corresponding message and the default untranlsated message
+     * will be used.
      */
-    required?: boolean;
+    required?: boolean | string;
     /**
-     * The message for the error element.
+     * The message for the error element. If there is a message, it will also
+     * set the `error` prop on the `field` component.
      *
      * Note: Since the error icon has an aria-label, screen readers will
      * prefix the error message with "Error:" (or the value provided to the
      * errorIconAriaLabel in the `labels` prop)
      */
-    error?: React.ReactNode;
+    errorMessage?: React.ReactNode;
     /**
      * Custom styles for the labeled field container.
      */
@@ -90,8 +106,9 @@ const defaultLabeledFieldLabels: LabeledFieldLabels = {
 const StyledSpan = addStyle("span");
 
 /**
- * A LabeledField is an element that provides a label, description, and error element
- * to present better context and hints to any type of form field component.
+ * A LabeledField is an element that provides a label, required indicator,
+ * description, and error to present better context and hints to any type of
+ * form field component.
  */
 export default function LabeledField(props: Props) {
     const {
@@ -103,23 +120,27 @@ export default function LabeledField(props: Props) {
         testId,
         light,
         description,
-        error,
+        errorMessage,
         labels = defaultLabeledFieldLabels,
     } = props;
 
-    const ids = useUniqueIdWithMock("labeled-field");
-    const uniqueId = id ?? ids.get("id");
+    const generatedUniqueId = React.useId();
+    const uniqueId = id ?? `${generatedUniqueId}-labeled-field`;
     const labelId = `${uniqueId}-label`;
     const descriptionId = `${uniqueId}-description`;
     const fieldId = `${uniqueId}-field`;
     const errorId = `${uniqueId}-error`;
 
+    const isRequired = !!required || !!field.props.required;
+    const hasError = !!errorMessage || !!field.props.error;
+    const isLight = light || field.props.light;
+
     function renderLabel(): React.ReactNode {
         const requiredIcon = (
             <StyledSpan
                 style={[
                     styles.textWordBreak,
-                    light ? styles.lightRequired : styles.required,
+                    isLight ? styles.lightRequired : styles.required,
                 ]}
                 aria-hidden={true}
             >
@@ -133,7 +154,7 @@ export default function LabeledField(props: Props) {
                 <LabelMedium
                     style={[
                         styles.textWordBreak,
-                        light ? styles.lightLabel : styles.label,
+                        isLight ? styles.lightLabel : styles.label,
                     ]}
                     tag="label"
                     htmlFor={fieldId}
@@ -141,7 +162,7 @@ export default function LabeledField(props: Props) {
                     id={labelId}
                 >
                     {label}
-                    {required && requiredIcon}
+                    {isRequired && requiredIcon}
                 </LabelMedium>
                 <Strut size={spacing.xxxSmall_4} />
             </React.Fragment>
@@ -158,7 +179,7 @@ export default function LabeledField(props: Props) {
                 <LabelSmall
                     style={[
                         styles.textWordBreak,
-                        light ? styles.lightDescription : styles.description,
+                        isLight ? styles.lightDescription : styles.description,
                     ]}
                     testId={testId && `${testId}-description`}
                     id={descriptionId}
@@ -173,9 +194,13 @@ export default function LabeledField(props: Props) {
     function maybeRenderError(): React.ReactNode | null | undefined {
         return (
             <React.Fragment>
-                <Strut size={spacing.small_12} />
                 <View
-                    style={styles.errorSection}
+                    style={[
+                        styles.errorSection,
+                        errorMessage
+                            ? styles.errorSectionWithContent
+                            : undefined,
+                    ]}
                     id={errorId}
                     testId={testId && `${testId}-error`}
                     // We use aria-live="assertive" for the error so that it is
@@ -189,13 +214,13 @@ export default function LabeledField(props: Props) {
                     // is announced
                     aria-atomic="true"
                 >
-                    {error && (
+                    {errorMessage && (
                         <>
                             <PhosphorIcon
                                 icon={WarningCircle}
                                 style={[
                                     styles.errorIcon,
-                                    light ? styles.lightError : styles.error,
+                                    isLight ? styles.lightError : styles.error,
                                 ]}
                                 role="img"
                                 aria-label={labels.errorIconAriaLabel}
@@ -204,10 +229,10 @@ export default function LabeledField(props: Props) {
                                 style={[
                                     styles.textWordBreak,
                                     styles.errorMessage,
-                                    light ? styles.lightError : styles.error,
+                                    isLight ? styles.lightError : styles.error,
                                 ]}
                             >
-                                {error}
+                                {errorMessage}
                             </LabelSmall>
                         </>
                     )}
@@ -219,11 +244,16 @@ export default function LabeledField(props: Props) {
     function renderField() {
         return React.cloneElement(field, {
             id: fieldId,
-            "aria-describedby": [error && errorId, description && descriptionId]
+            "aria-describedby": [
+                errorMessage && errorId,
+                description && descriptionId,
+            ]
                 .filter(Boolean)
                 .join(" "),
-            required,
-            testId: testId && `${testId}-field`,
+            required: isRequired,
+            error: hasError,
+            testId: testId ? `${testId}-field` : undefined,
+            light: isLight,
         });
     }
 
@@ -255,6 +285,9 @@ const styles = StyleSheet.create({
         flexDirection: "row",
         gap: spacing.xSmall_8,
     },
+    errorSectionWithContent: {
+        paddingTop: spacing.small_12,
+    },
     error: {
         color: semanticColor.status.critical.foreground,
     },
diff --git a/packages/wonder-blocks-labeled-field/tsconfig-build.json b/packages/wonder-blocks-labeled-field/tsconfig-build.json
index 38cf68ebb..f9dcefb56 100644
--- a/packages/wonder-blocks-labeled-field/tsconfig-build.json
+++ b/packages/wonder-blocks-labeled-field/tsconfig-build.json
@@ -10,7 +10,6 @@
       {"path": "../wonder-blocks-layout/tsconfig-build.json"},
       {"path": "../wonder-blocks-tokens/tsconfig-build.json"},
       {"path": "../wonder-blocks-typography/tsconfig-build.json"},
-      {"path": "../wonder-blocks-i18n/tsconfig-build.json"},
       {"path": "../wonder-blocks-form/tsconfig-build.json"},
   ]
 }
\ No newline at end of file