React:htmlFor

lastmod 2026-03-09created 2026-03-094 edits

htmlFor is the JSX attribute that replaces HTML's for attribute in React.

Why htmlFor is used

In HTML you write <label for="input-id">, but in JSX for is a JavaScript reserved word (the for loop), so it cannot be used as is. That is why React renamed it to htmlFor.

HTML:

<label for="email">이메일</label>
<input id="email" type="email" />

JSX (React):

<label htmlFor="email">이메일</label>
<input id="email" type="email" />

Role

It links a label to an input, so that:

• Clicking the label moves focus to the corresponding input
• Screen reader accessibility improves

class → className is the same kind of case, for a similar reason.

See also

• React
• React:htmlFor
• React:className