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 attribute on checkbox inputs. It needs to be set to a Boolean value. If set to , the checkbox will be automatically selected. If the value is , or there’s no default at all, the checkbox will not be automatically selected. defaultChecked true false Let’s look at an example: This is a simple uncontrolled checkbox. The attribute is set to a Boolean value . In the real world, is often set to a Boolean value from the state, or a complex condition that evaluates to or . defaultChecked true defaultChecked true 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 of a controlled checkbox: live demo import "./styles.css"; import { useState } from "react"; export default function App() { const [checkbox, setCheckbox] = useState(true); const handleChange = (e) => setCheckbox(e.target.checked); return ( Checkbox is {checkbox ? "checked" : "unchecked"}

); } 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 is set to . defaultChecked 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 attribute on an input. attribute results in less code and works the same. value defaultChecked 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 . I’ve published several articles about working with inputs in React. React guides with examples