# react/checked-requires-onchange-or-readonly

> Require `onChange` or `readOnly` on an `input` that has `checked`

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.

{/* Generated by src/codegen/lint-rule-docs.ts. Do not edit this section. */}

## Configure

Off by default. To turn it on:

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

Every option, set to its default:

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

{/* End of the generated section. */}

## Examples

Reported:

{/* bad */}
```jsx
<input type="checkbox" checked={isSubscribed} />;
```

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

Not reported:

{/* good */}
```jsx
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`. |

{/* good {"options": [{"ignoreMissingProperties": true}]} */}
```jsx
<input type="checkbox" checked={isSubscribed} />;
```

{/* good {"options": [{"ignoreExclusiveCheckedAttribute": true}]} */}
```jsx
<input type="checkbox" checked={isSubscribed} defaultChecked onChange={toggle} />;
```