ReactJS checked Attribute

In ReactJS, managing form elements like checkboxes and radio buttons is a common task, and the checked attribute plays an important role when working with these input elements. The checked attribute is used to control the state of checkboxes and radio buttons in a React component.

This article will explain the role of the checked attribute in React and how to use it with controlled components.

Understanding the checked Attribute in HTML

In traditional HTML, the checked attribute is used to determine whether a checkbox or radio button is selected by default.

Syntax:

<input type="checkbox" checked />
<input type="radio" name="gender" value="male" checked />

• The checkbox will be checked by default.
• The radio button for "male" will be selected by default.

However, in React, handling the checked attribute requires a different approach due to how React manages state and updates the DOM.

How React Handles the checked Attribute?

In React, form elements such as checkboxes and radio buttons can be controlled components, meaning their value (checked or unchecked) is controlled by the component’s state. Instead of relying on the static HTML checked attribute, React uses a combination of the checked property and state to manage the form element’s state dynamically.

In React, you don't simply use checked like in HTML. Instead, you tie the checked property of the input element to the component's state, which reflects whether the checkbox or radio button is selected.

<input type="checkbox" checked={isChecked} onChange={handleChange} />

• checked: This is bound to a piece of state (isChecked) to determine whether the checkbox should be checked.
• onChange: This is an event handler that updates the state when the user interacts with the checkbox.

Steps To Implement ReactJS checked Attribute

Create a React application using the following command.

npx create-react-app foldername
cd foldername

Project Structure

Example 1: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.

import React from 'react';

// Defining our App Component
const App = () => {

    return <>
        <div>
            <h1>GeeksforGeeks</h1>
            Input: <input type='checkbox' checked={true} />
        </div>
    </>;
}

export default App

Run the application using the following command.

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
 

Example 2: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.

import React from 'react';

// Defining our App Component
const App = () => {

    // Returning our JSX code
    return <>
        <div>
            <h1>GeeksforGeeks</h1>
            Input: <input type='radio' checked={true} />
        </div>
    </>;
}

// Exporting your Default App Component
export default App

Run the application using the following command:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output: