ant-design: [antd: Checkbox] `value` is not validate prop, do you mean `checked`?

  • I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

Edit on CodeSandbox

Steps to reproduce

Wrap a checkbox in a field decorator:

    <Form>
      <Form.Item label={"Form.Item with Checkbox"}>
        {getFieldDecorator("areDatesFlexible")(
          <Checkbox defaultChecked={event.areDatesFlexible} />
        )}
      </Form.Item>
    </Form>

What is expected?

no warning

What is actually happening?

warning

Environment Info
antd 3.26.6
React react@^16.12.0: version “16.12.0”
System Mac OSX 10.13
Browser Chrome Canary [Version 81.0.4019.3 (Official Build) canary (64-bit)]

related to https://github.com/ant-design/ant-design/issues/19667 which was flagged as invalid

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Reactions: 2
  • Comments: 15 (8 by maintainers)

Most upvoted comments

For anyone having this warning as well, I just found the answer in the doc: https://ant.design/components/form/#components-form-demo-validate-other

<Form.Item name="switch" label="Switch" valuePropName="checked">
  <Switch />
</Form.Item>

Please note the valuePropName="checked"

For anyone having this warning as well, I just found the answer in the doc: https://ant.design/components/form/#components-form-demo-validate-other

<Form.Item name="switch" label="Switch" valuePropName="checked">
  <Switch />
</Form.Item>

Please note the valuePropName="checked"

It’s cause type error in Typescript.

It’s ok.

<Form.Item name="checkbox">
  {getFieldDecorator('order_receiver', {
      defaultChecked: true,
      rules: [
          {
              required: false,
              message:
                  'Offer!',
          },
      ],
      valuePropName:"checked"
  })(
      <Checkbox className="ps-checkbox">Order Receiver</Checkbox>,
  )}
</Form.Item>

valuePropName=“checked”

This should really be in the documentation, I was struggling to get the checkbox to recognise the value without having to make it a controlled component.

thank you @ChristopheBougere that is exactly what I needed, perhaps we need this in the <Switch /> demo code examples?

The form component has been rewritten in v4, and its API is more friendly! https://next.ant.design/components/form/