毎度忘れるので記事にします。

そもそも`<label>`ってなんやねん

MDNによると、「UIのアイテムにキャプションをつけるためのもの」だそうです。

キャプションをつけることができるものは labelableな要素と呼ばれ、以下だそうです。

じゃあfor属性とは？

labelが「キャプション」である以上、その対象となるアイテムがあります。そのアイテムと、labelを紐づけるための属性です。

まず、labelableな要素にidを設定します。
これに対してfor属性を持つlabelは、ドキュメントの最初に出てきたforと同じ値のidをもつlabelableな要素に関連づけられます。

従って、同じidをもつlabelableな要素が1つのDOM Treeの中に複数あった場合、最もTreeの上にある要素にlabelは関連づけられるということになります。

Reactなどではlabelにforをsetする際にhtmlForという属性を使用します。このhtmlForは、現在のlabelのfor属性を取得したりセットしたりする属性です。

The htmlFor IDL attribute must reflect the for content attribute.

だそうです。
以下のサイトがかなりわかりやすかったです

labelの中にlabelableな要素をいれてやると、そもそもforもidも明示しなくてもlabelと関連付けされる。

<label>
  Do you like peas?
  <input type="checkbox" name="peas" />
</label>