(
)}
/>
```
`TextField`に`select`を付けると、`Select`・`InputLabel`・`FormHelperText`をまとめて描画するので記述が短くなります。`defaultValues`に空文字を置けば未選択から始まります。操作対象は``で、テストから開くときは`click`ではなく`mousedown`を発火させます（SelectInputが`onMouseDown`で開くため）。
### RadioGroupと単体Checkboxの値の受け渡し
```
// 抜粋（importとuseFormの宣言は前掲のとおり）
(
} label="S" />
} label="M" />
)}
/>
(
}
label="利用規約に同意する"
/>
{fieldState.error?.message ?? ''}
)}
/>
```
`RadioGroup`は`value`と`onChange`をそのまま受け取ります。`Checkbox`は`value`ではなく`checked`で状態を持つので、`field`から`value`を抜いて`checked`へ渡し替えます。`defaultValues`に`size: 'm'`と`agree: false`を置くと、Mが初期選択・未チェックの状態で始まり、送信値は`{"plan":"pro","size":"m","agree":true}`になりました。
### 複数選択のチェックボックス群
「使用言語を複数選ぶ」のように値を配列で持つ場合は、1つの`Controller`の中でCheckboxを並べ、`onChange`で配列を作り直して渡します。
```
// 抜粋（defaultValues: { langs: [] }）
const LANGS = ['TypeScript', 'Go', 'Python'];
v.length > 0 || '1つ以上選択してください' }}
render={({ field: { value, onChange, onBlur, ref }, fieldState }) => (
使用言語
{LANGS.map((lang, i) => (
onChange(e.target.checked ? [...value, lang] : value.filter((v) => v !== lang))
}
/>
}
/>
))}
{fieldState.error?.message ?? ''}
)}
/>
```
配列の必須チェックは`required`ではなく`validate`で長さを見ます。未選択で送信するとメッセージが出て先頭のチェックボックスにフォーカスが移り、TypeScriptを選択→Pythonを選択→TypeScriptを解除→TypeScriptを再選択した結果は`{"langs":["Python","TypeScript"]}`でした。配列は操作した順に並ぶので、表示順で送りたいなら送信前に`LANGS`の順へ並べ直します。
### FormControlがerrorとrequiredを子へ配る仕組み
MUIには`form`要素そのものを包むFormコンポーネントはありません（9.5.0のexportにあるのはFormControl・FormControlLabel・FormGroup・FormHelperText・FormLabel）。`FormControl`は1項目分の入れ物で、自分に付けた`error`や`required`をContext経由で子の`FormLabel`・`FormHelperText`へ配ります。
``の中に`FormLabel`と`FormHelperText`を置くと、両方に`Mui-error`クラスが付き、ラベルには必須の「\*」が付きました。上のチェックボックスの例で`FormHelperText`に`error`を個別に書かなくてよいのはこの仕組みのためです。自作の部品で同じ状態を読みたいときは`useFormControl()`を使います。
### DatePickerとLocalizationProviderの組み合わせ
```
// 抜粋（controlは前掲のuseFormから受け取る）
import { LocalizationProvider, DatePicker } from '@mui/x-date-pickers';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
import { ja } from 'date-fns/locale';
(value instanceof Date && !Number.isNaN(value.getTime())) || '有効な日付を入力してください',
}}
render={({ field: { ref, ...field }, fieldState }) => (
)}
/>
```
`required`だけでは`Invalid Date`が送信ハンドラまで通るため、`validate`で日付として有効かも確かめます。`setValue('due', new Date('invalid'))`の状態で送信すると「有効な日付を入力してください」で止まりました。エラー表示は`slotProps.textField`から内側のTextFieldへ渡します。フォームが持つ値はDateオブジェクトのままで、`2026/09/01`を入れると2026年9月1日のDateが送信ハンドラに渡りました。APIへ送る直前に文字列化しておくと、画面の表示形式と送信形式を分けて管理できます。
## useFieldArrayによる可変長フォームの実装
```
// 抜粋（importとuseFormの宣言は前掲のとおり）
const { control, handleSubmit } = useForm({
defaultValues: { tasks: [{ title: '' }] },
});
const { fields, append, remove } = useFieldArray({ control, name: 'tasks' });
return (
);
```
`key`には配列のindexではなく、`useFieldArray`が行ごとに振る`item.id`を渡します。`name`はテンプレートリテラルで`tasks.${index}.title`と組み立て、`Controller`は行の中の項目ごとに置きます。初期1行から2回追加して3行、末尾削除で2行になり、各行に独立して必須チェックが効き、送信値は`{"tasks":[{"title":"設計"},{"title":"実装"}]}`でした。
## React Hook Form v8 betaでMUI連携に効く変更
### fieldsの識別子変更（idからkey）
[8.0.0-beta.1のリリースノート](https://github.com/react-hook-form/react-hook-form/releases/tag/v8.0.0-beta.1)は、`useFieldArray`の`id`を`key`へ改名し、`keyName`オプションを削除すると告知しています。8.0.0-beta.5で`fields[0]`のプロパティを出すと`['title', 'key']`で、7.91.0の`['title', 'id']`から変わっていました。
前章のコードをv8 betaでそのまま動かすと、`item.id`がundefinedになり、Reactの「Each child in a list should have a unique key prop」警告が出ます。`Controller`経由の制御入力なので、先頭行を消しても値のずれは起きませんでしたが、`key={item.key}`へ書き換えるまでは警告が消えません。`append`に渡すデータに`id`という項目があっても、v8では描画用の`key`とは別物として送信値に残ります。
beta.1の告知には「`setValue`では`useFieldArray`を直接更新しない、`replace`を使う」ともあります。ただしbeta.5で`setValue('tasks', [{ title: 'A' }])`を実行すると行は1行に更新され、7.91.0と同じ挙動でした。betaの間に挙動が動いているので、配列ごと入れ替える処理は両方で同じ結果になる`replace`で書いておくのが安全です。
### Controllerのref保存形式の変更
v8では`Controller`の`ref`が受け取った要素をそのまま保存します（beta.1の「pass input ref instead of partial」）。7.91.0のように4つのメソッドだけを持つラッパーではなくなりました。それでも配下を掘り下げない点は同じで、`{...field}`を展開するとフォーカス先がTextFieldのdivになり、`setFocus`も自動フォーカスも効きません。`ref`を分解して入力要素へ渡す修正は、v8でもそのまま必要です。
### v8 betaで止まるresolversとreact-hook-form-muiのインストール
npmの`beta`タグは2025年12月7日の8.0.0-beta.0を指したまま更新されていません。最新のbetaを試すには`npm install react-hook-form@8.0.0-beta.5`と版を明示します。
この状態で`@hookform/resolvers@7.0.1`を足すと、peerの`react-hook-form@"^7.55.0"`を満たせずERESOLVEになります。`react-hook-form-mui@9.0.1`もpeerが`>=7.62.0`で、npmの範囲指定はプレリリースを含まないため同じく止まります。`--legacy-peer-deps`を付ければインストールは通りますが、peerの範囲外なので動作の保証はありません。v8は試験用のブランチで評価し、本番は7.91系に置くのが現実的です。
## rulesとzodResolverの使い分け
`Controller`の`rules`は項目単位のバリデーションです。パスワードの再入力一致や開始日と終了日の前後関係のように項目をまたぐ条件、サーバー側と同じ検証を共有したい場合はスキーマに寄せます。
```
// 抜粋（useFormのimportは前掲のとおり）
import { zodResolver } from '@hookform/resolvers/zod';
import * as z from 'zod';
const schema = z.object({
email: z.email({ message: 'メールアドレスの形式が正しくありません' }),
age: z.coerce.number().int().min(18, { message: '18歳以上で入力してください' }),
});
const { control, handleSubmit } = useForm({
defaultValues: { email: '', age: '' },
resolver: zodResolver(schema),
});
```
`@hookform/resolvers` 7.0.1にzod 4.6.7のスキーマを渡す形です。`age`に`17`なら「18歳以上で入力してください」で送信が止まり、`20`なら数値型の`20`が送信ハンドラに渡りました。`z.coerce.number()`がTextFieldから来る文字列を送信時に数値へ変換するので、フォームの値は文字列のまま持てます。
項目が数個で条件が独立しているなら`rules`で足ります。スキーマを別ファイルへ切り出す価値が出るのは、同じ検証をAPI側やテストでも使い回すときです。Zodの書き方は[ReactのZodフォームバリデーション実装｜zodResolverの導入とrefine・Zod 4の落とし穴](/tech/details/2371/)、React Hook Form以外の選択肢は[TanStack Formとは？使い方とReact Hook Formとの違い](/tech/details/6350/)で比べています。
## react-hook-form-muiを採用すべき場面
`react-hook-form-mui`は`Controller`でラップ済みのMUI部品を配る第三者パッケージです。最新は9.0.1（2026年4月22日）で、`TextFieldElement`・`SelectElement`・`CheckboxElement`・`RadioButtonGroup`・`AutocompleteElement`などを提供し、DatePicker系は`react-hook-form-mui/date-pickers`に分かれています。必須のpeerは`@mui/material ^9.0.0`・`@mui/system ^9.0.0`・`react-hook-form >=7.62.0`・`react >=18 <21`です。
向くのは、入力項目の多い管理画面やアンケート画面で、見た目をパッケージの流儀に合わせてよい場合です。前章までの`ref`の分解や`slotProps`への渡し替えを書かずに済みます。設問が数十項目に及ぶ入力画面を業務システムとして作る場合は、[アンケート管理システム開発](/service/system/enquetesystem/)のように画面設計から任せる選択肢もあります。
向かないのは、デザインシステムを自前で持ち、`slotProps`やテーマで細かく上書きしている場合です。ラッパー越しの上書きは調べにくく、前章のとおりRHF v8 betaもpeerの範囲外です。自前の`Controller`はフィールドあたり十数行なので、まず共通ラッパーで足りるかを確かめてください。
## よくある質問
### MUIのインストールコマンドは何ですか？
既定構成では`npm install @mui/material @emotion/react @emotion/styled`で、`react`と`react-dom`は先に入れておきます。アイコンは`@mui/icons-material`、日付入力は`@mui/x-date-pickers`と日付ライブラリを追加します。
### Material UI v8はどこで配布されていますか？
Material UI本体にv8はありません。v7.0.0の次がv9.0.0で、MUI Xとメジャー番号を揃えるための欠番です。「MUI v8」の情報はほとんどがMUI X側のv8を指しています。
### React Hook Form v8はもう使えますか？
2026年11月3日時点の正式版は7.91.0で、v8は8.0.0-beta.5（10月23日）までのbetaです。`beta`タグは古いbeta.0を指すので、試すなら版を明示して入れます。MUIと組み合わせる場合は、`fields`の`key`への改名と、`@hookform/resolvers`・`react-hook-form-mui`がpeerでインストールできない点が最初の障害になります。
### MUIのSelectBoxをReact Hook Formで扱うにはどうしますか？
`TextField`に`select`を付け、`Controller`でラップして`ref`を`inputRef`に、残りを`{...field}`で渡すのが最短です。エラー表示は`error`と`helperText`で完結します。`Select`を単体で使うなら、`FormControl`の中に`InputLabel`と`FormHelperText`を自分で並べます。
### setFocusを呼んでもフォーカスが移らないのはなぜですか？
多くは`{...field}`をそのまま展開し、`ref`がTextFieldのルートのdivに着地しているのが原因です。`({ field: { ref, ...field } })`と分解し、TextFieldなら`inputRef`、Checkbox・Radio・Switchなら`slotProps={{ input: { ref } }}`に渡します。テストでは`setFocus`が`setTimeout`越しに動く点も考慮します。
## 関連記事
- [React Hook Formとは？使い方とv7の書き方・検証タイミング【7.91対応】](/tech/details/2898/)
- [Material UIとは：v9系の導入からGrid・テーマ設定までコード付きで解説](/tech/details/17551/)
- [ReactのZodフォームバリデーション実装｜zodResolverの導入とrefine・Zod 4の落とし穴](/tech/details/2371/)
- [MUI Autocompleteの実装と落とし穴｜isOptionEqualToValueとv9のslotProps移行](/tech/details/4153/)
- [MUIのLinkの使い方｜React Router連携とテーマ一元化（MUI v9／React Router v8対応）](/tech/details/4299/)
---
出典: [MUIとReact Hook Formの連携｜インストールとref設定・v9とv8 betaの変更点]()（株式会社一創）