Generic Example: React Hook Form + Zod

// src/features/example/schemas.ts
import { z } from "zod";

export const ExampleSchema = z.object({
  name: z.string().min(1).max(100),
});

export type ExampleValues = z.infer<typeof ExampleSchema>;

// src/features/example/components/ExampleForm.tsx
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { ExampleSchema, type ExampleValues } from "../schemas";

export function ExampleForm() {
  const form = useForm<ExampleValues>({ resolver: zodResolver(ExampleSchema) });

  return (
    <form onSubmit={form.handleSubmit(async (values) => { /* submit */ })}>
      <label>
        Name
        <input {...form.register("name")} />
      </label>
      {form.formState.errors.name && <div role="alert">{form.formState.errors.name.message}</div>}
      <button type="submit">Save</button>
    </form>
  );
}