Custom encoder/decoder with react-hook-form and zod.

form.tsx

import React from "react";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { zodResolver } from "@hookform/resolvers/zod";
import DimensionID from "lib/quality/DimensionID";


////////////////////////////////////////////////////////////////////////////////
// Main
////////////////////////////////////////////////////////////////////////////////

export default function Main() {
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({
    mode: 'all',
    resolver: zodResolver(z.object({
      transform: z.string().transform((x, ctx) => {
        const parsed = DimensionID.safeParse(x);
        if (!parsed.success) {
          ctx.addIssue({ code: z.ZodIssueCode.custom });
          return z.NEVER; 
        }
        return parsed.data;
      }),
      refine: z.string().refine(x => DimensionID.safeParse(x).success),
    }).strict())
  });

  return (
    <div className="font-mono">
      <form onSubmit={handleSubmit((x) => { console.log(x); })}>
        <div>
          <input type="text" {...register("transform")} />
          <span className="text-red-500">{errors?.transform?.message}</span>
        </div>
        <div>
          <input type="text" {...register("refine")} />
          <span className="text-red-500">{errors?.refine?.message}</span>
        </div>
        <button>submit</button>
      </form>
    </div>
  );
}

A couple observations:

• both transform and refine will validate the inputs
• both transform and refine will model the value as a string (at least according to watch())
• onSubmit, however, transform will be the fully parsed DimensionID, while refine will still be a string