| JNTech

React JSX HTML Attributes and Properties

In React, we write HTML-like elements using JSX (JavaScript XML). Most HTML attributes work in React, but certain attribute names and their behavior are different.

For example:

HTML	React JSX
`class`	`className`
`for`	`htmlFor`
`tabindex`	`tabIndex`
`readonly`	`readOnly`
`maxlength`	`maxLength`
`autofocus`	`autoFocus`
`autocomplete`	`autoComplete`
`onclick`	`onClick`

Let's understand the important differences, their purposes, and how to use them.

1. HTML attributes that have different names in React

React generally follows JavaScript DOM property naming conventions. Many HTML attributes use camelCase in JSX.

Here is a practical reference of commonly encountered conversions.

HTML attribute	React JSX property	Purpose
`class`	`className`	Applies CSS classes
`for`	`htmlFor`	Associates a label with an input
`tabindex`	`tabIndex`	Controls keyboard tab order
`readonly`	`readOnly`	Makes a field non-editable
`maxlength`	`maxLength`	Sets maximum text length
`minlength`	`minLength`	Sets minimum text length
`autofocus`	`autoFocus`	Automatically focuses an element
`autocomplete`	`autoComplete`	Controls browser autocomplete
`autocapitalize`	`autoCapitalize`	Controls automatic capitalization
`spellcheck`	`spellCheck`	Enables or disables spell checking
`contenteditable`	`contentEditable`	Allows content editing
`colspan`	`colSpan`	Specifies table cell column span
`rowspan`	`rowSpan`	Specifies table cell row span
`crossorigin`	`crossOrigin`	Configures cross-origin resource requests
`srcset`	`srcSet`	Specifies responsive image sources
`datetime`	`dateTime`	Specifies a date/time value
`usemap`	`useMap`	Associates an image with an image map
`accept-charset`	`acceptCharset`	Specifies accepted character encodings
`http-equiv`	`httpEquiv`	Provides HTTP-equivalent metadata
`novalidate`	`noValidate`	Disables browser form validation
`formnovalidate`	`formNoValidate`	Disables validation for a particular submit button
`formaction`	`formAction`	Overrides the form submission destination
`formenctype`	`formEncType`	Specifies form submission encoding
`formmethod`	`formMethod`	Overrides the form submission method
`formtarget`	`formTarget`	Specifies where the response is displayed
`playsinline`	`playsInline`	Allows inline video playback

Example:

HTML:

<div class="container">
    <label for="username">Username</label>
    <input type="text" id="username" readonly>
</div>

React JSX:

<div className="container">
    <label htmlFor="username">Username</label>
    <input type="text" id="username" readOnly />
</div>

Important: These are naming changes, not completely different functionalities. For example, className does the same job as HTML class.

Source: React – Common Components.

2. HTML attributes that remain the same in React

Not every HTML attribute needs a naming change.

The following attributes generally remain unchanged.

Property	Purpose	Example
`id`	Identifies an element	`id="username"`
`name`	Specifies the form field name	`name="email"`
`type`	Specifies input type	`type="text"`
`value`	Specifies or controls a value	`value="Syed"`
`placeholder`	Displays input guidance	`placeholder="Enter name"`
`required`	Makes a field mandatory	`required`
`disabled`	Disables an element	`disabled`
`checked`	Controls checkbox/radio selection	`checked`
`src`	Specifies a resource location	`src="/image.png"`
`alt`	Provides alternative image text	`alt="Profile"`
`href`	Specifies a hyperlink destination	`href="/about"`
`target`	Specifies where a link opens	`target="_blank"`
`rel`	Specifies the relationship to a linked resource	`rel="noopener"`
`title`	Provides additional information	`title="Information"`
`width`	Specifies width	`width="200"`
`height`	Specifies height	`height="100"`
`min`	Specifies the minimum permitted value	`min="18"`
`max`	Specifies the maximum permitted value	`max="60"`
`step`	Specifies the permitted value interval	`step="5"`
`pattern`	Specifies a validation pattern	`pattern="[A-Za-z]+"`

These properties can be used directly in JSX.

function Profile() {
    return (
        <div>
            <img
                src="/profile.png"
                alt="User Profile"
                width="150"
                height="150"
            />

            <input
                type="text"
                name="username"
                placeholder="Enter username"
                required
            />

            <a href="/about" target="_blank">
                About Us
            </a>
        </div>
    );
}

3. Important difference: `value` vs `defaultValue`

This is one of the most important concepts in React forms.

Both properties can specify an input's value, but they work differently.

A. `value` – Controlled component

When you use value, React controls the input value.

Normally, you connect it with React state using useState.

import { useState } from "react";

function UserForm() {

    const [username, setUsername] = useState("Syed");

    return (
        <div>
            <input
                type="text"
                value={username}
                onChange={(e) => setUsername(e.target.value)}
            />

            <p>Username: {username}</p>
        </div>
    );
}

export default UserForm;

How does it work?

Initially, username contains "Syed".
React displays "Syed" in the input.
The user types another character.
onChange executes.
setUsername() updates the state.
React renders the updated input value.

Here, React controls the input's current value.

B. `defaultValue` – Uncontrolled component

When you use defaultValue, React specifies only the initial value.

After that, the browser manages the input value.

function UserForm() {

    return (
        <div>
            <input
                type="text"
                defaultValue="Syed"
            />
        </div>
    );
}

export default UserForm;

How does it work?

Initially, React displays "Syed".
The user changes the input to "Syed Ahmed".
The browser manages the updated value.
React does not need to maintain that value in component state.

Comparison

Feature	`value`	`defaultValue`
Type	Controlled	Uncontrolled
Initial value	Yes	Yes
Controls current value	Yes	No
Requires `onChange` for editable controlled input	Yes	No
Uses React state	Usually	Not necessarily
Suitable for dynamic form updates	Yes	Usually not

Remember

defaultValue is not a replacement for value. Use value when React needs to control the current input value. Use defaultValue when you only need to provide an initial value.

Source: React – Input.

4. `checked` vs `defaultChecked`

These properties are specifically important for checkboxes and radio buttons.

checked: React controls whether the checkbox or radio button is selected.
defaultChecked: Specifies its initial selection state.

Using checked:

import { useState } from "react";

function Agree() {

    const [isChecked, setIsChecked] = useState(false);

    return (
        <input
            type="checkbox"
            checked={isChecked}
            onChange={(e) => setIsChecked(e.target.checked)}
        />
    );
}

Using defaultChecked:

function Agree() {

    return (
        <input
            type="checkbox"
            defaultChecked={true}
        />
    );
}

Comparison

Property	Purpose
`checked`	Controls the current selection
`defaultChecked`	Sets the initial selection

Important: For checkboxes and radio buttons, use checked or defaultChecked to control their selection. value represents the data submitted when that option is selected; it does not control whether it is selected.

5. Important properties for HTML form elements

React provides special behavior for form elements.

A. `<input>` properties

These are the important properties available for input fields.

Property	Description
`type`	Specifies text, password, email, number, checkbox, radio, file, etc.
`value`	Controls the current input value
`defaultValue`	Sets the initial input value
`checked`	Controls checkbox/radio selection
`defaultChecked`	Sets initial checkbox/radio selection
`name`	Defines the form field name
`placeholder`	Displays placeholder text
`required`	Makes the input mandatory
`disabled`	Disables the input
`readOnly`	Prevents editing
`autoFocus`	Automatically focuses the input
`autoComplete`	Controls browser autocomplete
`maxLength`	Specifies maximum character count
`minLength`	Specifies minimum character count
`max`	Specifies maximum numeric/date value
`min`	Specifies minimum numeric/date value
`step`	Specifies allowed increments
`pattern`	Specifies a validation pattern
`multiple`	Allows multiple selections where supported
`accept`	Specifies accepted file types
`capture`	Requests camera or microphone capture
`list`	Associates the input with a datalist
`form`	Associates the input with a particular form
`formAction`	Overrides the parent form action
`formEncType`	Overrides the form encoding
`formMethod`	Overrides the form HTTP method
`formNoValidate`	Overrides form validation
`formTarget`	Overrides the form target
`dirname`	Specifies a field for text direction
`alt`	Alternative text for image-type inputs
`src`	Image source for image-type inputs
`height`	Image input height
`width`	Image input width
`size`	Preferred visible width of the input

Example:

<input
    type="email"
    name="email"
    placeholder="Enter email"
    maxLength={100}
    required
    autoComplete="email"
/>

Note that numeric JSX values can be passed as JavaScript expressions using curly braces, as in maxLength={100}.

Source: React – Input Properties.

B. `<textarea>` properties

A textarea is used for multiline text input.

Property	Description
`value`	Controls the current text
`defaultValue`	Sets the initial text
`rows`	Specifies the number of visible rows
`cols`	Specifies the approximate width in characters
`name`	Specifies the form field name
`placeholder`	Displays placeholder text
`maxLength`	Sets maximum character count
`minLength`	Sets minimum character count
`disabled`	Disables the textarea
`readOnly`	Prevents editing
`required`	Makes it mandatory
`autoFocus`	Automatically focuses the textarea
`autoComplete`	Controls autocomplete
`form`	Associates it with a form
`wrap`	Controls text wrapping during form submission

Example:

<textarea
    name="description"
    rows={5}
    cols={40}
    placeholder="Enter description"
    maxLength={500}
    defaultValue="Welcome to React"
/>

Important difference from HTML: In React, you should not put the initial text between <textarea> and </textarea>. Use defaultValue instead.

React

C. `<select>` properties

Used to create dropdown lists.

Property	Description
`value`	Controls currently selected option
`defaultValue`	Specifies the initially selected option
`name`	Specifies the form field name
`multiple`	Allows multiple selections
`disabled`	Disables the dropdown
`required`	Makes the dropdown mandatory
`autoFocus`	Automatically focuses the dropdown
`autoComplete`	Controls autocomplete
`form`	Associates it with a particular form
`size`	Specifies the number of visible options for a multiple select

Example:

function Country() {

    return (
        <select defaultValue="India">
            <option value="India">India</option>
            <option value="USA">USA</option>
            <option value="UK">UK</option>
        </select>
    );
}

Important: In regular HTML, developers sometimes use selected on an <option>. In React, you should use value or defaultValue on the parent <select> instead.

Source: React – Select.

D. `<form>` properties

Property	Description
`action`	Specifies the form submission destination or a React Action function
`method`	Specifies GET or POST
`onSubmit`	Executes when the form is submitted
`onReset`	Executes when the form is reset
`noValidate`	Disables browser form validation
`target`	Specifies where the response is displayed
`encType`	Specifies form data encoding
`acceptCharset`	Specifies accepted character encodings

Example:

function Register() {

    const handleSubmit = (e) => {
        e.preventDefault();

        console.log("Form submitted");
    };

    return (
        <form onSubmit={handleSubmit}>
            <input type="text" name="username" />

            <button type="submit">
                Register
            </button>
        </form>
    );
}

React also supports function-based form action properties, introduced as part of its React 19 form APIs.

React

6. Common React properties supported by HTML elements

These properties can be used across many built-in HTML elements.

Property	Description	Example
`className`	Applies CSS classes	`className="container"`
`id`	Specifies a unique element ID	`id="header"`
`style`	Applies inline CSS	`style={{ color: "red" }}`
`title`	Specifies tooltip text	`title="More information"`
`children`	Represents nested content	`<div>Hello</div>`
`ref`	Provides access to a DOM element	`ref={inputRef}`
`role`	Defines an accessibility role	`role="button"`
`tabIndex`	Controls keyboard navigation	`tabIndex={0}`
`hidden`	Hides an element	`hidden={true}`
`dir`	Specifies text direction	`dir="rtl"`
`lang`	Specifies content language	`lang="en"`
`accessKey`	Defines a keyboard shortcut	`accessKey="s"`
`contentEditable`	Makes content editable	`contentEditable={true}`
`draggable`	Enables dragging	`draggable={true}`
`spellCheck`	Enables/disables spell checking	`spellCheck={false}`
`inputMode`	Suggests an input keyboard type	`inputMode="numeric"`
`enterKeyHint`	Suggests the virtual keyboard's Enter key action	`enterKeyHint="search"`
`autoCapitalize`	Controls capitalization	`autoCapitalize="words"`
`data-*`	Adds custom data attributes	`data-id="101"`
`aria-*`	Adds accessibility attributes	`aria-label="Close"`
`itemProp`	Specifies structured-data information	`itemProp="name"`
`translate`	Controls translation of content	`translate="no"`

There are also several React-specific props:

React property	Description
`key`	Identifies elements when rendering lists
`ref`	References a DOM element or component
`dangerouslySetInnerHTML`	Inserts raw HTML into an element
`suppressContentEditableWarning`	Suppresses a warning related to `contentEditable` elements
`suppressHydrationWarning`	Suppresses certain server/client hydration mismatch warnings

Important details:

key is used by React to identify list elements. It is not an ordinary HTML attribute and is not passed as a normal prop to your component.
children represents content placed inside a component.
dangerouslySetInnerHTML should only be used with trusted or properly sanitized HTML because it can introduce XSS vulnerabilities.
ref allows you to access the underlying DOM element.

Example of key:

const users = [
    { id: 1, name: "Syed" },
    { id: 2, name: "Ahmed" }
];

function UserList() {
    return (
        <ul>
            {users.map(user => (
                <li key={user.id}>
                    {user.name}
                </li>
            ))}
        </ul>
    );
}

Example of ref:

import { useRef } from "react";

function Search() {

    const inputRef = useRef(null);

    const handleClick = () => {
        inputRef.current.focus();
    };

    return (
        <>
            <input ref={inputRef} />

            <button onClick={handleClick}>
                Focus Input
            </button>
        </>
    );
}

Source: React Common Element Props.

7. React event properties

This is another major difference between HTML and React.

In HTML, event names are generally lowercase:

<button onclick="showMessage()">
    Click Me
</button>

In React, event names use camelCase, and you pass a JavaScript function.

function App() {

    const showMessage = () => {
        alert("Hello React");
    };

    return (
        <button onClick={showMessage}>
            Click Me
        </button>
    );
}

A. Common event properties

React event	When does it execute?
`onClick`	When an element is clicked
`onDoubleClick`	When an element is double-clicked
`onMouseDown`	When the mouse button is pressed
`onMouseUp`	When the mouse button is released
`onMouseMove`	When the mouse moves
`onMouseEnter`	When the mouse enters an element
`onMouseLeave`	When the mouse leaves an element
`onMouseOver`	When the mouse moves over an element
`onMouseOut`	When the mouse moves out of an element
`onContextMenu`	When the context menu is requested
`onFocus`	When an element receives focus
`onBlur`	When an element loses focus
`onKeyDown`	When a keyboard key is pressed
`onKeyUp`	When a keyboard key is released
`onChange`	When an input value changes
`onInput`	When input content changes
`onSubmit`	When a form is submitted
`onReset`	When a form is reset
`onInvalid`	When form validation fails
`onSelect`	When text selection changes
`onCopy`	When content is copied
`onCut`	When content is cut
`onPaste`	When content is pasted
`onDrag`	While an element is being dragged
`onDragStart`	When dragging starts
`onDragEnd`	When dragging ends
`onDragEnter`	When dragged content enters a drop target
`onDragLeave`	When dragged content leaves a drop target
`onDragOver`	When dragged content moves over a drop target
`onDrop`	When dragged content is dropped
`onScroll`	When an element is scrolled
`onWheel`	When the mouse wheel is used
`onTouchStart`	When touch interaction starts
`onTouchMove`	When a finger moves
`onTouchEnd`	When touch interaction ends
`onTouchCancel`	When touch interaction is cancelled
`onPointerDown`	When a pointer becomes active
`onPointerUp`	When a pointer is released
`onPointerMove`	When a pointer moves
`onPointerEnter`	When a pointer enters an element
`onPointerLeave`	When a pointer leaves an element
`onPointerCancel`	When a pointer interaction is cancelled
`onAnimationStart`	When a CSS animation starts
`onAnimationEnd`	When a CSS animation finishes
`onAnimationIteration`	When an animation iteration finishes
`onTransitionEnd`	When a CSS transition finishes
`onLoad`	When a resource loads
`onError`	When a resource fails to load

B. What is `Capture` in React events?

React also supports capture-phase event handlers for many events.

For example:

<button
    onClick={handleClick}
    onClickCapture={handleClickCapture}
>
    Click Me
</button>

There are two event propagation phases:

Capture phase – The event travels from the parent towards the target.
Bubble phase – The event travels from the target back towards the parent.

onClick normally handles the bubbling phase, whereas onClickCapture handles the capture phase.

Some events, such as onMouseEnter and onMouseLeave, do not have corresponding capture variants.

Source: React Event Handlers.

8. Important difference in the `style` property

In HTML, inline CSS is written as a string.

HTML:

<div style="background-color: red; font-size: 20px;">
    Hello
</div>

In React, style receives a JavaScript object.

React:

<div
    style={{
        backgroundColor: "red",
        fontSize: "20px"
    }}
>
    Hello
</div>

CSS property differences

CSS properties use kebab-case, while React style object properties use camelCase.

CSS property	React style property
`background-color`	`backgroundColor`
`font-size`	`fontSize`
`font-weight`	`fontWeight`
`margin-top`	`marginTop`
`margin-bottom`	`marginBottom`
`padding-left`	`paddingLeft`
`border-radius`	`borderRadius`
`text-align`	`textAlign`
`z-index`	`zIndex`
`line-height`	`lineHeight`
`box-shadow`	`boxShadow`
`max-width`	`maxWidth`
`min-height`	`minHeight`

Using dynamic values

function App() {

    const headingColor = "blue";
    const fontSize = 25;

    return (
        <h1
            style={{
                color: headingColor,
                fontSize: fontSize
            }}
        >
            Welcome to React
        </h1>
    );
}

React automatically adds px to numeric values for CSS properties that require a unit.

For example:

<div style={{
    width: 200,
    height: 100,
    opacity: 0.5
}}>
    Hello
</div>

Here:

width: 200 means 200px.
height: 100 means 100px.
opacity: 0.5 remains unitless.

For most static styles, using className and an external CSS file is preferable.

React

9. Boolean properties in React

In HTML, boolean attributes can often be written without assigning a value.

HTML:

<input type="text" disabled>

React:

<input type="text" disabled={true} />

You can also write:

<input type="text" disabled />

Both examples enable the disabled property.

To disable it conditionally:

<input
    type="text"
    disabled={false}
/>

Common boolean properties

Property	Purpose
`disabled`	Disables an element
`required`	Makes an input mandatory
`checked`	Selects checkbox/radio
`multiple`	Enables multiple selections
`readOnly`	Makes an input non-editable
`autoFocus`	Automatically focuses an element
`hidden`	Hides an element
`noValidate`	Disables form validation
`autoPlay`	Starts media playback automatically
`controls`	Displays media controls
`loop`	Repeats media playback
`muted`	Mutes audio/video
`open`	Opens a details or dialog element
`selected`	Avoid for controlling React dropdown selection; use parent `select`'s value instead

Note: Not every attribute that accepts true/false follows exactly the same HTML boolean-attribute rules. For example, aria-* attributes generally use string values such as "true" and "false".

10. Additional important JSX rules

Apart from properties, remember these JSX rules.

Rule	Example
Use `className` instead of `class`	`<div className="box" />`
Use `htmlFor` instead of `for`	`<label htmlFor="email" />`
Use curly braces for JavaScript expressions	`<h1>{username}</h1>`
Pass functions to event handlers	`<button onClick={handleClick} />`
Use self-closing tags	`<img src="a.png" />`
Use camelCase for many DOM properties	`tabIndex={0}`
Use an object for inline styles	`style={{ color: "red" }}`
Use `key` when rendering lists	`<li key={user.id} />`
Use `value` and `onChange` for controlled inputs	`<input value={name} onChange={...} />`

11. Complete practical example

This example combines several of the properties discussed above.


import { useState } from "react";

function RegistrationForm() {

    const [username, setUsername] = useState("");
    const [email, setEmail] = useState("");
    const [gender, setGender] = useState("Male");
    const [isAgreed, setIsAgreed] = useState(false);

    const handleSubmit = (e) => {
        e.preventDefault();

        console.log({
            username,
            email,
            gender,
            isAgreed
        });
    };

    return (
        <div className="container">

            <h2 className="heading">
                Registration Form
            </h2>

            <form onSubmit={handleSubmit}>

                <label htmlFor="username">
                    Username
                </label>

                <input
                    id="username"
                    name="username"
                    type="text"
                    value={username}
                    onChange={(e) => setUsername(e.target.value)}
                    placeholder="Enter username"
                    maxLength={50}
                    required
                />

                <label htmlFor="email">
                    Email
                </label>

                <input
                    id="email"
                    name="email"
                    type="email"
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    placeholder="Enter email"
                    autoComplete="email"
                    required
                />

                <label htmlFor="gender">
                    Gender
                </label>

                <select
                    id="gender"
                    name="gender"
                    value={gender}
                    onChange={(e) => setGender(e.target.value)}
                >
                    <option value="Male">Male</option>
                    <option value="Female">Female</option>
                </select>

                <label>
                    <input
                        type="checkbox"
                        checked={isAgreed}
                        onChange={(e) => setIsAgreed(e.target.checked)}
                    />

                    I agree to the terms and conditions.
                </label>

                <button
                    type="submit"
                    disabled={!isAgreed}
                >
                    Register
                </button>

            </form>

        </div>
    );
}

export default RegistrationForm;

This example demonstrates:

className and htmlFor.
value and onChange.
checked and onChange.
disabled with a conditional expression.
id, name, type, required, and placeholder.
onSubmit and preventDefault().

12. Official React documentation – Complete reference

React supports the browser's built-in HTML and SVG elements. The common element reference covers shared props and events, while individual element references document their specific properties. Therefore, there is no single short list containing every property for every HTML element.

React+1

These official references are the best resources to keep bookmarked:

Documentation	What you will learn
Common HTML elements	Shared HTML properties, events, styles and refs
Input	All input properties and controlled inputs
Select	Dropdown properties
Textarea	Textarea properties
Form	Form submission and Actions
All React DOM components	All built-in React DOM elements

My recommendation for learning React: Pay particular attention to className, htmlFor, onClick, onChange, value, defaultValue, checked, defaultChecked, style, key, and ref. These are among the properties you will encounter frequently when building React applications.

React JSX HTML Attributes and Properties

1. HTML attributes that have different names in React

2. HTML attributes that remain the same in React

3. Important difference: value vs defaultValue

A. value – Controlled component

B. defaultValue – Uncontrolled component

Comparison

4. checked vs defaultChecked

Comparison

5. Important properties for HTML form elements

A. <input> properties

B. <textarea> properties

C. <select> properties

D. <form> properties

6. Common React properties supported by HTML elements

7. React event properties

A. Common event properties

B. What is Capture in React events?

8. Important difference in the style property

CSS property differences

Using dynamic values

9. Boolean properties in React

Common boolean properties

10. Additional important JSX rules

11. Complete practical example

12. Official React documentation – Complete reference

Take Your Knowledge Further

What is React Fragment?

JSX in React

React Developer Tools (React DevTools)

Difference between Framework and Library

When running npm install, will it use package-lock.json or package.json?

What is ESLint?

3. Important difference: `value` vs `defaultValue`

A. `value` – Controlled component

B. `defaultValue` – Uncontrolled component

4. `checked` vs `defaultChecked`

A. `<input>` properties

B. `<textarea>` properties

C. `<select>` properties

D. `<form>` properties

B. What is `Capture` in React events?

8. Important difference in the `style` property