Skip to content

New Rule: onChange or readOnly prop when checked is set on an input element #3143

Closed
@karlhorky

Description

@karlhorky

Hi there! 👋

The following code produces a warning from React (see below):

<input
  type="checkbox"
  checked={marketingConsent}
  onClick={(event) => {
    setMarketingConsent(event.currentTarget.checked);
  }}
/>

This is the warning:

Warning: You provided a `checked` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultChecked`. Otherwise, set either `onChange` or `readOnly`.

Since React shows a warning for it, maybe there can be a lint rule for it too? To guide developers towards either:

  • usage of onChange or readOnly props with checked prop on an input
  • usage of defaultChecked for uncontrolled components

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions