safe-action-forms

Use useHookFormAction from @next-safe-action/adapter-react-hook-form/hooks, passing your safe action and zodResolver(schema). It returns form, action, and handleSubmitWithAction, which you attach to the form's onSubmit. Server validationErrors are automatically mapped to react-hook-form field errors.

Use useAction with onSubmit and e.preventDefault() for simple forms and programmatic triggers. Use useStateAction with <form action={formAction}> when you need the server to receive prevResult, such as stateful forms or multi-step wizards. Note that useStateAction requires the action to be defined with .stateAction().

Use zod-form-data to define a schema with zfd.file() and refinements for size and MIME type, then pass FormData directly to execute on the client. Multiple files are supported via zfd.repeatableOfType, and file uploads can be combined with bind arguments like a post ID.

The adapter converts next-safe-action's nested validationErrors shape (e.g., { email: { _errors: [...] } }) into react-hook-form's FieldErrors format using mapToHookFormErrors. Multiple messages per field are joined with a configurable separator, and root-level errors map to the root key.

Yes, define .bindArgsSchemas() on the action (e.g., a UUID for a postId), then call action.bind(null, postId) on the client before passing it to useAction. The bound values arrive in the handler as bindArgsParsedInputs alongside parsedInput.