How to add a label for an attribute in react?

react label for attribute example

In this tutorial, we are going to learn how to add labels in React user forms.

React framework ignores for attributes for label elements.

What does the “for” attribute do in HTML tag?

React provides web accessibility guidelines to create a website. It helps us to navigate and access the page content for everyone. Labels are helpful to understand human-readable text for each form of input control and help blind, keyboard, and mouse users.

When you are creating a form in Html pages, You will create a label and input that bind together as seen below

<label for="name">Name</label>
<input id="name" type="text" />

Usually, labels are bound to input text using the for attribute. Input control id is matched with the for attribute of the label. This applies to checkboxes, radio, and select controls.

if you use the same code in React JSX, It breaks during component loading

and throws the below error

Invalid DOM property for. Did you mean htmlFor?`

React for label example

React has no for property for labels, Instead uses the [htmlFor](https://reactjs.org/docs/dom-elements.html#htmlfor) attribute.

The reason is, that you are writing HTML code in JSX syntax. JSX is an extension to javascript which executes javascript code. for is a keyword or reserved word in javascript. So we can not use it directly.

So we have to use the [htmlFor](https://reactjs.org/docs/dom-elements.html#htmlfor) attribute as seen below.

Note: React is case sensitive, the first-word letter is small, and the second letter work is capital Here is a react for label example component

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';

interface AppProps {}
interface AppState {
  name: string;

class App extends Component<AppProps, AppState> {
  constructor(props) {
    this.state = {
      name: 'React'

  render() {
    return (
        <label htmlFor="name">Name</label>
        <input id="name" type="text" />

render(<App />, document.getElementById('root'));

Once this component is rendered, generated DOM contains the for attribute instead of the htmlFor attribute for a label When you inspect the code, You will see the below code.

<html class=" ">
    <div id="root">
        <label for="name">Name</label>
        <input id="name" type="text">

How do you set labels in React?

React uses different attributes for labels.

Define label with htmlFor attribute as given below

    <label htmlFor="name">Name</label>

Next, use the htmlFor value to an input element with the id attribute

        <input id="name" type="text" />

What is the label used for in React?

a label is used to define a string of text for input elements. It is a standard HTML tag, that tells the user about input controls on User Interface.

Here is an example

<label for="name">Name</label>

What is htmlFor in the label React?

htmlFor is used in place of for attribute in React, The reason to replace for an attribute in react, is for is a keyword in javascript to iterate the loop. So you can use

    <label htmlFor="name">Name</label>

instead of

<label for="name">Name</label>

Why do we use htmlFor in React?

for is used in the label of standard HTML pages. React uses JSX, JSX is an extension to javascript which executes javascript code. for is a keyword or reserved word in javascript. So we can not use it directly. htmlFor is used in to map the label to the input element.

Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
You'll get a notification every time a post gets published here.

Related posts

Basic React Interview questions and answers

Best ways to add an element to an array in React state with examples

Difference between Development and Production Builds in React

Difference between pureComponent and component in React

Difference between super and super props in React constructor class?

Fixing an error You are running create-react-app 4.0.3, which is behind the latest release (5.0.0) in React

Getting started with ReactJS Bootstrap Tutorials with examples | reactstrap tutorials