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

Form Integration

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

Stateful Form
stateAction with React useActionState — the previous result is available in the server function.
isPending: false
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=2599ab15..., age=75. These are validated by bindArgsSchemas.
Status:Idle
Result:
{}