diff --git a/src/scss/components/field/_checkbox.scss b/src/scss/components/field/_checkbox.scss
index cd4de37..f580a37 100644
--- a/src/scss/components/field/_checkbox.scss
+++ b/src/scss/components/field/_checkbox.scss
@@ -1,6 +1,17 @@
 /**
- * input, textarea
+ * checkbox
  *
+ * <div class="field">
+ *     <input id="" type="text" class="field__checkbox" />
+ *     <label for="" class="field__label">
+ *         <svg class="icon field__checkbox__icon field__checkbox__checked" viewBox="0 0 100 100">
+ *             <use src="#"></use>
+ *         </svg>
+ *         <svg class="icon field__checkbox__icon field__checkbox__checked" viewBox="0 0 100 100">
+ *             <use src="#"></use>
+ *         </svg>
+ *    </label>
+ * </div>
  *
  * @author Björn Hase
  *
@@ -10,62 +21,44 @@ $crispy__field__checkbox: !default;
 
 @mixin crispy__field__checkbox() {
     .field__checkbox {
+        position: relative;
+        display: none;
+        appearance: none;
 
-        label {
+        + label {
             &:hover {
                 cursor: pointer;
             }
+        }
 
-            .field__checkbox__icon {
-                fill: $checkbox__icon-color-unchecked;
-                transition: $checkbox__transition-color;
-            }
-
-            .field__checkbox__checked {
-                fill: $checkbox__icon-color-checked;
-                display: none;
-            }
-
-            .field__checkbox__unchecked {
-                fill: $checkbox__icon-color-unchecked;
-            }
+        &:checked + label .field__checkbox__checked {
+            display: inline-block;
         }
 
-        input[type="checkbox"] {
-            position: relative;
+        &:checked + label .field__checkbox__unchecked {
             display: none;
+        }
 
-            &:checked + label .field__checkbox__checked {
-                display: inline-block;
-            }
-
-            &:checked + label .field__checkbox__unchecked {
-                display: none;
-            }
-
-            &:disabled + label .field__checkbox__icon {
-                fill: $checkbox__icon-color--disabled;
-            }
-
-            &:disabled + label:hover {
-                cursor: not-allowed;
-            }
-
-            appearance: none;
+        &:disabled + label .field__checkbox__icon {
+            fill: $checkbox__icon-color--disabled;
         }
 
-        &--valid {
-            border-color: $crispy__field__border-color--valid;
+        &:disabled + label:hover {
+            cursor: not-allowed;
         }
 
-        &--error {
-            border-color: $crispy__field__border-color--error;
+        &__checkbox__icon {
+            fill: $checkbox__icon-color-unchecked;
+            transition: $checkbox__transition-color;
         }
 
-        &:focus {
-            border-color: $crispy__field__border-color--focus;
+        &__checkbox__checked {
+            fill: $checkbox__icon-color-checked;
+            display: none;
         }
 
-        @include crispy__font-size($crispy__field__font-size);
+        &__checkbox__unchecked {
+            fill: $checkbox__icon-color-unchecked;
+        }
     }
 }
diff --git a/src/scss/components/field/_text.scss b/src/scss/components/field/_text.scss
index 56134d0..bc4ea49 100644
--- a/src/scss/components/field/_text.scss
+++ b/src/scss/components/field/_text.scss
@@ -1,5 +1,5 @@
 /**
- *
+ * text
  *
  * <div class="field">
  *     <label class="field__label">
@@ -20,7 +20,7 @@ $crispy__field__text__border-color--error: $crispy__color-danger !default;
 
 @mixin crispy__field__text() {
     .field__text {
-        @extend %field__; 
+        @extend %field__;
 
         display: block;
         width: 100%;