diff --git a/views/ngXosLib/xosHelpers/spec/ui/form.test.js b/views/ngXosLib/xosHelpers/spec/ui/form.test.js
index 5d2b833..32e91be 100644
--- a/views/ngXosLib/xosHelpers/spec/ui/form.test.js
+++ b/views/ngXosLib/xosHelpers/spec/ui/form.test.js
@@ -186,6 +186,7 @@
             first_name: 'Jhon',
             last_name: 'Snow',
             age: 25,
+            email: 'test@onlab.us',
             birthDate: '2016-04-18T23:44:16.883181Z',
             enabled: true,
             role: 'user', //select
@@ -208,14 +209,19 @@
           expect(isolatedScope.excludedField).toEqual(expected);
         });
 
-        it('should render 8 field', () => {
-          expect(Object.keys(isolatedScope.formField).length).toEqual(8);
+        it('should render 8 input field', () => {
+          // boolean are in the form model, but are not input
+          expect(Object.keys(isolatedScope.formField).length).toEqual(9);
           var field = element[0].getElementsByTagName('input');
           expect(field.length).toEqual(8);
         });
 
+        it('should render 1 boolean field', () => {
+          expect($(element).find('.boolean-field > button').length).toEqual(2)
+        });
+
         it('when clicking on action should invoke callback', () => {
-          var link = element[0].getElementsByTagName('button')[0];
+          var link = $(element).find('[role="button"]');
           link.click();
           expect(cb).toHaveBeenCalledWith(scope.model);
         });
@@ -229,7 +235,31 @@
         it('should use the correct input type', () => {
           expect($(element).find('[name="age"]')).toHaveAttr('type', 'number');
           expect($(element).find('[name="birthDate"]')).toHaveAttr('type', 'date');
-          expect($(element).find('[name="enabled"]')).toHaveAttr('type', 'boolean');
+          expect($(element).find('[name="email"]')).toHaveAttr('type', 'email');
+        });
+
+        describe('the boolean field', () => {
+
+          let setFalse, setTrue;
+
+          beforeEach(() => {
+            setFalse= $(element).find('.boolean-field > button:first-child');
+            setTrue = $(element).find('.boolean-field > button:last-child');
+          });
+
+          it('should change value to false', () => {
+            expect(isolatedScope.ngModel.enabled).toEqual(true);
+            setFalse.click()
+            expect(isolatedScope.ngModel.enabled).toEqual(false);
+          });
+
+          it('should change value to false', () => {
+            isolatedScope.ngModel.enabled = false;
+            scope.$apply();
+            expect(isolatedScope.ngModel.enabled).toEqual(false);
+            setTrue.click()
+            expect(isolatedScope.ngModel.enabled).toEqual(true);
+          });
         });
       });
     });
diff --git a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/form.component.js b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/form.component.js
index 4f22f99..4d53a92 100644
--- a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/form.component.js
+++ b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/form.component.js
@@ -61,13 +61,28 @@
         ngModel: '='
       },
       template: `
-        <ng-form name="vm.config.formName || 'form'">
+        <ng-form name="vm.{{vm.config.formName || 'form'}}">
           <div class="form-group" ng-repeat="(name, field) in vm.formField">
             <label>{{field.label}}</label>
-            <input type="{{field.type}}" name="{{name}}" class="form-control" ng-model="vm.ngModel[name]"/>
+            <input ng-if="field.type !== 'boolean'" type="{{field.type}}" name="{{name}}" class="form-control" ng-model="vm.ngModel[name]"/>
+            <span class="boolean-field" ng-if="field.type === 'boolean'">
+              <button
+                class="btn btn-success"
+                ng-show="vm.ngModel[name]"
+                ng-click="vm.ngModel[name] = false">
+                <i class="glyphicon glyphicon-ok"></i>
+              </button>
+              <button
+                class="btn btn-danger"
+                ng-show="!vm.ngModel[name]"
+                ng-click="vm.ngModel[name] = true">
+                <i class="glyphicon glyphicon-remove"></i>
+              </button>
+            </span>
+            <xos-validation errors="vm[vm.config.formName || 'form'][name].$error"></xos-validation>
           </div>
           <div class="form-group" ng-if="vm.config.actions">
-            <button href=""
+            <button role="button" href=""
               ng-repeat="action in vm.config.actions"
               ng-click="action.cb(vm.ngModel)"
               class="btn btn-{{action.class}}"
@@ -152,6 +167,10 @@
           model[f] = new Date(model[f]);
         }
 
+        if(form[f].type === 'number'){
+          model[f] = parseInt(model[f], 10);
+        }
+
         return form;
       }, {});
     };
diff --git a/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/validation.component.js b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/validation.component.js
new file mode 100644
index 0000000..6b80a32
--- /dev/null
+++ b/views/ngXosLib/xosHelpers/src/ui_components/dumbComponents/validation.component.js
@@ -0,0 +1,48 @@
+/**
+ * © OpenCORD
+ *
+ * Visit http://guide.xosproject.org/devguide/addview/ for more information
+ *
+ * Created by teone on 4/15/16.
+ */
+
+(function () {
+  'use strict';
+
+  angular.module('xos.uiComponents')
+
+  /**
+    * @ngdoc directive
+    * @name xos.uiComponents.directive:xosValidation
+    * @restrict E
+    * @description The xos-validation directive
+    * @param {Object} errors The error object
+    * @element ANY
+    * @scope
+    */
+
+  .directive('xosValidation', function(){
+    return {
+      restrict: 'E',
+      scope: {
+        errors: '='
+      },
+      template: `
+        <div>
+          <pre>{{vm.errors.email | json}}</pre>
+          <xos-alert config="vm.config" show="vm.errors.email !== undefined">
+            This is not a valid email
+          </xos-alert>
+        </div>
+      `,
+      transclude: true,
+      bindToController: true,
+      controllerAs: 'vm',
+      controller: function(){
+        this.config = {
+          type: 'danger'
+        }
+      }
+    }
+  })
+})();