react/checked-requires-onchange-or-readonly

An <input> with checked is controlled by React. Without an onChange that updates the value, a click does nothing and the box looks broken. React also logs a warning for it.

The rule also reports an <input> with both checked and defaultChecked. The first says React controls the value, and the second says it doesn't. React.createElement("input", ...) is checked too.

Configure

Off by default. To turn it on:

[lint.rules]
"react/checked-requires-onchange-or-readonly" = "error" # or "warn"

Every option, set to its default:

[lint.rules]
"react/checked-requires-onchange-or-readonly" = ["error", {
  ignoreMissingProperties = false,
  ignoreExclusiveCheckedAttribute = false,
}]

Examples

Reported:

<input type="checkbox" checked={isSubscribed} />;

<input type="checkbox" checked={isSubscribed} defaultChecked onChange={toggle} />;

Not reported:

const controlled = <input type="checkbox" checked={isSubscribed} onChange={toggle} />;
const fixed = <input type="checkbox" checked={isSubscribed} readOnly />;
const uncontrolled = <input type="checkbox" defaultChecked />;

Options

Option	Default	What it does
ignoreMissingProperties	false	Allow checked without onChange or readOnly.
ignoreExclusiveCheckedAttribute	false	Allow checked together with defaultChecked.

<input type="checkbox" checked={isSubscribed} />;

<input type="checkbox" checked={isSubscribed} defaultChecked onChange={toggle} />;