form-patterns

Form Patterns

React Hook Form + Zod

Basic Form

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';

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

type FormData = z.infer<typeof schema>;

export function LoginForm() {
  const { register, handleSubmit, formState: { errors, isSubmitting } } = useForm<FormData>({
    resolver: zodResolver(schema),
  });

  const onSubmit = async (data: FormData) => {
    await login(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
      <div>
        <label htmlFor="email">Email</label>
        <input {...register('email')} id="email" type="email" />
        {errors.email && <p className="text-red-600">{errors.email.message}</p>}
      </div>

      <div>
        <label htmlFor="password">Password</label>
        <input {...register('password')} id="password" type="password" />
        {errors.password && <p className="text-red-600">{errors.password.message}</p>}
      </div>

      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? 'Logging in...' : 'Log In'}
      </button>
    </form>
  );
}

Multi-Step Form

const [step, setStep] = useState(1);

const schema = z.object({
  // Step 1
  personal: z.object({
    name: z.string().min(1),
    email: z.string().email(),
  }),
  // Step 2
  address: z.object({
    street: z.string().min(1),
    city: z.string().min(1),
  }),
});

// Validate current step only
const stepSchemas = {
  1: schema.pick({ personal: true }),
  2: schema.pick({ address: true }),
};

const nextStep = async () => {
  const isValid = await trigger(); // Validate current step
  if (isValid) setStep(step + 1);
};

Form with Server Action

'use client';

import { useFormState, useFormStatus } from 'react-dom';
import { createPost } from './actions';

export function PostForm() {
  const [state, formAction] = useFormState(createPost, null);

  return (
    <form action={formAction} className="space-y-4">
      <div>
        <label htmlFor="title">Title</label>
        <input name="title" id="title" required />
        {state?.errors?.title && (
          <p className="text-red-600">{state.errors.title}</p>
        )}
      </div>

      <SubmitButton />
    </form>
  );
}

function SubmitButton() {
  const { pending } = useFormStatus();

  return (
    <button type="submit" disabled={pending}>
      {pending ? 'Creating...' : 'Create Post'}
    </button>
  );
}