form-atoms · MiroslavPetrik · Oct 24, 2025 · Oct 24, 2025 · Oct 24, 2025
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,15 @@
+# [6.0.0-next.1](https://github.com/form-atoms/field/compare/v5.4.0...v6.0.0-next.1) (2025-10-24)
+
+
+* Zod 4 ([#129](https://github.com/form-atoms/field/issues/129)) ([c5ccdc7](https://github.com/form-atoms/field/commit/c5ccdc78224fa25b641ac04f2cff316b04dc8acd))
+
+
+### BREAKING CHANGES
+
+* zod4 is now being used
+
+* fix story
+
 # [5.4.0](https://github.com/form-atoms/field/compare/v5.3.3...v5.4.0) (2025-10-22)
 
 

diff --git a/package.json b/package.json
@@ -92,7 +92,7 @@
     "typescript-eslint": "^8.46.2",
     "vite": "^7.1.11",
     "vitest": "^4.0.0",
-    "zod": "3.25.76"
+    "zod": "4.1.12"
   },
   "publishConfig": {
     "access": "public"
@@ -128,6 +128,6 @@
     "jotai": "^2",
     "jotai-effect": "^2",
     "react": ">=16.8",
-    "zod": "^3"
+    "zod": "^4"
   }
 }
diff --git a/src/components/radio-group/RadioGroup.stories.tsx b/src/components/radio-group/RadioGroup.stories.tsx
@@ -163,7 +163,7 @@ export const RequiredCustomAddress = radioGroupStory({
       value: undefined,
       schema: z.object(
         { street: z.string(), city: z.string() },
-        { required_error: "Please choose shipping address." },
+        { error: "Please choose shipping address." },
       ),
     }),
     options: addresses,

diff --git a/src/components/select/Select.stories.tsx b/src/components/select/Select.stories.tsx
@@ -126,7 +126,7 @@ export const RequiredAddress = selectStory({
           city: z.string(),
           zip: z.string(),
         },
-        { required_error: "Please select address." },
+        { error: "Please select address." },
       ),
     }),
     options: addresses,

diff --git a/src/components/select/Select.test.tsx b/src/components/select/Select.test.tsx
@@ -137,7 +137,7 @@ describe("<Select />", () => {
 
     const schema = z.object({ id: z.string(), username: z.string() });
 
-    type User = (typeof schema)["_output"];
+    type User = z.output<typeof schema>;
 
     const props = {
       field: zodField({

diff --git a/src/fields/array-field/arrayField.test.ts b/src/fields/array-field/arrayField.test.ts
@@ -62,7 +62,7 @@ describe("arrayField()", () => {
 
       await act(async () => actions.current.validate());
       expect(errors.current).toEqual([
-        "Array must contain at most 2 element(s)",
+        "Too big: expected array to have <=2 items",
       ]);
     });
   });

diff --git a/src/fields/array-field/arrayField.ts b/src/fields/array-field/arrayField.ts
@@ -1,18 +1,18 @@
-import type { ArrayCardinality, ZodAny, ZodArray, ZodSchema } from "zod";
+import type { ZodAny, ZodArray, ZodSchema } from "zod";
 import { z } from "zod";
 
 import { prepareSchema } from "../../utils";
 import { FieldConfig } from "../field";
 import { type ZodField, zodField } from "../zod-field";
 
 export type ZodArrayField<Element extends ZodSchema = ZodAny> = ZodField<
-  ZodArray<Element, ArrayCardinality>,
-  ZodArray<Element, ArrayCardinality>
+  ZodArray<Element>,
+  ZodArray<Element>
 >;
 
 export type ArrayFieldParams<ElementSchema extends z.Schema> = FieldConfig<
-  ZodArray<ElementSchema, "atleastone">,
-  ZodArray<ElementSchema, "many">
+  ZodArray<ElementSchema>,
+  ZodArray<ElementSchema>
 >;
 
 export const arrayField = <ElementSchema extends z.Schema>({

diff --git a/src/fields/array-field/stringArrayField.test-d.ts b/src/fields/array-field/stringArrayField.test-d.ts
@@ -4,19 +4,18 @@ import { FormFieldSubmitValues } from "../../components/form";
 
 import type { StringArrayField } from "./stringArrayField";
 
-test("required stringArrayField has '[string, ...string[]]' submit value", () => {
-  expectTypeOf<
-    FormFieldSubmitValues<{ field: StringArrayField }>
-  >().toEqualTypeOf<{
-    field: [string, ...string[]];
-  }>();
-});
+// test.skip("required stringArrayField has '[string, ...string[]]' submit value", () => {
+//   expectTypeOf<
+//     FormFieldSubmitValues<{ field: StringArrayField }>
+//   >().toEqualTypeOf<{
+//     field: [string, ...string[]];
+//   }>();
+// });
 
 test("optional stringArrayField has 'string[]' submit value", () => {
   expectTypeOf<
     FormFieldSubmitValues<{ field: ReturnType<StringArrayField["optional"]> }>
   >().toEqualTypeOf<{
-    // TODO: narrow?
-    field: [string, ...string[]] | string[];
+    field: string[];
   }>();
 });
diff --git a/src/fields/boolean-field/booleanField.ts b/src/fields/boolean-field/booleanField.ts
@@ -16,6 +16,6 @@ export const booleanField = ({
 }: Omit<FieldConfig<ZodBoolean>, "schema" | "optionalSchema"> = {}) =>
   zodField({
     value: undefined,
-    schema: z.boolean({ required_error }),
+    schema: z.boolean({ error: required_error }),
     ...config,
   });
diff --git a/src/fields/checkbox-field/checkboxField.ts b/src/fields/checkbox-field/checkboxField.ts
@@ -29,8 +29,8 @@ export const checkboxField = ({
       true,
       required_error
         ? {
-            errorMap: (issue) => {
-              return issue.code === "invalid_literal"
+            error: (issue) => {
+              return issue.code === "invalid_value"
                 ? { message: required_error }
                 : { message: issue.message ?? "Invalid" };
             },

diff --git a/src/fields/date-field/dateField.ts b/src/fields/date-field/dateField.ts
@@ -21,7 +21,7 @@ export const dateField = ({
     value: undefined,
     ...prepareSchema({
       initial: {
-        schema: z.date({ required_error }),
+        schema: z.date({ error: required_error }),
       },
       user: { schema, optionalSchema },
     }),

diff --git a/src/fields/files-field/filesField.test-d.ts b/src/fields/files-field/filesField.test-d.ts
@@ -5,15 +5,14 @@ import type { FilesField } from "./filesField";
 
 test("required filesField has '[File, ...File[]]' submit value", () => {
   expectTypeOf<FormFieldSubmitValues<{ field: FilesField }>>().toEqualTypeOf<{
-    field: [File, ...File[]];
+    field: File[];
   }>();
 });
 
 test("optional filesField has 'File[]' submit value", () => {
   expectTypeOf<
     FormFieldSubmitValues<{ field: ReturnType<FilesField["optional"]> }>
   >().toEqualTypeOf<{
-    // TODO: narrow
-    field: [File, ...File[]] | File[];
+    field: File[];
   }>();
 });
diff --git a/src/fields/files-field/filesField.test.ts b/src/fields/files-field/filesField.test.ts
@@ -59,7 +59,7 @@ describe("filesField()", () => {
 
       await act(async () => actions.current.validate());
       expect(errors.current).toEqual([
-        "Array must contain at most 2 element(s)",
+        "Too big: expected array to have <=2 items",
       ]);
     });
   });

diff --git a/src/fields/files-field/filesField.ts b/src/fields/files-field/filesField.ts
@@ -12,8 +12,9 @@ export type FilesFieldValue = ExtractAtomValue<
 
 const isServer = typeof window === "undefined";
 
+// TODO: test server with zod4
 // the File constructor does not exist in node, so we must prevent getting reference error
-const elementSchema = isServer ? z.never() : z.instanceof(File);
+const elementSchema = isServer ? z.never() : z.file();
 
 export const filesArrayField = arrayField({ elementSchema });
 

diff --git a/src/fields/list-field/listField.test.tsx b/src/fields/list-field/listField.test.tsx
@@ -6,7 +6,7 @@ import {
   useFormSubmit,
 } from "form-atoms";
 import { describe, expect, it, vi } from "vitest";
-
+import { z } from "zod";
 import { listField } from "./listField";
 import { useFieldError } from "../../hooks";
 import { numberField } from "../number-field";
@@ -46,7 +46,7 @@ describe("listField()", () => {
       const { result } = renderHook(() => useFieldError(list));
 
       expect(result.current.error).toBe(
-        "Array must contain at least 1 element(s)",
+        "Too small: expected array to have >=1 items",
       );
     });
   });
@@ -96,7 +96,7 @@ describe("listField()", () => {
 
       await act(async () => actions.current.validate());
       expect(errors.current).toEqual([
-        "Array must contain at most 2 element(s)",
+        "Too big: expected array to have <=2 items",
       ]);
     });
   });

diff --git a/src/fields/list-field/listField.ts b/src/fields/list-field/listField.ts
@@ -1,10 +1,10 @@
 import { ListAtom, ListAtomConfig, listAtom } from "@form-atoms/list-atom";
-import { FormFieldValues, FormFields } from "form-atoms";
-import { Atom } from "jotai";
-import { ZodAny, ZodArray, z } from "zod";
+import type { FormFieldValues, FormFields } from "form-atoms";
+import type { Atom } from "jotai";
+import { type ZodArray, ZodObject, z } from "zod";
 
 import { extendAtom } from "../../atoms/extendAtom";
-import { FormFieldSubmitValues } from "../../components";
+import type { FormFieldSubmitValues } from "../../components";
 import { UserValidateConfig, prepareSchema } from "../../utils";
 import {
   DefaultRequiredAtom,
@@ -50,7 +50,7 @@ export type OptionalListField<Fields extends FormFields> = ListField<
 
 type ListFieldConfig<Fields extends FormFields> = ListAtomConfig<Fields> &
   ZodParams &
-  UserValidateConfig<ZodArray<ZodAny, "atleastone">, ZodArray<ZodAny, "many">>;
+  UserValidateConfig<ZodArray<ZodObject>, ZodArray<ZodObject>>;
 
 export const listField = <Fields extends FormFields>({
   required_error,
@@ -61,8 +61,8 @@ export const listField = <Fields extends FormFields>({
   const { validate, requiredAtom, makeOptional } = schemaValidate(
     prepareSchema({
       initial: {
-        schema: z.array(z.any()).nonempty(required_error),
-        optionalSchema: z.array(z.any()),
+        schema: z.array(z.object()).nonempty({ error: required_error }),
+        optionalSchema: z.array(z.object()),
       },
       user: { schema, optionalSchema },
     }),

diff --git a/src/fields/number-field/numberField.test.ts b/src/fields/number-field/numberField.test.ts
@@ -40,9 +40,7 @@ describe("numberField()", () => {
       const { result: errors } = renderHook(() => useFieldErrors(field));
 
       await act(async () => actions.current.validate());
-      expect(errors.current).toEqual([
-        "Number must be less than or equal to 6",
-      ]);
+      expect(errors.current).toEqual(["Too big: expected number to be <=6"]);
     });
   });
 });
diff --git a/src/fields/number-field/numberField.ts b/src/fields/number-field/numberField.ts
@@ -21,7 +21,7 @@ export const numberField = ({
     value: undefined,
     ...prepareSchema({
       initial: {
-        schema: z.number({ required_error }),
+        schema: z.number({ error: required_error }),
       },
       user: { schema, optionalSchema },
     }),

diff --git a/src/fields/string-field/stringField.test.ts b/src/fields/string-field/stringField.test.ts
@@ -40,7 +40,7 @@ describe("stringField()", () => {
       const { result: errors } = renderHook(() => useFieldErrors(field));
 
       await act(async () => actions.current.validate());
-      expect(errors.current).toEqual(["Invalid email"]);
+      expect(errors.current).toEqual(["Invalid email address"]);
     });
   });
 });
diff --git a/src/fields/string-field/stringField.ts b/src/fields/string-field/stringField.ts
@@ -21,7 +21,7 @@ export const stringField = ({
     value: undefined,
     ...prepareSchema({
       initial: {
-        schema: z.string({ required_error }),
+        schema: z.string({ error: required_error }),
       },
       user: { schema, optionalSchema },
     }),

diff --git a/src/fields/text-field/textField.test.ts b/src/fields/text-field/textField.test.ts
@@ -55,7 +55,7 @@ describe("textField()", () => {
 
       await act(async () => actions.current.validate());
       expect(errors.current).toEqual([
-        "String must contain at most 6 character(s)",
+        "Too big: expected string to have <=6 characters",
       ]);
     });
   });

diff --git a/src/fields/zod-field/Docs.mdx b/src/fields/zod-field/Docs.mdx
@@ -28,7 +28,7 @@ Returns `fieldAtom` holding value constrained by `schema` & `optionalSchema` wit
 type ZodField<
   Schema extends z.Schema,
   OptSchema extends z.Schema = ZodUndefined,
-> = FieldAtom<Schema["_output"] | OptSchema["_output"]> & {
+> = FieldAtom<z.output<Schema> | z.output<OptSchema>> & {
   optional: () => OptionalZodField<Schema, OptSchema>;
 } & Atom<
     Config & {

diff --git a/src/fields/zod-field/zodField.ts b/src/fields/zod-field/zodField.ts
@@ -14,7 +14,7 @@ import {
 type ZodFieldConfig<
   Schema extends z.Schema,
   OptSchema extends z.Schema = ZodUndefined,
-> = FieldAtomConfig<Schema["_output"] | OptSchema["_output"]> &
+> = FieldAtomConfig<z.output<Schema> | z.output<OptSchema>> &
   ValidateConfig<Schema, OptSchema>;
 
 export type ZodFieldValue<Field> =
@@ -23,9 +23,9 @@ export type ZodFieldValue<Field> =
 export type ZodFieldSubmitValue<Field> =
   Field extends ZodField<infer Schema, infer OptSchema, infer Required>
     ? Required extends WritableRequiredAtom
-      ? Schema["_output"] | OptSchema["_output"]
+      ? z.output<Schema> | z.output<OptSchema>
       : Required extends DefaultRequiredAtom
-        ? Schema["_output"]
+        ? z.output<Schema>
         : never
     : never;
 
@@ -47,7 +47,7 @@ export type ZodField<
   OptSchema extends z.Schema = ZodUndefined,
   RequiredAtom = DefaultRequiredAtom,
 > = ExtendFieldAtom<
-  Schema["_output"] | OptSchema["_output"],
+  z.output<Schema> | z.output<OptSchema>,
   { required: RequiredAtom }
 > & {
   optional: (

diff --git a/src/hooks/use-multiselect-field-props/useMultiSelectFieldProps.tsx b/src/hooks/use-multiselect-field-props/useMultiSelectFieldProps.tsx
@@ -1,10 +1,11 @@
 import { type ChangeEvent, useCallback, useMemo } from "react";
 import type { UseFieldOptions } from "form-atoms";
 import { useAtomValue } from "jotai";
-import { ArrayCardinality, ZodAny, ZodArray } from "zod";
+import type { ZodAny, ZodArray } from "zod";
+import { z } from "zod";
 
 import { UseOptionsProps, useFieldProps } from "..";
-import { ZodArrayField, ZodField, ZodFieldValue } from "../../fields";
+import type { ZodArrayField, ZodField, ZodFieldValue } from "../../fields";
 import { useIndexValue } from "./useIndexValue";
 
 export type UseMultiSelectFieldProps<Option, Field extends ZodArrayField> = {
@@ -13,11 +14,8 @@ export type UseMultiSelectFieldProps<Option, Field extends ZodArrayField> = {
 } & Pick<UseOptionsProps<Option>, "options">;
 
 export type ZodArrayFieldValue<Field> =
-  Field extends ZodField<
-    ZodArray<infer Value, ArrayCardinality>,
-    ZodArray<ZodAny, ArrayCardinality>
-  >
-    ? Value["_output"]
+  Field extends ZodField<ZodArray<infer Value>, ZodArray<ZodAny>>
+    ? z.infer<Value>
     : never;
 
 export const useMultiSelectFieldProps = <Option, Field extends ZodArrayField>(

diff --git a/yarn.lock b/yarn.lock
@@ -937,14 +937,14 @@ __metadata:
     typescript-eslint: "npm:^8.46.2"
     vite: "npm:^7.1.11"
     vitest: "npm:^4.0.0"
-    zod: "npm:3.25.76"
+    zod: "npm:4.1.12"
   peerDependencies:
     "@form-atoms/list-atom": ^2
     form-atoms: ^3
     jotai: ^2
     jotai-effect: ^2
     react: ">=16.8"
-    zod: ^3
+    zod: ^4
   languageName: unknown
   linkType: soft
 
@@ -11205,14 +11205,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"zod@npm:3.25.76":
-  version: 3.25.76
-  resolution: "zod@npm:3.25.76"
-  checksum: 10/f0c963ec40cd96858451d1690404d603d36507c1fc9682f2dae59ab38b578687d542708a7fdbf645f77926f78c9ed558f57c3d3aa226c285f798df0c4da16995
-  languageName: node
-  linkType: hard
-
-"zod@npm:^3.22.4 || ^4.0.0":
+"zod@npm:4.1.12, zod@npm:^3.22.4 || ^4.0.0":
   version: 4.1.12
   resolution: "zod@npm:4.1.12"
   checksum: 10/c5f04e6ac306515c4db6ef73cf7705f521c7a2107c8c8912416a0658d689f361db9bee829b0bf01ef4a22492f1065c5cbcdb523ce532606ac6792fd714f3c326