---
title: "Use Ant Design Checkbox with getFieldDecorator"
date: 2018-11-03T12:48:07.000Z
author: Z.SHINCHVEN
tags: [Ant Design, Checkbox, getFieldDecorator, Form]
canonical: https://atlassc.net/2018/11/04/ant-design-checkbox-with-getfielddecorator
---
## Error

Form.getFieldDecorator is an Ant Design [Form](https://ant.design/components/form/) validation tool, it is used to wrapped input components and handle value and value validation. It is working fine with common component with a props named value, [but it throws error when used to wrap a Checkbox](https://github.com/ant-design/ant-design/pull/18497). 

```log error
Warning: [antd: Checkbox] `value` is not validate prop, do you mean `checked`? 
```

## Solution

Checkbox is a component that demonstrates and returns a checked status, it simply does not have a props named value build within. So the way to handle this error is simple, I just have to create a custom Checkbox which [maps the options](https://github.com/ant-design/ant-design/blob/master/components/form/Form.tsx#L81) of `Form.getFieldDecorator` to [Checkbox's props](https://github.com/ant-design/ant-design/blob/master/components/checkbox/Checkbox.tsx#L15). 

```jsx
// React Component
import React, { PureComponent } from 'react';
import { Checkbox } from 'antd';

export default class CustomCheckbox extends PureComponent {
  render() {
    return (
      <Checkbox
        defaultChecked={this.props.initialValue}
        checked={this.props.value}
        onChange={this.props.onChange}>
        {this.props.text}
      </Checkbox>
    );
  }
}

```