While working with Form in ant design v4, I have difficulty with using CheckBox inside Form.Item.

const [form] = useForm();

useEffect(() => {
    form.setFieldsValue({
        title: '',
        billable: false,
    })
}, []);

const onFieldsChange = (changedFields, allFields) => {
    console.log('onFieldsChange.changedFields => ', changedFields);
    console.log('onFieldsChange.allFields=> ', allFields);
}

return (
    <Form form={form} onFieldsChange={onFieldsChange}>
        <Form.Item label="title" name="title">
            <Input />
        </Form.Item>
        <Form.Item label="Billable" name="billable">
            <CheckBox />
        </Form.Item>
    </Form>
);

Above code gives me the following error:

Warning: [ant:Checkbox] value is not a valid prop, do you mean checked?

How can I use CheckBox inside the Form.Item in ant design v4?

While working with Form in ant design v4, I have difficulty with using CheckBox inside Form.Item.

const [form] = useForm();

useEffect(() => {
    form.setFieldsValue({
        title: '',
        billable: false,
    })
}, []);

const onFieldsChange = (changedFields, allFields) => {
    console.log('onFieldsChange.changedFields => ', changedFields);
    console.log('onFieldsChange.allFields=> ', allFields);
}

return (
    <Form form={form} onFieldsChange={onFieldsChange}>
        <Form.Item label="title" name="title">
            <Input />
        </Form.Item>
        <Form.Item label="Billable" name="billable">
            <CheckBox />
        </Form.Item>
    </Form>
);

Above code gives me the following error:

Warning: [ant:Checkbox] value is not a valid prop, do you mean checked?

How can I use CheckBox inside the Form.Item in ant design v4?

• javascript
• reactjs
• antd

Share Improve this question Follow edited Mar 15, 2021 at 7:22 Ajeet Shah 19.9k99 gold badges6464 silver badges104104 bronze badges asked Mar 15, 2021 at 2:54 Josh ThomasJosh Thomas 1,68733 gold badges1111 silver badges2323 bronze badges 1

• There is an example in the docs, here. – maazadeeb Commented Mar 15, 2021 at 7:28

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Use valuePropName for Checkbox form item:

<Form.Item label="Billable" name="billable" valuePropName="checked">
  <Checkbox />
</Form.Item>

Default value of valuePropName is value which is correct for input fields but not for a checkbox or switch.

The accepted answer didn't work for me so I had to use the customer which was given in the docs.

<Form.Item
          name="termsAccepted"
          valuePropName="checked"
          rules={[
            {
              validator: (_, value) =>
                value
                  ? Promise.resolve()
                  : Promise.reject(new Error("Should accept agreement")),
            },
          ]}
        >
          <Checkbox checked={Form.useWatch("IsCurrentRecord", form)}>
            I agree that I have read and accepted
          </Checkbox>
        </Form.Item>