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

What it does

This rule enforces onChange or readonly attribute for checked property of input elements. It also warns when checked and defaultChecked properties are used together.

Example

Examples of incorrect code for this rule:

<input type="checkbox" checked />
<input type="checkbox" checked defaultChecked />
<input type="radio" checked defaultChecked />

React.createElement('input', { checked: false });
React.createElement('input', { type: 'checkbox', checked: true });
React.createElement('input', { type: 'checkbox', checked: true, defaultChecked: true });

Examples of correct code for this rule:

<input type="checkbox" checked onChange={() => {}} />
<input type="checkbox" checked readOnly />
<input type="checkbox" checked onChange readOnly />
<input type="checkbox" defaultChecked />

React.createElement('input', { type: 'checkbox', checked: true, onChange() {} });
React.createElement('input', { type: 'checkbox', checked: true, readOnly: true });
React.createElement('input', { type: 'checkbox', checked: true, onChange() {}, readOnly: true });
React.createElement('input', { type: 'checkbox', defaultChecked: true });

How to use

To enable this rule in the CLI or using the config file, you can use:

CLI

oxlint --deny react/checked-requires-onchange-or-readonly

Config (.oxlintrc.json)

{
  "rules": {
    "react/checked-requires-onchange-or-readonly": "error"
  }
}

References

• Rule Source