Set the default checked value of a Checkbox in React

# 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.

Copied!
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>
  );
}

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.

Copied!
const [isSubscribed, setIsSubscribed] = useState(true);

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.

Copied!
<input
    type="checkbox"
    defaultChecked={true}
    value={isSubscribed}
    onChange={handleChange}
    id="subscribe"
    name="subscribe"
  />

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

Copied!
const handleChange = () => {
  setIsSubscribed(current => !current);
};

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

I've also written an article on how to check if a checkbox is checked.

# Set the default checked value of an uncontrolled Checkbox in React

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

Copied!
import {useRef} from 'react';

export default function App() {
  const ref = useRef(null);

  const handleClick = () => {
    // 👇️ Get the checkbox value with a 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>
  );
}

The useRef() hook can be passed an initial value as an argument.

Copied!
const ref = useRef(null);

The hook returns a mutable ref object whose .current property is initialized to the passed argument.

Copied!
const handleClick = () => {
  // 👇️ Get the checkbox value with a ref
  console.log(ref.current.checked);
};

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.

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.

If you need to set the default checked value of a radio button, click on the link and follow the instructions.