next-safe-actionplayground
Overview
  • Home
Core
  • Core Actions
  • Validation Errors
  • Middleware
Hooks
  • React Hooks
  • Optimistic Updates
Integrations
  • Form Integration
  • React Hook Form
  • TanStack Query
Framework
  • Navigation & Framework
  • GitHub

Form Integration

Stateful forms with useActionState, file uploads, and bind arguments.

Stateful Form
stateAction with useStateAction hook, the previous result is available in the server function. Full callback and status support.
isPending: falsestatus: idle
Result:
{
  "data": {
    "newName": "jane"
  }
}
File Upload
Using zod-form-data with zfd.file() schema to validate file uploads.
Status:Idle
Result:
{}

Loading bind arguments...

Bind Arguments
Server-generated bind args: userId=63db9885..., age=38. These are validated by bindArgsSchemas.
Status:Idle
Result:
{}