How to Add the ‘for’ Attribute of the Label Element in React?

Sometimes, we want to add the for attribute to a label element to associate it with a form field in React.

In this article, we’ll look at how to add the for attribute to a label element to associate it with a form field in React.

Add the ‘for’ Attribute of the Label Element in React

To add the for attribute to a label element to associate it with a form field in React, we can set the htmlFor attribute for the label.

For instance, we can write:

import React from "react";

export default function App() {
  return (
    <div>
      <label htmlFor="name">name</label>
      <input id="name" name="name" />
    </div>
  );
}

to add the htmlFor attribute to the label element.

We set htmlFor to name so it’ll be rendered as the label element with the for attribute set to name .

Conclusion

To add the for attribute to a label element to associate it with a form field in React, we can set the htmlFor attribute for the label.