How to check a checkbox or radio button by default?

Add the checked attribute to the input. The box is checked when the page loads, and the user can still uncheck it.

<label>
  <input type="checkbox" name="newsletter" checked>
  Send me the newsletter
</label>

checked="false" is still checked

checked is a boolean attribute: the browser only looks at whether it's there, not at its value. All of these render a checked box:

<input type="checkbox" checked>
<input type="checkbox" checked="checked">
<input type="checkbox" checked="">
<input type="checkbox" checked="false">

To leave the box unchecked, leave the attribute out. The same rule applies to disabled, required and selected. If you build HTML in a template, add the attribute conditionally instead of printing true or false into it.

Radio buttons

Radio buttons with the same name form a group, and only one of them can be checked. Put checked on the option you want preselected:

<fieldset>
  <legend>Shipping</legend>
  <label>
    <input type="radio" name="shipping" value="standard" checked>
    Standard
  </label>
  <label>
    <input type="radio" name="shipping" value="express">
    Express
  </label>
</fieldset>

If several radios in one group have checked, the last one wins. If none has it, nothing is selected and the field isn't sent with the form at all. A sensible default is usually friendlier, unless you want the user to make an active choice (then add required to one of the radios).

For a dropdown, the equivalent is the selected attribute on an <option>. See how to add a placeholder for a select.

Checking it with JavaScript

const box = document.querySelector('#newsletter');

box.checked = true;        // the current state
box.defaultChecked = true; // the default, same as the attribute

These are two different things:

• checked is the live state the user sees. Setting it doesn't change the HTML attribute.
• defaultChecked mirrors the checked attribute. It's what the box returns to when the form is reset.

So if you check a box with box.checked = true and the user later clicks a reset button, the box goes back to unchecked. Also, once the user or a script has changed the box, changing the attribute no longer updates what's shown. That's why getAttribute('checked') is the wrong way to check if a checkbox is checked.

For radios, you can set the group's value through the form, and the matching radio gets checked:

const form = document.querySelector('form');
form.elements.shipping.value = 'express';

React

For an uncontrolled input, use defaultChecked. React sets the initial state and then leaves the box alone:

function NewsletterField() {
  return <input type="checkbox" name="newsletter" defaultChecked />;
}

For a controlled input, pass checked together with onChange, and keep the value in state:

function NewsletterField() {
  const [subscribed, setSubscribed] = useState(true);

  return (
    <input
      type="checkbox"
      checked={subscribed}
      onChange={(event) => setSubscribed(event.target.checked)}
    />
  );
}

checked without onChange makes a read-only box that ignores clicks, and React logs a warning suggesting defaultChecked. For radios, compare with the state: checked={shipping === 'express'}. And in JSX, pass a real boolean (checked={false}), never the string "false".