diff --git a/packages/oui-checkbox/src/checkbox.component.js b/packages/oui-checkbox/src/checkbox.component.js
index 3663b59a..9e789c78 100644
--- a/packages/oui-checkbox/src/checkbox.component.js
+++ b/packages/oui-checkbox/src/checkbox.component.js
@@ -4,6 +4,9 @@ import template from "./checkbox.html";
 export default {
     template,
     controller,
+    require: {
+        form: "?^^form"
+    },
     bindings: {
         model: "=?",
         id: "@?",
diff --git a/packages/oui-checkbox/src/checkbox.controller.js b/packages/oui-checkbox/src/checkbox.controller.js
index bdf5101e..0e9658d7 100644
--- a/packages/oui-checkbox/src/checkbox.controller.js
+++ b/packages/oui-checkbox/src/checkbox.controller.js
@@ -17,7 +17,6 @@ export default class {
         // So we use $timeout to force the $apply
         this.$timeout(() =>
             this.$element
-                .addClass("oui-checkbox")
                 .removeAttr("id")
                 .removeAttr("name")
         );
@@ -38,6 +37,13 @@ export default class {
         addDefaultParameter(this, "id", `ouiCheckbox${this.$scope.$id}`);
     }
 
+    hasError () {
+        if (!this.form || !this.form[this.name]) {
+            return false;
+        }
+        return (!this.form[this.name].$dirty || this.form.$submitted) && !this.focused && this.form[this.name].$invalid;
+    }
+
     _updateIndeterminateState (model) {
         this.checkboxElement.prop("indeterminate", model === null);
     }
diff --git a/packages/oui-checkbox/src/checkbox.html b/packages/oui-checkbox/src/checkbox.html
index fc1249ef..4caca23f 100644
--- a/packages/oui-checkbox/src/checkbox.html
+++ b/packages/oui-checkbox/src/checkbox.html
@@ -1,28 +1,33 @@
-<input class="oui-checkbox__input"
-    type="checkbox"
-    id="{{:: $ctrl.id }}"
-    name="{{:: $ctrl.name }}"
-    ng-attr-aria-labelledby="{{:: $ctrl.id }}-text"
-    ng-attr-aria-describedby="{{:: $ctrl.description && $ctrl.id + '-description' || undefined }}"
-    ng-model="$ctrl.model"
-    ng-change="$ctrl.onChange({ modelValue: $ctrl.model })"
-    ng-disabled="$ctrl.disabled"
-    ng-required="$ctrl.required">
-<label for="{{:: $ctrl.id }}"
-    class="oui-checkbox__label-container"
-    ng-attr-aria-labelledby="{{:: $ctrl.id }}-text"
-    ng-attr-aria-describedby="{{:: $ctrl.description && $ctrl.id + '-description' || undefined }}">
-    <span class="oui-checkbox__label">
-        <span id="{{:: $ctrl.id }}-text" ng-transclude>{{$ctrl.text}}</span>
-        <span class="oui-checkbox__icon">
-            <span class="oui-icon oui-icon-checkbox-unchecked"></span>
-            <span class="oui-icon oui-icon-checkbox-checked"></span>
-            <span class="oui-icon oui-icon-checkbox-checkmark"></span>
-            <span class="oui-icon oui-icon-checkbox-indeterminate"></span>
+<div class="oui-checkbox"
+    ng-class="{ 'oui-checkbox_error': $ctrl.hasError() }">
+    <input class="oui-checkbox__input"
+        type="checkbox"
+        id="{{:: $ctrl.id }}"
+        name="{{:: $ctrl.name }}"
+        ng-attr-aria-labelledby="{{:: $ctrl.id }}-text"
+        ng-attr-aria-describedby="{{:: $ctrl.description && $ctrl.id + '-description' || undefined }}"
+        ng-model="$ctrl.model"
+        ng-change="$ctrl.onChange({ modelValue: $ctrl.model })"
+        ng-disabled="$ctrl.disabled"
+        ng-required="$ctrl.required"
+        ng-focus="$ctrl.focused = true"
+        ng-blur="$ctrl.focused = false">
+    <label for="{{:: $ctrl.id }}"
+        class="oui-checkbox__label-container"
+        ng-attr-aria-labelledby="{{:: $ctrl.id }}-text"
+        ng-attr-aria-describedby="{{:: $ctrl.description && $ctrl.id + '-description' || undefined }}">
+        <span class="oui-checkbox__label">
+            <span id="{{:: $ctrl.id }}-text" ng-transclude>{{$ctrl.text}}</span>
+            <span class="oui-checkbox__icon">
+                <span class="oui-icon oui-icon-checkbox-unchecked"></span>
+                <span class="oui-icon oui-icon-checkbox-checked"></span>
+                <span class="oui-icon oui-icon-checkbox-checkmark"></span>
+                <span class="oui-icon oui-icon-checkbox-indeterminate"></span>
+            </span>
         </span>
-    </span>
-    <span id="{{:: $ctrl.id }}-description" class="oui-checkbox__description"
-        ng-bind="$ctrl.description"
-        ng-if="$ctrl.description">
-    </span>
-</label>
+        <span id="{{:: $ctrl.id }}-description" class="oui-checkbox__description"
+            ng-bind="$ctrl.description"
+            ng-if="$ctrl.description">
+        </span>
+    </label>
+</div>
diff --git a/packages/oui-checkbox/src/index.spec.js b/packages/oui-checkbox/src/index.spec.js
index 3f443ede..7c7a242a 100644
--- a/packages/oui-checkbox/src/index.spec.js
+++ b/packages/oui-checkbox/src/index.spec.js
@@ -27,12 +27,12 @@ describe("ouiCheckbox", () => {
     }
 
     describe("Component", () => {
-        it("should have a default classname", () => {
+        it("should have an element with default classname", () => {
             const element = TestUtils.compileTemplate("<oui-checkbox></oui-checkbox>");
 
             $timeout.flush();
 
-            expect(element.hasClass("oui-checkbox")).toBeTruthy();
+            expect(element.find("div").eq(0).hasClass("oui-checkbox")).toBe(true);
         });
 
         describe("id attribute", () => {