Skip to content

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

Closed
@karlhorky

Description

@karlhorky
Contributor

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

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Participants

      @ljharb@karlhorky

      Issue actions

        New Rule: `onChange` or `readOnly` prop when `checked` is set on an `input` element · Issue #3143 · jsx-eslint/eslint-plugin-react