Resolver options: raw values vs parsed values

Every resolver takes an optional third argument, resolverOptions. Its raw flag changes what your submit handler receives from the resolver.

All React Hook Form Resolvers examples React Hook Form Resolvers: usage and stats

Resolver options: raw values vs parsed values: screenshot of the example below running — The code below, running in Chromium on our server (Oct 12, 2026). Press Run to see it live and change it.

How it works

The resolver signature. A resolver takes the schema, optional schema options and optional resolver options. The example calls zodResolver(schema, undefined, { raw }). [1]
Same schema, two forms. Both panels validate the same schema: a required name and a newsletter flag with .default(true). Only raw differs. [1]
Compare the output. The left panel shows the parsed result, where the schema has added newsletter: true. The right panel, with raw: true, shows the form values as they were typed. [1]

Run and edit it

It runs in your browser, in a sandboxed frame that cannot see this site; the packages load from esm.sh only after you press Run.

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

const schema = z.object({
  name: z.string().min(1, { message: 'Required' }),
  newsletter: z.boolean().default(true),
});

function Panel({ raw }) {
  const [result, setResult] = useState(null);
  const { register, handleSubmit, formState: { errors } } = useForm({
    // third argument: resolverOptions
    resolver: zodResolver(schema, undefined, { raw }),
    defaultValues: { name: 'Ada' },
  });
  const submit = handleSubmit((data) => setResult(data), () => setResult(null));
  useEffect(() => { submit(); }, []); // submit once on load

  return (
    <form onSubmit={submit} style={{ width: 240, padding: 18, borderRadius: 14, background: '#fff', color: '#111' }}>
      <div style={{ fontWeight: 700, marginBottom: 8 }}>{`{ raw: ${raw} }`}</div>
      <input {...register('name')}
        style={{ width: '100%', boxSizing: 'border-box', padding: 8, borderRadius: 8, border: '1px solid #cbd5e1' }} />
      {errors.name?.message && <p style={{ color: '#dc2626', margin: '6px 0 0' }}>{errors.name?.message}</p>}
      <button type="submit" style={{ marginTop: 10, padding: '6px 14px', border: 0, borderRadius: 8, background: '#0f766e', color: '#fff', fontWeight: 600 }}>
        Submit
      </button>
      <pre style={{ margin: '12px 0 0', padding: 10, borderRadius: 8, background: '#0f172a', color: '#a7f3d0', font: '12px ui-monospace, monospace', minHeight: 60 }}>
        {result ? JSON.stringify(result, null, 2) : 'invalid'}
      </pre>
    </form>
  );
}

export default function App() {
  return (
    <div style={{ height: 360, background: '#111', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 18, font: '14px system-ui' }}>
      <Panel raw={false} />
      <Panel raw={true} />
    </div>
  );
}

Ctrl/⌘ + Enter runs

Both forms submit on load; edit the names and press Submit to compare the two outputs again. Code written by AgentGid [1].

Checked Oct 12, 2026: it starts without errors in Chromium with @hookform/resolvers 5.9.1, react 19.3.0, react-dom 19.3.0, react-hook-form 7.90.0, zod 4.6.6. Needs WebGL.

More React Hook Form Resolvers examples

Zod validation with zodResolver Number fields with zodResolver Schema defaults with zodResolver Showing every error with criteriaMode

Sources

Docs: react-hook-form › resolvers

Explanations written by AgentGid from the official docs; the numbers in brackets point here. The code marked "written by AgentGid" is ours and free to copy.

Building something with React Hook Form Resolvers? Ask AgentGid →