diff --git a/src/scss/components/field/_checkbox.scss b/src/scss/components/field/_checkbox.scss
index 4a9b4a8..5e529c4 100644
--- a/src/scss/components/field/_checkbox.scss
+++ b/src/scss/components/field/_checkbox.scss
@@ -4,10 +4,10 @@
  * 
  *     
  *     
@@ -17,50 +17,39 @@
  *
  */
 
-$crispy__field__checkbox___disabled__color: !default;
-$crispy__field__checkbox___checked__color: !default;
-$crispy__field__checkbox___unchecked__color: !default;
+$crispy__field__checkbox__disabled__color: $crispy__color-secondary !default;
+$crispy__field__checkbox__checked__color: $crispy__color-success !default;
+$crispy__field__checkbox__unchecked__color: $crispy__color-text !default;
 
 @mixin crispy__field__checkbox() {
     .field__checkbox {
         position: relative;
         display: none;
-        appearance: none;
 
-        + label {
+        + .field__label {
+            .field__checkbox__checked {
+                display: none;
+            }
+
             &:hover {
                 cursor: pointer;
             }
         }
 
-        &:checked + label .field__checkbox__checked {
+        &:checked + .field__label &__checked {
             display: inline-block;
         }
 
-        &:checked + label .field__checkbox__unchecked {
+        &:checked + .field__label &__unchecked {
             display: none;
         }
 
-        &:disabled + label .field__checkbox__icon {
-            fill: $crispy__field__checkbox___disabled__color;
-        }
-
-        &:disabled + label:hover {
-            cursor: not-allowed;
-        }
-
-        &__checkbox__icon {
-            fill: $crispy__field__checkbox__color;
-            transition: $crispy__field__checkbox__transition;
-        }
-
-        &__checkbox__checked {
-            fill: $checkbox__icon-color-checked;
-            display: none;
+        &__checked {
+            fill: $crispy__field__checkbox__checked__color;
         }
 
-        &__checkbox__unchecked {
-            fill: $checkbox__icon-color-unchecked;
+        &__unchecked {
+            fill: $crispy__field__checkbox__unchecked__color;
         }
     }
 }
diff --git a/src/scss/components/field/_field.scss b/src/scss/components/field/_field.scss
index 77075d7..926daf4 100644
--- a/src/scss/components/field/_field.scss
+++ b/src/scss/components/field/_field.scss
@@ -1,5 +1,9 @@
 @import
-    'text';
+    'panel',
+    'text',
+    'checkbox',
+    'radio',
+    'select';
 
 /**
  * field
@@ -15,17 +19,17 @@ $crispy__field__input__font-size: $crispy__body__font-size !default;
 $crispy__field__input__padding: toEm(6px 8px) !default;
 $crispy__field__input__color: $crispy__color-text !default;
 
-%field__ {
-    line-height: $crispy__golden-ratio;
-    padding: $crispy__field__input__padding;
-    color: $crispy__field__input__color;
-    appearance: none;
-
-    @include crispy__font-size($crispy__field__input__font-size);
-}
-
 @mixin crispy__field() {
     .field {
         margin: $crispy__field__margin;
     }
+
+    .field__ {
+        line-height: $crispy__golden-ratio;
+        padding: $crispy__field__input__padding;
+        color: $crispy__field__input__color;
+        appearance: none;
+
+        @include crispy__font-size($crispy__field__input__font-size);
+    }
 }
diff --git a/src/scss/components/field/_panel.scss b/src/scss/components/field/_panel.scss
index c11bd50..bb4956e 100644
--- a/src/scss/components/field/_panel.scss
+++ b/src/scss/components/field/_panel.scss
@@ -11,8 +11,17 @@
  *
  */
 
+$crispy__field__panel__padding: toEm($crispy__margin) !default;
+$crispy__field__panel__color: white !default;
+$crispy__field__panel__background-color: $crispy__color-danger !default;
+
 @mixin crispy__field__panel() {
     .field__panel {
-        @extend .panel;
+        padding: $crispy__field__panel__padding;
+
+        &--error {
+            color: white;
+            background-color: $crispy__field__panel__background-color;
+        }
     }
 }
diff --git a/src/scss/components/field/_radio.scss b/src/scss/components/field/_radio.scss
index cd4de37..cc619ed 100644
--- a/src/scss/components/field/_radio.scss
+++ b/src/scss/components/field/_radio.scss
@@ -1,71 +1,55 @@
 /**
- * input, textarea
+ * radio
  *
+ * 
+ *     
+ *     
+ * 
  *
  * @author Björn Hase
  *
  */
 
-$crispy__field__checkbox: !default;
+$crispy__field__radio__disabled__color: $crispy__color-secondary !default;
+$crispy__field__radio__checked__color: $crispy__color-success !default;
+$crispy__field__radio__unchecked__color: $crispy__color-text !default;
 
-@mixin crispy__field__checkbox() {
-    .field__checkbox {
+@mixin crispy__field__radio() {
+    .field__radio {
+        position: relative;
+        display: none;
 
-        label {
-            &:hover {
-                cursor: pointer;
-            }
-
-            .field__checkbox__icon {
-                fill: $checkbox__icon-color-unchecked;
-                transition: $checkbox__transition-color;
-            }
-
-            .field__checkbox__checked {
-                fill: $checkbox__icon-color-checked;
+        + .field__label {
+            .field__radio__checked {
                 display: none;
             }
 
-            .field__checkbox__unchecked {
-                fill: $checkbox__icon-color-unchecked;
+            &:hover {
+                cursor: pointer;
             }
         }
 
-        input[type="checkbox"] {
-            position: relative;
-            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;
+        &:checked + .field__label &__checked {
+            display: inline-block;
         }
 
-        &--valid {
-            border-color: $crispy__field__border-color--valid;
+        &:checked + .field__label &__unchecked {
+            display: none;
         }
 
-        &--error {
-            border-color: $crispy__field__border-color--error;
+        &__checked {
+            fill: $crispy__field__radio__checked__color;
         }
 
-        &:focus {
-            border-color: $crispy__field__border-color--focus;
+        &__unchecked {
+            fill: $crispy__field__radio__unchecked__color;
         }
-
-        @include crispy__font-size($crispy__field__font-size);
     }
 }
diff --git a/src/scss/components/field/_select.scss b/src/scss/components/field/_select.scss
index e69de29..165afc5 100644
--- a/src/scss/components/field/_select.scss
+++ b/src/scss/components/field/_select.scss
@@ -0,0 +1,48 @@
+/**
+ * select
+ *
+ * 
+ *     
+ * 
+ *
+ * @author Björn Hase
+ *
+ */
+
+$crispy__field__select__background-color: white !default;
+
+$crispy__field__select__border: 1px solid $crispy__color-secondary !default;
+
+$crispy__field__select__border-color--focus: $crispy__color-primary !default;
+$crispy__field__select__border-color--valid: $crispy__color-success !default;
+$crispy__field__select__border-color--error: $crispy__color-danger !default;
+
+@mixin crispy__field__select()
+{
+    .field__select {
+        @extend .field__;
+
+        display: block;
+        width: 100%;
+        border: $crispy__field__select__border;
+
+        background-color: $crispy__field__select__background-color;
+
+        &--valid {
+            border-color: $crispy__field__select__border-color--valid;
+        }
+
+        &--error {
+            border-color: $crispy__field__select__border-color--error;
+        }
+
+        &:focus {
+            outline: 0;
+            border-color: $crispy__field__select__border-color--focus;
+        }
+    }
+}
diff --git a/src/scss/components/field/_text.scss b/src/scss/components/field/_text.scss
index bc4ea49..15bd7a1 100644
--- a/src/scss/components/field/_text.scss
+++ b/src/scss/components/field/_text.scss
@@ -20,22 +20,22 @@ $crispy__field__text__border-color--error: $crispy__color-danger !default;
 
 @mixin crispy__field__text() {
     .field__text {
-        @extend %field__;
+        @extend .field__;
 
         display: block;
         width: 100%;
-        border: $crispy__field__border;
+        border: $crispy__field__text__border;
 
         &--valid {
-            border-color: $crispy__field__border-color--valid;
+            border-color: $crispy__field__text__border-color--valid;
         }
 
         &--error {
-            border-color: $crispy__field__border-color--error;
+            border-color: $crispy__field__text__border-color--error;
         }
 
         &:focus {
-            border-color: $crispy__field__border-color--focus;
+            border-color: $crispy__field__text__border-color--focus;
         }
     }
 }
diff --git a/src/scss/example.scss b/src/scss/example.scss
index 1b65942..e6c21b5 100644
--- a/src/scss/example.scss
+++ b/src/scss/example.scss
@@ -12,7 +12,12 @@
 @include crispy__panel();
 @include crispy__table();
 
-@include crispy__form__text();
+@include crispy__field();
+@include crispy__field__text();
+@include crispy__field__checkbox();
+@include crispy__field__radio();
+@include crispy__field__select();
+@include crispy__field__panel();
 
 .container {
     max-width: 992px;