Standalone Quickstart Login

Same mental model as Next adapter, but with an explicit submit function.

Impact

Muito alto

Differential

Fast proof that hookform-action is not Next-only.

Message

Troque para submit() e mantenha a mesma DX.

Recipe

This example is intentionally copy-paste ready for Vite, Remix, Astro, or any React SPA.

import { useActionForm } from "hookform-action-standalone";
import { z } from "zod";

const schema = z.object({
  email: z.string().email("Invalid email"),
  password: z.string().min(8, "Min 8 chars"),
});

export function LoginForm() {
  const form = useActionForm({
    submit: async (values) => {
      const res = await fetch("/api/login", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(values),
      });
      return res.json();
    },
    schema,
    validationMode: "onChange",
    defaultValues: { email: "", password: "" },
  });

  return (
    <form onSubmit={form.handleSubmit()}>
      <input {...form.register("email")} />
      <input type="password" {...form.register("password")} />
      <button disabled={form.formState.isPending}>Sign In</button>
    </form>
  );
}

Strategic point: this removes framework lock-in objections during evaluation.