Email validation with pattern in React Hook Form

The pattern rule checks an input against a regular expression, and its message is what you show when the value does not match.

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

Email validation with pattern 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

Combine required and pattern. The email input gets two rules: required: "Required" and pattern. The rule object pairs a value regex with a message, following the example on the React Hook Form site. [1]
Show the message. errors.email.message holds the text of whichever rule failed, so one line under the input covers both the empty case and the bad-format case. [1]
Handle the valid value. The submit callback receives the form values; this example saves values.email and shows it in the right panel. [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 { 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" },
};

const EMAIL = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;

export default function App() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  const [email, setEmail] = useState("");

  return (
    <div style={S.page}>
      <form onSubmit={handleSubmit((values) => setEmail(values.email))} style={S.card}>
        <h3 style={S.h}>Newsletter</h3>
        <label style={S.label}>Email address
          <input
            type="text"
            placeholder="try: ada@lovelace"
            style={S.input}
            {...register("email", {
              required: "Required",
              pattern: { value: EMAIL, message: "invalid email address" },
            })}
          />
        </label>
        <div style={S.err}>{errors.email && errors.email.message}</div>
        <button type="submit" style={S.btn}>Subscribe</button>
      </form>
      <div style={S.out}>
        {email ? "Subscribed:\n" + email : "Submit an empty field, then a bad address, then a good one"}
      </div>
    </div>
  );
}

Ctrl/⌘ + Enter runs

Submit an empty field, then something like ada@lovelace, then a full address to see each state. 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

useForm, register and handleSubmit in React Hook Form Required fields in React Hook Form Custom validation with validate in React Hook Form Showing formState errors in React Hook Form

Sources

React Hook Form website

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 →