このページ上で試せる、実際に動くReact Hook Formのサンプル集です。Zodによる検証、非同期チェック、配列フィールド、複数ステップのウィザード、ファイルのアップロード、Controller、Next.jsのサーバーアクションを扱います。
React Hook Formは、非制御の入力欄でReactのフォームを扱います。useFormを呼び出し、各入力欄にregister("name")を展開し、送信用の関数をhandleSubmitで包みます。Zodのスキーマで検証するにはzodResolverを追加します。以下のフォームはこのページ上で動作します。組み込みルール、Zod、非同期チェック、配列フィールド、ウィザード、ファイルのアップロード、サーバーアクションを扱っています。
インストール
各デモに入力し、わざと間違えたまま送信してから、間違いを直してみてください。横に表示されたコードが、実際に動いているコードです。エラーはaria-describedbyで入力欄と結び付けられ、role="alert"で読み上げられるので、スクリーンリーダーでもフォームを使えます。
React Hook Formは入力欄を非制御のまま保ち、refを通して値を読み取るため、再描画が少なく済みます。Formikはすべての値をReactの状態として保持します。大きなフォームでは、たいていReact Hook Formのほうが速く、必要なコードも少なくなります。
zodと@hookform/resolversをインストールし、z.objectでスキーマを定義して、useFormにresolver: zodResolver(schema)を渡します。フォームの型にはz.infer<typeof schema>を使い、エラーメッセージはスキーマから取得されます。
保存が成功した後、送信ハンドラーの中でreset()を呼ぶか、reset(values)で新しい値を渡します。isSubmitSuccessfulがtrueになったタイミングで、エフェクトの中からresetを呼ぶこともできます。
HTMLの入力欄はテキストを返すからです。本物の数値を得るには、valueAsNumber: trueを付けて登録するか、Zodのスキーマでz.coerce.number()を使います。
はい。shadcn/uiには、React Hook FormのControllerを土台にしたFormコンポーネントが用意されています。当サイトのshadcnのフォームとテーブルのガイドで、動くサンプルとともに手順を解説しています。
よく使うAPI
registerは名前で入力欄を結び付け、HTMLと同じ形式のルールを受け取ります。送信に失敗すると、errorsにフィールドごとのメッセージが入ります。
1つのスキーマから、検証ルール、エラーメッセージ、TypeScriptの型が得られます。refineは2つのフィールドをまとめてチェックし、pathはどのフィールドにエラーを表示するかを指定します。
validate関数はPromiseを返してもかまいません。値に問題がなければtrueを、エラーとして表示したい場合は文字列を返します。キーを押すたびに実行されないよう、モードonBlurと組み合わせましょう。
useFieldArrayはフォーム内のリストを管理します。キーにはインデックスではなく必ずfield.idを使いましょう。そうすれば、Reactは各入力欄を正しい行に結び付けたまま保ちます。
すべてのステップで1つのフォームを使い、次へ進む前に現在のステップのフィールドを指定してtriggerを呼びます。前のステップの値はフォームに残るので、最後の送信ですべての値がそろいます。
ファイルの入力欄もほかと同じように登録でき、値はFileListになります。validateでサイズと形式をチェックし、FormDataでファイルを送信します。
多くの日付ピッカーや独自のセレクトのように、refを公開していない入力欄はControllerを通して接続します。Controllerは、valueとonChangeをコンポーネントに渡します。
すばやいフィードバックのためにブラウザーで検証し、ブラウザーの検証は回避できてしまうのでサーバーでもう一度検証します。1つのZodスキーマを共有すれば両者の内容がそろい、setErrorでサーバー側の問題を正しいフィールドに表示できます。
普通のHTMLフォームがよければ、こちらをご覧ください：
送信内容：
メールアドレス
名前を入力してください
メールアドレスを入力してください
メールアドレスが正しくないようです
送信中...
送信
有効なメールアドレスを入力してください
8文字以上
パスワードが一致しません
パスワード
パスワード（確認）
アカウントを作成
このデモでは、少し待つことでサーバーを模擬しています。使用済み：admin, studio, hello。
ユーザー名
ユーザー名を選んでください
そのユーザー名は使われています
確認中...
取得
ロゴデザイン
項目 {n} の名前
項目 {n} の数量
項目
削除
項目を追加
保存
必須
ステップ {n} / {total}
会社名
チームの人数
プラン
選択してください
スターター
チーム
強調表示された項目を入力してください。
戻る
次へ
完了
ロゴ（PNGまたはJPG、2 MBまで。ファイルはブラウザー内にとどまります）
ファイルを選択
最大2 MB
PNGまたはJPGのみ
アップロード
10以上
予算：
無料で始める · クレジットカード不要