Hero Hook Form API / ServerActionForm

Function: ServerActionForm()

ServerActionForm<T>(props): Element

Defined in: components/ServerActionForm.tsx:144

ServerActionForm - A form component compatible with Next.js Server Actions.

Type Parameters

T

T extends FieldValues

The form data type

Parameters

props

ServerActionFormProps<T>

Component props

Returns

Element

The rendered form component

Description

This component works with Next.js authentication patterns by using native HTML form submission with Server Actions, while still providing the beautiful HeroUI field components. It uses React’s useActionState hook to manage form state and handle server responses.

Validation Options:

Server-side only (default): Form submits directly to Server Action
Client + Server (optional): Pass clientValidationSchema for client-side validation before submission. Server Action still validates (defense in depth).

Important Notes:

If your Server Action calls redirect(), success messages won’t display (the page navigates away). Use URL params or cookies for success messages when redirecting.
Server Actions receive FormData, not JSON, so field values are strings

Examples

Server-side only validation:


import { ServerActionForm, FormFieldHelpers } from "@rachelallyson/hero-hook-form";
import { signup } from "@/app/actions/auth";
 
<ServerActionForm
  action={signup}
  fields={[
    FormFieldHelpers.input("name", "Name"),
    FormFieldHelpers.input("email", "Email", "email"),
    FormFieldHelpers.input("password", "Password", "password"),
  ]}
/>

Client + Server validation:


import { ServerActionForm, FormFieldHelpers } from "@rachelallyson/hero-hook-form";
import { signup } from "@/app/actions/auth";
import { z } from "zod";
 
const signupSchema = z.object({
  name: z.string().min(2),
  email: z.string().email(),
  password: z.string().min(8),
});
 
<ServerActionForm
  action={signup}
  clientValidationSchema={signupSchema}
  fields={[
    FormFieldHelpers.input("name", "Name"),
    FormFieldHelpers.input("email", "Email", "email"),
    FormFieldHelpers.input("password", "Password", "password"),
  ]}
  onError={(error) => {
    console.error("Form errors:", error.errors);
  }}
  onSuccess={(data) => {
    console.log("Form submitted:", data);
  }}
/>

See

ZodForm for client-side only forms with Zod validation
ConfigurableForm for forms without Server Actions