diff --git a/src/app/pages/forms/components/inputs/components/checkboxInputs/checkboxInputs.component.ts b/src/app/pages/forms/components/inputs/components/checkboxInputs/checkboxInputs.component.ts
index c6a0194d..0b2f4c1d 100644
--- a/src/app/pages/forms/components/inputs/components/checkboxInputs/checkboxInputs.component.ts
+++ b/src/app/pages/forms/components/inputs/components/checkboxInputs/checkboxInputs.component.ts
@@ -1,11 +1,14 @@
 import {Component} from '@angular/core';
+import {BaCheckbox} from '../../../../../../theme/components';
 
 @Component({
   selector: 'checkbox-inputs',
   template: require('./checkboxInputs.html'),
+  directives: [BaCheckbox]
 })
 export class CheckboxInputs {
 
   constructor() {
   }
+  
 }
diff --git a/src/app/pages/forms/components/inputs/components/checkboxInputs/checkboxInputs.html b/src/app/pages/forms/components/inputs/components/checkboxInputs/checkboxInputs.html
index 04ae9ab1..7b5200ad 100644
--- a/src/app/pages/forms/components/inputs/components/checkboxInputs/checkboxInputs.html
+++ b/src/app/pages/forms/components/inputs/components/checkboxInputs/checkboxInputs.html
@@ -1,22 +1,13 @@
 <div class="checkbox-demo-row">
   <div class="input-demo checkbox-demo row">
     <div class="col-md-4">
-      <label class="checkbox-inline custom-checkbox nowrap">
-        <input type="checkbox" id="inlineCheckbox01" value="option1">
-        <span>Check 1</span>
-      </label>
+      <ba-checkbox [(ngModel)]="value1" [label]="'Check 1'" [disabled]="false" [value]="option1" id="inlineCheckbox01"></ba-checkbox>
     </div>
     <div class="col-md-4">
-      <label class="checkbox-inline custom-checkbox nowrap">
-        <input type="checkbox" id="inlineCheckbox02" value="option2">
-        <span>Check 2</span>
-      </label>
+      <ba-checkbox [(ngModel)]="value2" [label]="'Check 2'" [disabled]="false" [value]="option2" id="inlineCheckbox02"></ba-checkbox>
     </div>
     <div class="col-md-4">
-      <label class="checkbox-inline custom-checkbox nowrap">
-        <input type="checkbox" id="inlineCheckbox03" value="option3">
-        <span>Check 3</span>
-      </label>
+      <ba-checkbox [(ngModel)]="value3" [label]="'Check 3'" [disabled]="false" [value]="option3" id="inlineCheckbox03"></ba-checkbox>
     </div>
   </div>
   <div class="input-demo radio-demo row">
diff --git a/src/app/theme/components/baCheckbox/baCheckbox.component.ts b/src/app/theme/components/baCheckbox/baCheckbox.component.ts
new file mode 100644
index 00000000..bfb8258f
--- /dev/null
+++ b/src/app/theme/components/baCheckbox/baCheckbox.component.ts
@@ -0,0 +1,31 @@
+import {Component, Provider, forwardRef, Input} from "@angular/core";
+import {ControlValueAccessor, NG_VALUE_ACCESSOR} from "@angular/common";
+
+const BA_CHECKBOX_CONTROL_VALUE_ACCESSOR = new Provider(
+  NG_VALUE_ACCESSOR, {
+    useExisting: forwardRef(() => BaCheckbox),
+    multi: true
+  });
+
+@Component({
+  selector: 'ba-checkbox',
+  template: require('./baCheckbox.html'),
+  providers: [BA_CHECKBOX_CONTROL_VALUE_ACCESSOR]
+})
+export class BaCheckbox implements ControlValueAccessor {
+  @Input() disabled:boolean = false;
+  @Input() label:string = 'Checkbox';
+  @Input() value:string = '';
+  @Input() name:string = '';
+
+  private _state;
+
+  onChange(value: any): void {}
+  onTouch(value: any): void {}
+  writeValue(value: any): void {
+    this._state = value;
+  }
+
+  registerOnChange(fn: any): void { this.onChange = fn; }
+  registerOnTouched(fn: any): void { this.onTouch = fn; }
+}
diff --git a/src/app/theme/components/baCheckbox/baCheckbox.html b/src/app/theme/components/baCheckbox/baCheckbox.html
new file mode 100644
index 00000000..b07f44ee
--- /dev/null
+++ b/src/app/theme/components/baCheckbox/baCheckbox.html
@@ -0,0 +1,4 @@
+<label class="checkbox-inline custom-checkbox nowrap">
+  <input type="checkbox" (change)="onChange($event.target.checked)" [disabled]="disabled" [value]="value">
+  <span>{{label}}</span>
+</label>
diff --git a/src/app/theme/components/baCheckbox/index.ts b/src/app/theme/components/baCheckbox/index.ts
new file mode 100644
index 00000000..5bd11d98
--- /dev/null
+++ b/src/app/theme/components/baCheckbox/index.ts
@@ -0,0 +1 @@
+export * from './baCheckbox.component';
diff --git a/src/app/theme/components/index.ts b/src/app/theme/components/index.ts
index 4d80824e..9d4c20f7 100644
--- a/src/app/theme/components/index.ts
+++ b/src/app/theme/components/index.ts
@@ -7,3 +7,4 @@ export * from './baAmChart';
 export * from './baChartistChart';
 export * from './baBackTop';
 export * from './baFullCalendar';
+export * from './baCheckbox';