How to Set A Default Checkbox Value in React

The checkbox is one of the most useful inputs for building dynamic apps with React. In this guide, we will see how to make the checkbox checked (or unchecked) by default.

defaultChecked Prop

As a React developer, you are probably familiar with JSX. It’s a templating language to easily develop UIs in React. Its biggest advantage is that most elements and development processes are very similar to HTML.

Similar to HTML, you can set the defaultChecked attribute on checkbox inputs. It needs to be set to a Boolean value. If set to true, the checkbox will be automatically selected. If the value is false, or there’s no default at all, the checkbox will not be automatically selected.

Let’s look at an example:

<input type="checkbox" defaultChecked="true" />

This is a simple uncontrolled checkbox.

The defaultChecked attribute is set to a Boolean value true. In the real world, defaultChecked is often set to a Boolean value from the state, or a complex condition that evaluates to true or false.

Set the Default Value of a Controlled Checkbox in React

In most cases, it’s best to create controlled inputs in React. These are inputs that get their value from the state. Changes to the checkbox also update the state.

Let’s look at a live demo of a controlled checkbox:

import "./styles.css";
import { useState } from "react";
export default function App() {
 const [checkbox, setCheckbox] = useState(true);
 const handleChange = (e) => setCheckbox(e.target.checked);
 return (
   <div>
    <input type="checkbox" defaultChecked="true" onChange={handleChange} />
    <p>Checkbox is {checkbox ? "checked" : "unchecked"}</p>
    </div>
  );
}

 style="width:100%; height: 500px; border:0; border-radius: 4px; overflow:hidden;" 

 title="clever-ives" 

 allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking" 

 sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts" 

When it first loads, the checkbox is selected because defaultChecked is set to true.

The event handler tracks change events, accesses the current status (checked or not), and stores it in the state.

In this case, we do not set the value attribute on an input. defaultChecked attribute results in less code and works the same.

We can keep track of the current value of the checkbox and use it for conditional styling, rendering, and other dynamic features in React. For example, you can use conditional styling to implement the dark mode.

If you’d like to learn more, check out my React guides with examples. I’ve published several articles about working with inputs in React.