diff --git a/.changeset/breezy-bears-teach.md b/.changeset/breezy-bears-teach.md
new file mode 100644
index 000000000..501c08ac6
--- /dev/null
+++ b/.changeset/breezy-bears-teach.md
@@ -0,0 +1,9 @@
+---
+"@khanacademy/wonder-blocks-search-field": minor
+---
+
+# SearchField
+
+- Adds `error`, `instantValidation`, `validate`, and `onValidate` props to be consistent with form components.
+- Refine magnifying glass icon styling to make it match Figma more (smaller, bold icon, spacing, update disabled state)
+- Hide the clear button if the SearchField is disabled
diff --git a/__docs__/wonder-blocks-search-field/search-field-variants.stories.tsx b/__docs__/wonder-blocks-search-field/search-field-variants.stories.tsx
new file mode 100644
index 000000000..e821674f9
--- /dev/null
+++ b/__docs__/wonder-blocks-search-field/search-field-variants.stories.tsx
@@ -0,0 +1,166 @@
+import * as React from "react";
+import {StyleSheet} from "aphrodite";
+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 SearchField from "@khanacademy/wonder-blocks-search-field";
+
+/**
+ * The following stories are used to generate the pseudo states for the
+ * SearchField component. This is only used for visual testing in Chromatic.
+ */
+export default {
+    title: "Packages / SearchField / All Variants",
+    parameters: {
+        docs: {
+            autodocs: false,
+        },
+    },
+} as Meta;
+
+type StoryComponentType = StoryObj<typeof SearchField>;
+
+const longText =
+    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.";
+const longTextWithNoWordBreak =
+    "Loremipsumdolorsitametconsecteturadipiscingelitseddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua";
+
+const states = [
+    {
+        label: "Default",
+        props: {},
+    },
+    {
+        label: "Disabled",
+        props: {disabled: true},
+    },
+    {
+        label: "Error",
+        props: {error: true},
+    },
+];
+const States = (props: {
+    light: boolean;
+    label: string;
+    value?: string;
+    placeholder?: string;
+}) => {
+    return (
+        <View
+            style={[props.light && styles.darkDefault, styles.statesContainer]}
+        >
+            <LabelLarge style={props.light && {color: color.white}}>
+                {props.label}
+            </LabelLarge>
+            <View style={[styles.scenarios]}>
+                {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}
+                            />
+                        </View>
+                    );
+                })}
+            </View>
+        </View>
+    );
+};
+
+const AllVariants = () => (
+    <View>
+        {[false, true].map((light) => {
+            return (
+                <React.Fragment key={`light-${light}`}>
+                    <States light={light} label="Default" />
+                    <States light={light} label="With Value" value="Text" />
+                    <States
+                        light={light}
+                        label="With Value (long)"
+                        value={longText}
+                    />
+                    <States
+                        light={light}
+                        label="With Value (long, no word breaks)"
+                        value={longTextWithNoWordBreak}
+                    />
+                    <States
+                        light={light}
+                        label="With Placeholder"
+                        placeholder="Placeholder text"
+                    />
+                    <States
+                        light={light}
+                        label="With Placeholder (long)"
+                        placeholder={longText}
+                    />
+                    <States
+                        light={light}
+                        label="With Placeholder (long, no word breaks)"
+                        placeholder={longTextWithNoWordBreak}
+                    />
+                </React.Fragment>
+            );
+        })}
+    </View>
+);
+
+export const Default: StoryComponentType = {
+    render: AllVariants,
+};
+
+/**
+ * There are currently only hover styles on the clear button.
+ */
+export const Hover: StoryComponentType = {
+    render: AllVariants,
+    parameters: {pseudo: {hover: true}},
+};
+
+export const Focus: StoryComponentType = {
+    render: AllVariants,
+    parameters: {pseudo: {focusVisible: true}},
+};
+
+export const HoverFocus: StoryComponentType = {
+    name: "Hover + Focus",
+    render: AllVariants,
+    parameters: {pseudo: {hover: true, focusVisible: true}},
+};
+
+/**
+ * There are currently no active styles.
+ */
+export const Active: StoryComponentType = {
+    render: AllVariants,
+    parameters: {pseudo: {active: true}},
+};
+
+const styles = StyleSheet.create({
+    darkDefault: {
+        backgroundColor: color.darkBlue,
+    },
+    statesContainer: {
+        padding: spacing.medium_16,
+    },
+    scenarios: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: spacing.xxxLarge_64,
+        flexWrap: "wrap",
+    },
+    scenario: {
+        gap: spacing.small_12,
+        overflow: "hidden",
+    },
+});
diff --git a/__docs__/wonder-blocks-search-field/search-field.stories.tsx b/__docs__/wonder-blocks-search-field/search-field.stories.tsx
index bf9e16c4f..9b15c8567 100644
--- a/__docs__/wonder-blocks-search-field/search-field.stories.tsx
+++ b/__docs__/wonder-blocks-search-field/search-field.stories.tsx
@@ -3,10 +3,10 @@ import {StyleSheet} from "aphrodite";
 import {action} from "@storybook/addon-actions";
 import type {Meta, StoryObj} from "@storybook/react";
 
-import {View} from "@khanacademy/wonder-blocks-core";
+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} from "@khanacademy/wonder-blocks-typography";
+import {LabelLarge, LabelSmall} from "@khanacademy/wonder-blocks-typography";
 
 import SearchField from "@khanacademy/wonder-blocks-search-field";
 
@@ -52,8 +52,11 @@ export default {
 
 type StoryComponentType = StoryObj<typeof SearchField>;
 
-const Template = (args: any) => {
-    const [value, setValue] = React.useState("");
+const Template = (args: PropsFor<typeof SearchField>) => {
+    const [value, setValue] = React.useState(args?.value || "");
+    const [errorMessage, setErrorMessage] = React.useState<
+        string | null | undefined
+    >("");
 
     const handleChange = (newValue: string) => {
         setValue(newValue);
@@ -66,15 +69,23 @@ const Template = (args: any) => {
     };
 
     return (
-        <SearchField
-            {...args}
-            value={value}
-            onChange={handleChange}
-            onKeyDown={(e) => {
-                action("onKeyDown")(e);
-                handleKeyDown(e);
-            }}
-        />
+        <View style={{gap: spacing.xSmall_8}}>
+            <SearchField
+                {...args}
+                value={value}
+                onChange={handleChange}
+                onKeyDown={(e) => {
+                    action("onKeyDown")(e);
+                    handleKeyDown(e);
+                }}
+                onValidate={setErrorMessage}
+            />
+            {(errorMessage || args.error) && (
+                <LabelSmall style={styles.errorMessage}>
+                    {errorMessage || "Error from error prop"}
+                </LabelSmall>
+            )}
+        </View>
     );
 };
 
@@ -217,9 +228,78 @@ export const WithAutofocus: StoryComponentType = {
     },
 };
 
+/**
+ * The SearchField can be put in an error state using the `error` prop.
+ */
+export const Error: StoryComponentType = {
+    args: {
+        error: true,
+    },
+    render: Template,
+    parameters: {
+        chromatic: {
+            // Disabling because this is covered by the All Variants stories
+            disableSnapshot: true,
+        },
+    },
+};
+
+/**
+ * The SearchField supports `validate`, `onValidate`, and `instantValidation`
+ * props.
+ *
+ * See docs for the TextField component for more details around validation
+ * since SearchField uses TextField internally.
+ */
+export const Validation: StoryComponentType = {
+    args: {
+        validate(value) {
+            if (value.length < 5) {
+                return "Too short. Value should be at least 5 characters";
+            }
+        },
+    },
+    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"
+                    instantValidation={true}
+                />
+                <LabelSmall htmlFor="instant-validation-false">
+                    Error shown onBlur (instantValidation: false)
+                </LabelSmall>
+                <Template
+                    {...args}
+                    id="instant-validation-false"
+                    instantValidation={false}
+                />
+            </View>
+        );
+    },
+    parameters: {
+        chromatic: {
+            // Disabling because this doesn't test anything visual.
+            disableSnapshot: true,
+        },
+    },
+};
+
 const styles = StyleSheet.create({
     darkBackground: {
         background: color.darkBlue,
         padding: spacing.medium_16,
     },
+    errorMessage: {
+        color: color.red,
+        paddingLeft: spacing.xxxSmall_4,
+    },
 });
diff --git a/packages/wonder-blocks-search-field/src/components/__tests__/search-field.test.tsx b/packages/wonder-blocks-search-field/src/components/__tests__/search-field.test.tsx
index de2f2a829..c82342846 100644
--- a/packages/wonder-blocks-search-field/src/components/__tests__/search-field.test.tsx
+++ b/packages/wonder-blocks-search-field/src/components/__tests__/search-field.test.tsx
@@ -2,11 +2,18 @@ import * as React from "react";
 import {render, screen, waitFor} from "@testing-library/react";
 import {userEvent} from "@testing-library/user-event";
 
-import {View} from "@khanacademy/wonder-blocks-core";
+import {PropsFor, View} from "@khanacademy/wonder-blocks-core";
 import Button from "@khanacademy/wonder-blocks-button";
 
 import SearchField from "../search-field";
 
+const ControlledSearchField = (
+    props: Partial<PropsFor<typeof SearchField>>,
+) => {
+    const [value, setValue] = React.useState<string>("");
+    return <SearchField {...props} value={value} onChange={setValue} />;
+};
+
 describe("SearchField", () => {
     test("value is updated when text is entered into the field", async () => {
         // Arrange
@@ -203,6 +210,19 @@ describe("SearchField", () => {
         expect(dismissIcon).toBeInTheDocument();
     });
 
+    test("does not display the clear icon button if the field is disabled", async () => {
+        // Arrange
+        render(
+            <SearchField value="Value" onChange={() => {}} disabled={true} />,
+        );
+
+        // Act
+        const clearButton = screen.queryByRole("button");
+
+        // Assert
+        expect(clearButton).not.toBeInTheDocument();
+    });
+
     test("clear button clears any text in the field", async () => {
         // Arrange
         const SearchFieldWrapper = () => {
@@ -441,4 +461,220 @@ describe("SearchField", () => {
         // Assert
         expect(handleOnKeyDown).toHaveReturnedWith("Enter");
     });
+
+    describe("error prop", () => {
+        it("should be in an error state if the error prop is set to true", async () => {
+            // Arrange
+            render(
+                <SearchField
+                    value="something"
+                    onChange={() => {}}
+                    error={true}
+                />,
+            );
+            // Act
+            const field = await screen.findByRole("textbox");
+
+            // Assert
+            expect(field).toHaveAttribute("aria-invalid", "true");
+        });
+
+        it("should not be in an error state if the error prop is set to false", async () => {
+            // Arrange
+            render(
+                <SearchField
+                    value="something"
+                    onChange={() => {}}
+                    error={false}
+                />,
+            );
+            // Act
+            const field = await screen.findByRole("textbox");
+
+            // Assert
+            expect(field).toHaveAttribute("aria-invalid", "false");
+        });
+
+        it("should not be in an error state if the error prop is not set", async () => {
+            // Arrange
+            render(<SearchField value="something" onChange={() => {}} />);
+            // Act
+            const field = await screen.findByRole("textbox");
+
+            // Assert
+            expect(field).toHaveAttribute("aria-invalid", "false");
+        });
+    });
+
+    describe("validation", () => {
+        it("should call the validate prop when a user types in the field and instantValidation is not set", async () => {
+            // Arrange
+            const validate = jest.fn();
+            render(
+                <ControlledSearchField
+                    value=""
+                    onChange={() => {}}
+                    validate={validate}
+                />,
+            );
+            const field = await screen.findByRole("textbox");
+
+            // Act
+            await userEvent.type(field, "t");
+
+            // Assert
+            expect(validate).toHaveBeenCalledWith("t");
+        });
+
+        describe("instantValidation=true", () => {
+            it("should call the validate prop when a user types in the field", async () => {
+                // Arrange
+                const validate = jest.fn();
+                render(
+                    <ControlledSearchField
+                        value=""
+                        onChange={() => {}}
+                        validate={validate}
+                        instantValidation={true}
+                    />,
+                );
+                const field = await screen.findByRole("textbox");
+
+                // Act
+                await userEvent.type(field, "t");
+
+                // Assert
+                expect(validate).toHaveBeenCalledWith("t");
+            });
+
+            it("should call the onValidate prop when the field is validated after a user types in the field", async () => {
+                // Arrange
+                const onValidate = jest.fn();
+                const errorMsg = "Error message";
+                render(
+                    <ControlledSearchField
+                        value=""
+                        onChange={() => {}}
+                        instantValidation={true}
+                        validate={() => errorMsg}
+                        onValidate={onValidate}
+                    />,
+                );
+                const field = await screen.findByRole("textbox");
+
+                // Act
+                await userEvent.type(field, "t");
+
+                // Assert
+                expect(onValidate).toHaveBeenCalledWith(errorMsg);
+            });
+
+            it("should put the field in an error state if validation fails after a user types in the field", async () => {
+                // Arrange
+                const errorMsg = "Error message";
+                render(
+                    <ControlledSearchField
+                        value=""
+                        instantValidation={true}
+                        onChange={() => {}}
+                        validate={() => errorMsg}
+                    />,
+                );
+                const field = await screen.findByRole("textbox");
+
+                // Act
+                await userEvent.type(field, "t");
+
+                // Assert
+                expect(field).toHaveAttribute("aria-invalid", "true");
+            });
+        });
+
+        describe("instantValidation=false", () => {
+            it("should call the validate prop when a user leaves the field", async () => {
+                // Arrange
+                const validate = jest.fn();
+                render(
+                    <ControlledSearchField
+                        value=""
+                        onChange={() => {}}
+                        validate={validate}
+                        instantValidation={false}
+                    />,
+                );
+                const field = await screen.findByRole("textbox");
+
+                // Act
+                await userEvent.type(field, "t");
+                await userEvent.tab();
+
+                // Assert
+                expect(validate).toHaveBeenCalledWith("t");
+            });
+
+            it("should not call the validate prop before a user leaves the field", async () => {
+                // Arrange
+                const validate = jest.fn();
+                render(
+                    <ControlledSearchField
+                        value=""
+                        onChange={() => {}}
+                        validate={validate}
+                        instantValidation={false}
+                    />,
+                );
+                const field = await screen.findByRole("textbox");
+
+                // Act
+                await userEvent.type(field, "t");
+
+                // Assert
+                expect(validate).not.toHaveBeenCalled();
+            });
+
+            it("should call the onValidate prop when the field is validated after a user leaves the field", async () => {
+                // Arrange
+                const onValidate = jest.fn();
+                const errorMsg = "Error message";
+                render(
+                    <ControlledSearchField
+                        value=""
+                        onChange={() => {}}
+                        instantValidation={false}
+                        validate={() => errorMsg}
+                        onValidate={onValidate}
+                    />,
+                );
+                const field = await screen.findByRole("textbox");
+
+                // Act
+                await userEvent.type(field, "t");
+                await userEvent.tab();
+
+                // Assert
+                expect(onValidate).toHaveBeenCalledWith(errorMsg);
+            });
+
+            it("should put the field in an error state if validation fails after a user leaves the field", async () => {
+                // Arrange
+                const errorMsg = "Error message";
+                render(
+                    <ControlledSearchField
+                        value=""
+                        instantValidation={false}
+                        onChange={() => {}}
+                        validate={() => errorMsg}
+                    />,
+                );
+                const field = await screen.findByRole("textbox");
+
+                // Act
+                await userEvent.type(field, "t");
+                await userEvent.tab();
+
+                // Assert
+                expect(field).toHaveAttribute("aria-invalid", "true");
+            });
+        });
+    });
 });
diff --git a/packages/wonder-blocks-search-field/src/components/search-field.tsx b/packages/wonder-blocks-search-field/src/components/search-field.tsx
index b8416b71a..dee2054ed 100644
--- a/packages/wonder-blocks-search-field/src/components/search-field.tsx
+++ b/packages/wonder-blocks-search-field/src/components/search-field.tsx
@@ -2,14 +2,14 @@ import * as React from "react";
 import {StyleSheet} from "aphrodite";
 
 import xIcon from "@phosphor-icons/core/regular/x.svg";
-import magnifyingGlassIcon from "@phosphor-icons/core/regular/magnifying-glass.svg";
+import magnifyingGlassIcon from "@phosphor-icons/core/bold/magnifying-glass-bold.svg";
 
 import {styles as typographyStyles} from "@khanacademy/wonder-blocks-typography";
 import {View, IDProvider} from "@khanacademy/wonder-blocks-core";
 import IconButton from "@khanacademy/wonder-blocks-icon-button";
 import {TextField} from "@khanacademy/wonder-blocks-form";
 import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon";
-import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {color, semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens";
 import type {StyleType, AriaProps} from "@khanacademy/wonder-blocks-core";
 
 import {defaultLabels} from "../util/constants";
@@ -59,6 +59,30 @@ type Props = AriaProps & {
      * Test ID used for e2e testing.
      */
     testId?: string;
+    /**
+     * Whether the search field is in an error state.
+     */
+    error?: boolean;
+    /**
+     * Provide a validation for the input value.
+     * Return a string error message or null | void for a valid input.
+     *
+     * Use this for errors that are shown to the user while they are filling out
+     * a form.
+     */
+    validate?: (value: string) => string | null | void;
+    /**
+     * Called right after the SearchField is validated.
+     */
+    onValidate?: (errorMessage?: string | null | undefined) => unknown;
+    /**
+     * If true, SearchField is validated as the user types (onChange). If false,
+     * it is validated when the user's focus moves out of the field (onBlur).
+     * It is preferred that instantValidation is set to `false`, however, it
+     * defaults to `true` for consistency with form components like TextField
+     * and TextArea.
+     */
+    instantValidation?: boolean;
     /**
      * Called when the value has changed.
      */
@@ -123,6 +147,10 @@ const SearchField: React.ForwardRefExoticComponent<
         placeholder,
         style,
         testId,
+        error,
+        instantValidation = true,
+        validate,
+        onValidate,
         onClick,
         onChange,
         onFocus,
@@ -146,13 +174,14 @@ const SearchField: React.ForwardRefExoticComponent<
 
     // @ts-expect-error [FEI-5019] - TS2322 - Type '() => JSX.Element | null' is not assignable to type '() => ReactElement<any, string | JSXElementConstructor<any>>'.
     const maybeRenderClearIconButton: () => React.ReactElement = () => {
-        if (!value.length) {
+        if (!value.length || disabled) {
             return null;
         }
 
         return (
             <IconButton
                 icon={xIcon}
+                size="small"
                 kind="tertiary"
                 onClick={handleClear}
                 style={styles.dismissIcon}
@@ -167,8 +196,14 @@ const SearchField: React.ForwardRefExoticComponent<
                 <View onClick={onClick} style={[styles.inputContainer, style]}>
                     <PhosphorIcon
                         icon={magnifyingGlassIcon}
-                        size="medium"
-                        color={color.offBlack64}
+                        size="small"
+                        color={
+                            disabled
+                                ? light
+                                    ? color.white32
+                                    : semanticColor.action.disabled.default
+                                : semanticColor.icon.primary
+                        }
                         style={styles.searchIcon}
                         aria-hidden="true"
                     />
@@ -178,10 +213,14 @@ const SearchField: React.ForwardRefExoticComponent<
                         autoFocus={autoFocus}
                         disabled={disabled}
                         light={light}
+                        instantValidation={instantValidation}
+                        validate={validate}
+                        onValidate={onValidate}
                         onChange={onChange}
                         onFocus={onFocus}
                         onBlur={onBlur}
                         placeholder={placeholder}
+                        error={error}
                         ref={(node) => {
                             // We have to set the value of both refs to
                             // the HTMLInputElement from TextField.
@@ -222,20 +261,13 @@ const styles = StyleSheet.create({
     dismissIcon: {
         margin: 0,
         position: "absolute",
-        right: 0,
-        ":hover": {
-            border: "none",
-        },
+        right: spacing.xxxSmall_4,
     },
     inputStyleReset: {
         display: "flex",
         flex: 1,
-        "::placeholder": {
-            color: color.offBlack64,
-        },
         width: "100%",
-        color: "inherit",
-        paddingLeft: spacing.large_24 + spacing.medium_16,
+        paddingLeft: spacing.xLarge_32,
         paddingRight: spacing.large_24 + spacing.medium_16,
     },
 });