はじめに
こんにちは。アメリカ在住で独学エンジニアを目指している Taira です。
Reactでフォームを書くとき、なんとなくこんなコードを書いていませんか？
<Label htmlFor="name">名前</Label>
<div id="name" >Taira</div>
実は私もずっと「htmlForはLabelに必ず付けるもの」と思い込んでいました。
でも調べてみると、そもそもhtmlForはフォーム要素のための属性なんです。
しかも、ケースによっては不要なこともあります。
htmlForってそもそも何？
htmlForは、HTMLのfor属性のReact版です。
もともとは フォーム（form）要素とラベルを結びつけるための属性 なんですね。
HTMLで言うとこうです👇
<label for="email">メールアドレス</label>
<input id="email" type="email" />
このように書くと、ラベルをクリックしたときに入力欄がフォーカスされます。
これはブラウザが「forの値とidが一致している」と判断して、両者を紐づけてくれるからです。
ReactではhtmlForを使う
Reactでは、forは予約語（forループなどで使う）なので、その代わりにhtmlForを使います。
私はUIライブラリにshadcn/uiを使っているので、以下のように書きますが通常のlabelタグでも同じです。
<Label htmlFor="email">メールアドレス</Label>
<Input id="email" type="email" />
これでHTMLのforと同じ効果になります。
いつ必要で、いつ不要なのか？
✅ 必要なケース：LabelとInputが離れている場合
<Label htmlFor="username">ユーザー名</Label>
<Input id="username" />
このように、<Label>と<Input>が別々の要素になっているときは、
どの入力欄を指しているのか分からないため、htmlForで明示的に紐づける必要があります。
❌ 不要なケース：LabelがInputを内包している場合
<Label>
ユーザー名
<Input type="text" />
</Label>
このように、<Label>タグの中に<input>を入れて書いた場合、
自動的に紐づけが行われるので、htmlForは不要です。
実際、ラベルをクリックしてもちゃんと入力欄にフォーカスされます。
❌ 不要なケース：Labelを単体で使用する場合
<Label htmlFor="name">名前</Label>
<div id="name" >Taira</div>
上記はUI的にLabelを使っていますが、実際にはdivなので、
htmlForを付けても紐づけが行われません。
UIライブラリを使うときは注意
最近のUIライブラリ（shadcn/ui, Radix UIなど）は、
<Label>と<Input>が内部で別のDOM要素として定義されることが多いです。
<Label htmlFor="email">メールアドレス</Label>
<Input id="email" type="email" />
このようなケースでは、htmlForを付けないとフォーカスが連動しません。
つまり、「実際にDOM上で離れている」のでhtmlForが必要になります。
実務での整理表
| 状況 | htmlFor必要？ | 理由 |
|---|---|---|
<label>と<input>が離れている |
✅ 必要 | 紐づけが自動でされない |
<label>が<input>を囲んでいる |
❌ 不要 | 自動で紐づけされる |
| UIライブラリを使っている | ✅ 必要なことが多い | 内部DOMが別れている |
まとめ
-
htmlForは フォーム要素（input,select,textareaなど）を紐づけるための属性 -
labelがinputを内包している場合は不要 - UIライブラリで
LabelとInputが分かれている場合は必要
✅ 「とりあえず付ける」ではなく、
「構造的に必要かどうか」を理解して使うのがポイントです。