useForm, register and handleSubmit in React Hook Form

useForm gives you register to connect inputs to the form and handleSubmit to receive their values when the form is submitted.

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

useForm, register and handleSubmit in React Hook Form: 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

Call useForm. useForm() returns the helpers the form needs. This example only takes register and handleSubmit, the same names the Quickstart destructures. [1]
Register each input. Spread register("firstName") into an <input> to add it to the form under that name. The submitted object uses these names as keys. [1]
Wrap your submit handler. Pass your callback to handleSubmit and put the result on the form's onSubmit. Here the callback stores the values in state so they appear in the panel on the right. [2]

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 { useState } from "react";
import { useForm } from "react-hook-form";

const S = {
  page: { minHeight: "100vh", display: "flex", alignItems: "center", justifyContent: "center", gap: 16, background: "#111", color: "#e8eaf0", fontFamily: "system-ui, sans-serif" },
  card: { background: "#1c1f26", padding: 18, borderRadius: 12, width: 250, boxShadow: "0 8px 24px rgba(0,0,0,.45)" },
  h: { margin: "0 0 10px", fontSize: 17 },
  label: { display: "block", fontSize: 13, color: "#a9b0c0" },
  input: { display: "block", width: "100%", boxSizing: "border-box", padding: "7px 9px", marginTop: 4, borderRadius: 6, border: "1px solid #3a3f4b", background: "#0f1115", color: "#e8eaf0", fontSize: 14 },
  err: { color: "#ff7b7b", fontSize: 12, margin: "3px 0 8px", minHeight: 15 },
  btn: { marginTop: 6, width: "100%", padding: "9px 0", border: 0, borderRadius: 6, background: "#6c8cff", color: "#fff", fontWeight: 600, fontSize: 14, cursor: "pointer" },
  out: { background: "#1c1f26", padding: 18, borderRadius: 12, width: 220, minHeight: 120, fontFamily: "ui-monospace, monospace", fontSize: 13, whiteSpace: "pre-wrap", color: "#9fe6a0" },
};

export default function App() {
  const { register, handleSubmit } = useForm();
  const [submitted, setSubmitted] = useState(null);

  // handleSubmit passes the collected values to this callback
  const onSubmit = (data) => setSubmitted(data);

  return (
    <div style={S.page}>
      <form onSubmit={handleSubmit(onSubmit)} style={S.card}>
        <h3 style={S.h}>Sign up</h3>
        <label style={S.label}>First name
          <input {...register("firstName")} placeholder="Ada" style={S.input} />
        </label>
        <div style={S.err} />
        <label style={S.label}>Last name
          <input {...register("lastName")} placeholder="Lovelace" style={S.input} />
        </label>
        <div style={S.err} />
        <label style={S.label}>Email
          <input type="email" {...register("email")} placeholder="ada@example.com" style={S.input} />
        </label>
        <button type="submit" style={S.btn}>Submit</button>
      </form>
      <div style={S.out}>
        <div style={{ color: "#a9b0c0", marginBottom: 6 }}>onSubmit received:</div>
        {submitted ? JSON.stringify(submitted, null, 2) : "Type something and press Submit"}
      </div>
    </div>
  );
}

Ctrl/⌘ + Enter runs

Type into the fields and press Submit: the right panel shows the object your onSubmit callback received. Code written by AgentGid [1].

Checked Oct 12, 2026: it starts without errors in Chromium with react-hook-form 7.90.0, react 19.3.0, react-dom 19.3.0. Needs WebGL.

More React Hook Form examples

Required fields in React Hook Form Email validation with pattern in React Hook Form Custom validation with validate in React Hook Form Showing formState errors in React Hook Form

Sources

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? Ask AgentGid →