back
loading skill details...
Use when integrating next-safe-action with forms -- react-hook-form adapter (useHookFormAction, useHookFormOptimisticAction, mapToHookFormErrors), native HTML…
next-safe-action Form Integration
Options
Approach
When to Use
useAction + native form
Simple forms, no complex validation UI, programmatic triggers
useStateAction + <form action={formAction}>
Forms with state tracking, need prevResult access, full callbacks
useHookFormAction (RHF adapter)
Complex forms with field-level errors, validation on change/blur
useHookFormOptimisticAction
RHF forms with optimistic UI updates
Quick Start — useStateAction Form
"use client";
import { useStateAction } from "next-safe-action/hooks";
import { submitContact } from "@/app/actions";don't have the plugin yet? install it then click "run inline in claude" again.