【React Hook Form × Zod × MUI】フォームを作ろう！

はじめに この記事で作るフォームのソースコードはこちら↓になります。 使用技術 TypeScript React Hook Form Zod MUI 作成するフォーム この記事で作成するフォームがこちらになります。 フォームの内容を整理していきます。 テキスト入力要素 必須入力と任意入力で二つの要素があります。 検索ボタンを押した時にエラーメッセージが出るのは必須入力の要素のみで、任意入力の方ではエラーは表示されません。 セレクト要素 テキスト入力要素と同じく、必須選択と任意選択で二つの要素があります。 また、こちらもテキスト入力要素と同じく、検索ボタンを押した時にエラーメッセージが出るのは必須選択の要素のみで、任意選択の方ではエラーは表示されません。 実装 それでは上記フォームを実装していきます！ 実装方針 実装は以下の流れで進めていきます。 zodを用いてschemaを定義 React

[hisasann]

この記事にかなり助けられた！