From b4ee463641052d1cb4beb546f6cb5856f840a94c Mon Sep 17 00:00:00 2001 From: dfedoryshchev Date: Sat, 25 Apr 2026 09:12:57 +0100 Subject: [PATCH] docs(react-form): show how to render formErrorMap.onChange when using Standard Schema The form-level error rendering example uses a function validator returning a string, which renders directly. Readers applying the same pattern to a Standard Schema validator (Zod, Valibot, ArkType, Effect/Schema) hit a TypeScript error because errorMap.onChange is then Record, not a string. Add a note after the example with the iteration pattern needed for the Standard Schema case. Closes #1564 --- docs/framework/react/guides/validation.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/docs/framework/react/guides/validation.md b/docs/framework/react/guides/validation.md index 969a9fbfa..387b49bdf 100644 --- a/docs/framework/react/guides/validation.md +++ b/docs/framework/react/guides/validation.md @@ -218,6 +218,22 @@ export default function App() { } ``` +_Note:_ The example above uses a function validator that returns a `string`. When using a [Standard Schema](#standard-schema-libraries) validator (Zod, Valibot, ArkType, Effect/Schema), `state.errorMap.onChange` is typed as `Record` instead, keyed by field name. Iterate the record to render the messages: + +```tsx +{formErrorMap.onChange ? ( +
+ + There was an error on the form:{' '} + {Object.values(formErrorMap.onChange) + .flat() + .map((issue) => issue.message) + .join(', ')} + +
+) : null} +``` + ### Setting field-level errors from the form's validators You can set errors on the fields from the form's validators. One common use case for this is validating all the fields on submit by calling a single API endpoint in the form's `onSubmitAsync` validator.