Set the default checked value of a Checkbox in React


Borislav Hadzhiev

Last updated: Apr 30, 2022


Photo from Unsplash

Set the default checked value of a Checkbox in React #

Use the defaultChecked prop to set the default checked value of a checkbox in React, e.g. defaultChecked={true}. Input elements with type set to checkbox support the defaultChecked prop for setting a default value.

import {useState} from 'react'; export default function App() { // 👇️ initialize checked state to true const [isSubscribed, setIsSubscribed] = useState(true); const handleChange = () => { setIsSubscribed(current => !current); }; return ( <div> <label htmlFor="subscribe"> <input type="checkbox" defaultChecked={true} value={isSubscribed} onChange={handleChange} id="subscribe" name="subscribe" /> Subscribe </label> </div> ); }

checkbox default checked

If you use uncontrolled checkbox with refs, scroll down to the next code snippet.

We passed true for the initial state value of the useState hook and set its defaultChecked prop to true to mark it as checked by default.

When passing a boolean prop that is set to true, you can only pass the prop's name, e.g. defaultChecked and defaultChecked={true} achieve the same result.

Input elements with type set to checkbox or radio support the defaultChecked prop, whereas select and textarea elements support the defaultValue prop.

Notice that we passed a function to setIsSubscribed because the function is guaranteed to be called with the current (most up to date) value for the isSubscribed boolean.

This is useful when we need to calculate the next state based on the current state.

If you need to set an uncontrolled checkbox to be checked by default, set its defaultChecked prop to true.

import {useRef} from 'react'; export default function App() { const ref = useRef(null); const handleClick = () => { // 👇️ get checkbox value with ref console.log(ref.current.checked); }; return ( <div> <label htmlFor="subscribe"> <input ref={ref} defaultChecked={true} type="checkbox" id="subscribe" name="subscribe" /> Subscribe </label> <br /> <button onClick={handleClick}>Click</button> </div> ); }

set uncontrolled checkbox default checked

The useRef() hook can be passed an initial value as an argument. The hook returns a mutable ref object whose .current property is initialized to the passed argument.

Notice that we have to access the current property on the ref object to get access to the checkbox element on which we set the ref prop.

When we pass a ref prop to an element, e.g. <input ref={myRef} />, React sets the .current property of the ref object to the corresponding DOM node.

Every time you click on the button, the checked value of the checkbox will be logged to the console.

The useRef hook creates a plain JavaScript object, but gives you the same ref object on every render. In other words, it's pretty much a memoized object value with a .current property.

You can access any attribute on the checkbox element via ref.current. If you log the current property on the ref object, it's simply a reference to the input element.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.