diff --git a/package.json b/package.json
index 2c5f511..05db6e3 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "common-mobx-form",
-  "version": "0.0.22",
+  "version": "0.0.24",
   "description": "",
   "main": "./lib",
   "module": "./src",
diff --git a/src/fields/CheckboxField.js b/src/fields/CheckboxField.js
index f751ab7..a8baa91 100644
--- a/src/fields/CheckboxField.js
+++ b/src/fields/CheckboxField.js
@@ -4,36 +4,32 @@ import {observer} from 'mobx-react';
 
 @observer
 class CheckboxField extends React.Component {
+    static defaultProps = {
+        field: {
+            id: ''
+        }
+    };
+
 	static propTypes = {
 		placeholder: PropTypes.string,
 		field: PropTypes.object,
 		classContainer: PropTypes.string,
 	};
 
-	constructor(props) {
-		super(props);
-		this.inputId = Math.random().toString(36).substring(7);
-	}
-
-	handleChange() {
-		const {field} = this.props;
-		field.value = !field.value;
-		if (field.onChange) {
-			field.onChange(field.value);
-		}
-	}
+	get inputId() {
+	    return this.props.field.id || Math.random().toString(36).substring(7);
+    }
 
 	render() {
 		const {placeholder, field, classContainer, tabIndex} = this.props;
 		return (
 			<div className={classContainer}>
-				<input id={this.inputId}
-					   type='checkbox'
+				<input type='checkbox'
 					   tabIndex={tabIndex}
-					{...field.bind({checked: field.value})} />
-				<label for={this.inputId}
-					   className='label_check'
-					   onClick={() => this.handleChange()}>
+                       {...field.bind({checked: field.value})}
+                       id={this.inputId} />
+				<label htmlFor={this.inputId}
+					   className='label_check'>
 					<i className='icon'/>
 					<span className='f_small'>{placeholder}</span>
 				</label>