フォーム

React Hook Form ＋ Zod ／ TanStack Form

迷ったらこれ

React Hook Form ＋ Zod

使っている人が多く、調べると答えが見つかりやすい。shadcn/ui のフォームもこの組み合わせ

見た目をくらべる

同じものを、それぞれのライブラリで作りました。触ってみてください

React Hook Form ＋ Zod

TanStack Form

書き方をくらべる

コードを書き換えると、右の見た目が変わります

このデモを自分のプロジェクトで動かすには：npx shadcn@latest add button input label

import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import { z } from "zod"
import { Button } from "./components/ui/button"
import { Input } from "./components/ui/input"
import { Label } from "./components/ui/label"

// ① 決まり：入力チェックのルールを、1か所にまとめて書く
const schema = z.object({
  email: z.email("メールアドレスの形で入力してください"),
  password: z.string().min(8, "8文字以上にしてください").regex(/[0-9]/, "数字を含めてください"),
})

// 決まりから、入力の値の型を作る
type FormValues = z.infer<typeof schema>

export default function App() {
  // フォームの仕組みを用意する（決まりは zodResolver で渡す）
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<FormValues>({ resolver: zodResolver(schema) })

  // ルールに全部合ったときだけ呼ばれる
  const onSubmit = (values: FormValues) => {
    alert("ログイン：" + values.email)
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col gap-4 p-5">
      <div className="flex flex-col gap-2">
        <Label htmlFor="email">メールアドレス</Label>
        {/* ② つなぐ：入力欄をフォームの仕組みにつなぐ */}
        <Input id="email" {...register("email")} />
        {/* ③ 知らせる：ルールに合わないとき、まちがいを出す */}
        {errors.email && (
          <p className="text-sm text-destructive">{errors.email.message}</p>
        )}
      </div>

      <div className="flex flex-col gap-2">
        <Label htmlFor="password">パスワード</Label>
        <Input id="password" type="password" {...register("password")} />
        {errors.password && (
          <p className="text-sm text-destructive">{errors.password.message}</p>
        )}
      </div>

      <Button type="submit">ログイン</Button>
    </form>
  )
}

Open Sandbox

くらべる

2026年10月時点

React Hook Form ＋ Zod

迷ったらこれ公式 ↗

特徴

いちばん使われている組み合わせ。入力欄に register を付けるだけで値を集められ、入力チェックの決まりは Zod でまとめて書く

向いている場面

迷ったらこれ。shadcn/ui のフォームもこの組み合わせで作られている

TanStack Form

公式 ↗

特徴

TanStack Query などと同じ仲間の、新しめのライブラリ。入力欄ごとに form.Field で囲んで書く。型（TypeScript）のチェックが細かい

向いている場面

TanStack のほかのライブラリと合わせたい。入力欄が多く、型で間違いを防ぎたい