diff --git a/package.json b/package.json
index 762037dd..8770f09c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@capitec/omni-components",
-    "version": "0.7.14",
+    "version": "0.8.0",
     "type": "module",
     "description": "Modern UI component library for mobile and web",
     "scripts": {
diff --git a/src/currency-field/CurrencyField.ts b/src/currency-field/CurrencyField.ts
index 4098476c..ef859cc2 100644
--- a/src/currency-field/CurrencyField.ts
+++ b/src/currency-field/CurrencyField.ts
@@ -555,7 +555,7 @@ export class CurrencyField extends OmniFormElement {
                 }
 
                 .field.error {
-                    color: var(--omni-currency-field-error-font-color);
+                    color: var(--omni-currency-field-error-font-color, var(--omni-font-color));
                 }
 
                 .label {
diff --git a/src/date-picker/DatePicker.ts b/src/date-picker/DatePicker.ts
index 748deb00..7b7e70b6 100644
--- a/src/date-picker/DatePicker.ts
+++ b/src/date-picker/DatePicker.ts
@@ -240,130 +240,130 @@ export class DatePicker extends OmniFormElement {
         return [
             super.styles,
             css`
-            /* Added to ensure that component has pointer cursor applied */
-            :host {
-                cursor: pointer;
-            }
-
-            .field {
-                flex: 1 1 auto;
-
-                border: none;
-                background: none;
-                box-shadow: none;
-                outline: 0;
-                padding: 0;
-                margin: 0;
-
-                text-align: var(--omni-date-picker-text-align, left);
-
-                color: var(--omni-date-picker-font-color, var(--omni-font-color));
-                font-family: var(--omni-date-picker-font-family, var(--omni-font-family));
-                font-size: var(--omni-date-picker-font-size, var(--omni-font-size));
-                font-weight: var(--omni-date-picker-font-weight, var(--omni-font-weight));
-                height: var(--omni-date-picker-height, 100%);
-                padding: var(--omni-date-picker-padding, 10px);
-                width: var(--omni-date-picker-width);
-                min-width: var(--omni-date-picker-min-width, 242px);
+                /* Added to ensure that component has pointer cursor applied */
+                :host {
+                    cursor: pointer;
+                }
 
-                cursor: pointer;
-            }
+                .field {
+                    flex: 1 1 auto;
 
-            .field.disabled {
-                color: var(--omni-date-picker-disabled-font-color, #7C7C7C);
-            }
-    
-            .field.error {
-                color: var(--omni-date-picker-error-font-color);
-            }
+                    border: none;
+                    background: none;
+                    box-shadow: none;
+                    outline: 0;
+                    padding: 0;
+                    margin: 0;
 
-            /* Styles for the control and control icon */
+                    text-align: var(--omni-date-picker-text-align, left);
 
-            .control {
-                display: inline-flex;
-                flex: 0 0 auto;
-                align-items: center;
-                cursor: pointer;
-                padding: var(--omni-date-picker-control-padding, 10px 10px);
-            }
+                    color: var(--omni-date-picker-font-color, var(--omni-font-color));
+                    font-family: var(--omni-date-picker-font-family, var(--omni-font-family));
+                    font-size: var(--omni-date-picker-font-size, var(--omni-font-size));
+                    font-weight: var(--omni-date-picker-font-weight, var(--omni-font-weight));
+                    height: var(--omni-date-picker-height, 100%);
+                    padding: var(--omni-date-picker-padding, 10px);
+                    width: var(--omni-date-picker-width);
+                    min-width: var(--omni-date-picker-min-width, 242px);
 
-            .control:hover  {
-                background-color: var(--omni-date-picker-control-hover-color, var(--omni-accent-hover-color));
-            }
+                    cursor: pointer;
+                }
 
+                .field.disabled {
+                    color: var(--omni-date-picker-disabled-font-color, #7C7C7C);
+                }
+        
+                .field.error {
+                    color: var(--omni-date-picker-error-font-color, var(--omni-font-color));
+                }
 
-            .control-icon,
-            ::slotted([slot='calendar']){
-                width: var(--omni-date-picker-control-icon-width, 20px);
-                height: var(--omni-date-picker-control-icon-height, 20px);
-                fill: var(--omni-date-picker-control-icon-color,  var(--omni-primary-color));
-                cursor: pointer;
-            }
+                /* Styles for the control and control icon */
 
-            .control-icon.error {
-                fill: var(--omni-date-picker-control-icon-error-color, var(--omni-error-font-color));
-            }
+                .control {
+                    display: inline-flex;
+                    flex: 0 0 auto;
+                    align-items: center;
+                    cursor: pointer;
+                    padding: var(--omni-date-picker-control-padding, 10px 10px);
+                }
 
-            .left-border {
-                width: var(--omni-date-picker-control-left-border-width, 1px);
-                background-color: var(--omni-date-picker-control-left-border-color,var(--omni-form-border-color));
-            }
+                .control:hover  {
+                    background-color: var(--omni-date-picker-control-hover-color, var(--omni-accent-hover-color));
+                }
 
-            .layout:focus-within > .left-border {
-                width: var(--omni-date-picker-control-left-focused-border-width, 2px);
-                background-color: var(--omni-date-picker-control-left-focused-color, var(--omni-primary-color));
-            }
 
-            .left-border.error {
-                background-color: var(--omni-date-picker-control-left-border-error-color, var(--omni-error-font-color));
-            }
+                .control-icon,
+                ::slotted([slot='calendar']){
+                    width: var(--omni-date-picker-control-icon-width, 20px);
+                    height: var(--omni-date-picker-control-icon-height, 20px);
+                    fill: var(--omni-date-picker-control-icon-color,  var(--omni-primary-color));
+                    cursor: pointer;
+                }
 
-            /* Styles related to the picker container*/
-            .picker-container {
-                z-index: var(--omni-date-picker-container-z-index, 420);
-            }
+                .control-icon.error {
+                    fill: var(--omni-date-picker-control-icon-error-color, var(--omni-error-font-color));
+                }
 
-            /* Picker dialog mobile*/
-            @media screen and (max-width: 766px) {
-
-                .picker-dialog {
-                    position: fixed;
-                    top: inherit;
-                    width: 100%;
-                    margin: unset;
-                    border-style: none;
-                    padding: unset;
-                    left: var(--omni-date-picker-mobile-picker-dialog-left, 0px);
-                    right: var(--omni-date-picker-mobile-picker-dialog-right, 0px);
-                    bottom: var(--omni-date-picker-mobile-picker-dialog-bottom, 0px);
+                .left-border {
+                    width: var(--omni-date-picker-control-left-border-width, 1px);
+                    background-color: var(--omni-date-picker-control-left-border-color,var(--omni-form-border-color));
                 }
-                
-                .picker-dialog:modal{
-                    max-width: 100%;
-                    overflow: none;
+
+                .layout:focus-within > .left-border {
+                    width: var(--omni-date-picker-control-left-focused-border-width, 2px);
+                    background-color: var(--omni-date-picker-control-left-focused-color, var(--omni-primary-color));
                 }
 
-                .picker-dialog::backdrop {
-                    background: var(--omni-date-picker-mobile-picker-dialog-background-color, rgba(0, 0, 0, 0.1));
+                .left-border.error {
+                    background-color: var(--omni-date-picker-control-left-border-error-color, var(--omni-error-font-color));
                 }
-            }
 
-            /* Desktop and landscape tablet device styling, if element is at the bottom of the screen make items render above the input */
-            @media screen and (min-width: 767px) {
+                /* Styles related to the picker container*/
                 .picker-container {
-                    position: absolute;
-                    cursor: default;
-                    transition: 1s;
-                    width: var(--omni-date-picker-container-width, 100%);
-                    top: var(--omni-date-picker-container-top, 102%);
+                    z-index: var(--omni-date-picker-container-z-index, 420);
                 }
 
-               /* Styles if the element is at the bottom of the screen then render the picker on top of the element */
-               .picker-container.bottom {
-                   top: var(--omni-date-picker-container-render-bottom-top, -2%);
-                   transform: translateY(-100%);
-               }
-            }
+                /* Picker dialog mobile*/
+                @media screen and (max-width: 766px) {
+
+                    .picker-dialog {
+                        position: fixed;
+                        top: inherit;
+                        width: 100%;
+                        margin: unset;
+                        border-style: none;
+                        padding: unset;
+                        left: var(--omni-date-picker-mobile-picker-dialog-left, 0px);
+                        right: var(--omni-date-picker-mobile-picker-dialog-right, 0px);
+                        bottom: var(--omni-date-picker-mobile-picker-dialog-bottom, 0px);
+                    }
+                    
+                    .picker-dialog:modal{
+                        max-width: 100%;
+                        overflow: none;
+                    }
+
+                    .picker-dialog::backdrop {
+                        background: var(--omni-date-picker-mobile-picker-dialog-background-color, rgba(0, 0, 0, 0.1));
+                    }
+                }
+
+                /* Desktop and landscape tablet device styling, if element is at the bottom of the screen make items render above the input */
+                @media screen and (min-width: 767px) {
+                    .picker-container {
+                        position: absolute;
+                        cursor: default;
+                        transition: 1s;
+                        width: var(--omni-date-picker-container-width, 100%);
+                        top: var(--omni-date-picker-container-top, 102%);
+                    }
+
+                /* Styles if the element is at the bottom of the screen then render the picker on top of the element */
+                .picker-container.bottom {
+                    top: var(--omni-date-picker-container-render-bottom-top, -2%);
+                    transform: translateY(-100%);
+                }
+                }
         `
         ];
     }
diff --git a/src/email-field/EmailField.ts b/src/email-field/EmailField.ts
index 8084a7ab..594c1297 100644
--- a/src/email-field/EmailField.ts
+++ b/src/email-field/EmailField.ts
@@ -81,36 +81,36 @@ export class EmailField extends OmniFormElement {
         return [
             super.styles,
             css`
-        .field {
-          flex: 1 1 auto;
+                .field {
+                flex: 1 1 auto;
 
-          border: none;
-          background: none;
-          box-shadow: none;
-          outline: 0;
-          padding: 0;
-          margin: 0;
+                border: none;
+                background: none;
+                box-shadow: none;
+                outline: 0;
+                padding: 0;
+                margin: 0;
 
-          text-align: var(--omni-email-field-text-align, left);
+                text-align: var(--omni-email-field-text-align, left);
 
-          color: var(--omni-email-field-font-color, var(--omni-font-color));
-          font-family: var(--omni-email-field-font-family, var(--omni-font-family));
-          font-size: var(--omni-email-field-font-size, var(--omni-font-size));
-          font-weight: var(--omni-email-field-font-weight, var(--omni-font-weight));
-          padding: var(--omni-email-field-padding, 10px);
+                color: var(--omni-email-field-font-color, var(--omni-font-color));
+                font-family: var(--omni-email-field-font-family, var(--omni-font-family));
+                font-size: var(--omni-email-field-font-size, var(--omni-font-size));
+                font-weight: var(--omni-email-field-font-weight, var(--omni-font-weight));
+                padding: var(--omni-email-field-padding, 10px);
 
-          height: var(--omni-email-field-height, 100%);
-          width: var(--omni-email-field-width, 100%);
-        }
-        
-        .field.disabled {
-            color: var(--omni-email-field-disabled-font-color, #7C7C7C);
-        }
+                height: var(--omni-email-field-height, 100%);
+                width: var(--omni-email-field-width, 100%);
+                }
+                
+                .field.disabled {
+                    color: var(--omni-email-field-disabled-font-color, #7C7C7C);
+                }
 
-        .field.error {
-            color: var(--omni-email-field-error-font-color);
-        }   
-      `
+                .field.error {
+                    color: var(--omni-email-field-error-font-color, var(--omni-font-color));
+                }   
+            `
         ];
     }
 
diff --git a/src/number-field/NumberField.ts b/src/number-field/NumberField.ts
index 1cd4cb57..2b304f1e 100644
--- a/src/number-field/NumberField.ts
+++ b/src/number-field/NumberField.ts
@@ -92,48 +92,48 @@ export class NumberField extends OmniFormElement {
         return [
             super.styles,
             css`
-        .field {
-          flex: 1 1 auto;
-
-          border: none;
-          background: none;
-          box-shadow: none;
-          outline: 0;
-          padding: 0;
-          margin: 0;
-
-          text-align: var(--omni-number-field-text-align, left);
-
-          color: var(--omni-number-field-font-color, var(--omni-font-color));
-          font-family: var(--omni-number-field-font-family, var(--omni-font-family));
-          font-size: var(--omni-number-field-font-size, var(--omni-font-size));
-          font-weight: var(--omni-number-field-font-weight, var(--omni-font-weight));
-          padding: var(--omni-number-field-padding, 10px);
-
-          height: var(--omni-number-field-height, 100%);
-          width: var(--omni-number-field-width, 100%);
-        }
-
-        .field.disabled {
-            color: var(--omni-number-field-disabled-font-color, #7C7C7C);
-        }
-
-        .field.error {
-            color: var(--omni-number-field-error-font-color)
-        }
-
-        /* Used to not display default stepper */
-        input::-webkit-outer-spin-button,
-        input::-webkit-inner-spin-button {
-          /* display: none; <- Crashes Chrome on hover */
-          -webkit-appearance: none;
-          margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
-        }
-
-        input[type='number'] {
-          -moz-appearance: textfield; /* Firefox */
-        }
-      `
+                .field {
+                    flex: 1 1 auto;
+
+                    border: none;
+                    background: none;
+                    box-shadow: none;
+                    outline: 0;
+                    padding: 0;
+                    margin: 0;
+
+                    text-align: var(--omni-number-field-text-align, left);
+
+                    color: var(--omni-number-field-font-color, var(--omni-font-color));
+                    font-family: var(--omni-number-field-font-family, var(--omni-font-family));
+                    font-size: var(--omni-number-field-font-size, var(--omni-font-size));
+                    font-weight: var(--omni-number-field-font-weight, var(--omni-font-weight));
+                    padding: var(--omni-number-field-padding, 10px);
+
+                    height: var(--omni-number-field-height, 100%);
+                    width: var(--omni-number-field-width, 100%);
+                }
+
+                .field.disabled {
+                    color: var(--omni-number-field-disabled-font-color, #7C7C7C);
+                }
+
+                .field.error {
+                    color: var(--omni-number-field-error-font-color, var(--omni-font-color));
+                }
+
+                /* Used to not display default stepper */
+                input::-webkit-outer-spin-button,
+                input::-webkit-inner-spin-button {
+                /* display: none; <- Crashes Chrome on hover */
+                -webkit-appearance: none;
+                margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
+                }
+
+                input[type='number'] {
+                -moz-appearance: textfield; /* Firefox */
+                }
+            `
         ];
     }
 
diff --git a/src/password-field/PasswordField.ts b/src/password-field/PasswordField.ts
index 4da58828..98999d1a 100644
--- a/src/password-field/PasswordField.ts
+++ b/src/password-field/PasswordField.ts
@@ -119,67 +119,67 @@ export class PasswordField extends OmniFormElement {
         return [
             super.styles,
             css`
-        .control-box {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          cursor: pointer;
-
-          padding-right: var(--omni-password-field-control-padding-right, 10px);
-          padding-left: var(--omni-password-field-control-padding-left, 10px);
-          padding-top: var(--omni-password-field-control-padding-top, 0px);
-          padding-bottom: var(--omni-password-field-control-padding-bottom, 0px);
-        }
-
-        .hide-icon,
-        .show-icon {
-          fill: var(--omni-password-field-icon-color, var(--omni-primary-color));
-        }
-
-        .hide-icon,
-        .show-icon,
-        ::slotted([slot='show']),
-        ::slotted([slot='hide']) {
-          width: var(--omni-password-field-icon-width, 24px);
-          height: var(--omni-password-field-icon-height, 24px);
-        }
-
-        /* Prevent default icon from displaying in password field on Edge browser */
-        input::-ms-reveal,
-        input::-ms-clear {
-          display: none;
-        }
-
-        .field {
-          flex: 1 1 auto;
-
-          border: none;
-          background: none;
-          box-shadow: none;
-          outline: 0;
-          padding: 0;
-          margin: 0;
-
-          text-align: var(--omni-password-field-text-align, left);
-
-          color: var(--omni-password-field-font-color, var(--omni-font-color));
-          font-family: var(--omni-password-field-font-family, var(--omni-font-family));
-          font-size: var(--omni-password-field-font-size, var(--omni-font-size));
-          font-weight: var(--omni-password-field-font-weight, var(--omni-font-weight));
-          padding: var(--omni-password-field-padding, 10px);
-
-          height: var(--omni-password-field-height, 100%);
-          width: var(--omni-password-field-width, 100%);
-        }
-
-        .field.disabled {
-            color: var(--omni-password-field-disabled-font-color, #7C7C7C);
-        }
-
-        .field.error {
-            color: var(--omni-password-field-error-font-color);
-        }
-      `
+                .control-box {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    cursor: pointer;
+
+                    padding-right: var(--omni-password-field-control-padding-right, 10px);
+                    padding-left: var(--omni-password-field-control-padding-left, 10px);
+                    padding-top: var(--omni-password-field-control-padding-top, 0px);
+                    padding-bottom: var(--omni-password-field-control-padding-bottom, 0px);
+                }
+
+                .hide-icon,
+                .show-icon {
+                    fill: var(--omni-password-field-icon-color, var(--omni-primary-color));
+                }
+
+                .hide-icon,
+                .show-icon,
+                ::slotted([slot='show']),
+                ::slotted([slot='hide']) {
+                    width: var(--omni-password-field-icon-width, 24px);
+                    height: var(--omni-password-field-icon-height, 24px);
+                }
+
+                /* Prevent default icon from displaying in password field on Edge browser */
+                input::-ms-reveal,
+                input::-ms-clear {
+                    display: none;
+                }
+
+                .field {
+                    flex: 1 1 auto;
+
+                    border: none;
+                    background: none;
+                    box-shadow: none;
+                    outline: 0;
+                    padding: 0;
+                    margin: 0;
+
+                    text-align: var(--omni-password-field-text-align, left);
+
+                    color: var(--omni-password-field-font-color, var(--omni-font-color));
+                    font-family: var(--omni-password-field-font-family, var(--omni-font-family));
+                    font-size: var(--omni-password-field-font-size, var(--omni-font-size));
+                    font-weight: var(--omni-password-field-font-weight, var(--omni-font-weight));
+                    padding: var(--omni-password-field-padding, 10px);
+
+                    height: var(--omni-password-field-height, 100%);
+                    width: var(--omni-password-field-width, 100%);
+                }
+
+                .field.disabled {
+                    color: var(--omni-password-field-disabled-font-color, #7C7C7C);
+                }
+
+                .field.error {
+                    color: var(--omni-password-field-error-font-color, var(--omni-font-color));
+                }
+            `
         ];
     }
 
diff --git a/src/pin-field/PinField.ts b/src/pin-field/PinField.ts
index 14e2c26a..534ac705 100644
--- a/src/pin-field/PinField.ts
+++ b/src/pin-field/PinField.ts
@@ -194,80 +194,79 @@ export class PinField extends OmniFormElement {
         return [
             super.styles,
             css`
-        .control-box {
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          cursor: pointer;
-
-          padding-right: var(--omni-pin-field-control-padding-right, 10px);
-          padding-left: var(--omni-pin-field-control-padding-left, 10px);
-          padding-top: var(--omni-pin-field-control-padding-top, 0px);
-          padding-bottom: var(--omni-pin-field-control-padding-bottom, 0px);
-        }
-
-        .hide-icon,
-        .show-icon {
-          fill: var(--omni-pin-field-icon-color, var(--omni-primary-color));
-        }
-
-        .hide-icon,
-        .show-icon,
-        ::slotted([slot='show']),
-        ::slotted([slot='hide']) {
-          width: var(--omni-pin-field-icon-width, 24px);
-          height: var(--omni-pin-field-icon-height, 24px);
-        }
-
-        .field {
-          flex: 1 1 auto;
-
-          border: none;
-          background: none;
-          box-shadow: none;
-          outline: 0;
-          padding: 0;
-          margin: 0;
-
-          text-align: var(--omni-pin-field-text-align, left);
-
-          color: var(--omni-pin-field-font-color, var(--omni-font-color));
-          font-family: var(--omni-pin-field-font-family, var(--omni-font-family));
-          font-size: var(--omni-pin-field-font-size, var(--omni-font-size));
-          font-weight: var(--omni-pin-field-font-weight, var(--omni-font-weight));
-          padding: var(--omni-pin-field-padding, 10px);
-
-          height: var(--omni-pin-field-height, 100%);
-          width: var(--omni-pin-field-width, 100%);
-
-          -webkit-text-security:disc;
-      
-        }
-
-        .field.disabled {
-            color: var(--omni-pin-field-disabled-font-color, #7C7C7C);
-        }
-
-        .field.error {
-            color: var(--omni-pin-field-error-font-color);
-        }
-
-        .show {
-            -webkit-text-security:none;
-        }
-
-        /* Used to not display default stepper */
-        input::-webkit-outer-spin-button,
-        input::-webkit-inner-spin-button {
-          /* display: none; <- Crashes Chrome on hover */
-          -webkit-appearance: none;
-          margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
-        }   
-        
-        input[type='number'] {
-            -moz-appearance: textfield; /* Firefox */
-          }
-      `
+                .control-box {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    cursor: pointer;
+
+                    padding-right: var(--omni-pin-field-control-padding-right, 10px);
+                    padding-left: var(--omni-pin-field-control-padding-left, 10px);
+                    padding-top: var(--omni-pin-field-control-padding-top, 0px);
+                    padding-bottom: var(--omni-pin-field-control-padding-bottom, 0px);
+                }
+
+                .hide-icon,
+                .show-icon {
+                    fill: var(--omni-pin-field-icon-color, var(--omni-primary-color));
+                }
+
+                .hide-icon,
+                .show-icon,
+                ::slotted([slot='show']),
+                ::slotted([slot='hide']) {
+                    width: var(--omni-pin-field-icon-width, 24px);
+                    height: var(--omni-pin-field-icon-height, 24px);
+                }
+
+                .field {
+                    flex: 1 1 auto;
+
+                    border: none;
+                    background: none;
+                    box-shadow: none;
+                    outline: 0;
+                    padding: 0;
+                    margin: 0;
+
+                    text-align: var(--omni-pin-field-text-align, left);
+
+                    color: var(--omni-pin-field-font-color, var(--omni-font-color));
+                    font-family: var(--omni-pin-field-font-family, var(--omni-font-family));
+                    font-size: var(--omni-pin-field-font-size, var(--omni-font-size));
+                    font-weight: var(--omni-pin-field-font-weight, var(--omni-font-weight));
+                    padding: var(--omni-pin-field-padding, 10px);
+
+                    height: var(--omni-pin-field-height, 100%);
+                    width: var(--omni-pin-field-width, 100%);
+
+                    -webkit-text-security:disc;          
+                }
+
+                .field.disabled {
+                    color: var(--omni-pin-field-disabled-font-color, #7C7C7C);
+                }
+
+                .field.error {
+                    color: var(--omni-pin-field-error-font-color, var(--omni-font-color));
+                }
+
+                .show {
+                    -webkit-text-security:none;
+                }
+
+                /* Used to not display default stepper */
+                input::-webkit-outer-spin-button,
+                input::-webkit-inner-spin-button {
+                    /* display: none; <- Crashes Chrome on hover */
+                    -webkit-appearance: none;
+                    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
+                }   
+                
+                input[type='number'] {
+                    -moz-appearance: textfield; /* Firefox */
+                }
+            `
         ];
     }
 
diff --git a/src/search-field/SearchField.ts b/src/search-field/SearchField.ts
index 410ca48e..1ced6890 100644
--- a/src/search-field/SearchField.ts
+++ b/src/search-field/SearchField.ts
@@ -115,7 +115,7 @@ export class SearchField extends OmniFormElement {
                 }
 
                 .field.error {
-                    color: var(--omni-search-field-error-font-color);
+                    color: var(--omni-search-field-error-font-color, var(--omni-font-color));
                 }
 
                 .search-icon {
diff --git a/src/select/Select.ts b/src/select/Select.ts
index c4840433..ed5ebf06 100644
--- a/src/select/Select.ts
+++ b/src/select/Select.ts
@@ -406,7 +406,7 @@ export class Select extends OmniFormElement {
                 }
 
                 .field.error {
-                    color: var(--omni-select-field-error-font-color);
+                    color: var(--omni-select-field-error-font-color, var(--omni-font-color));
                 }
 
                 .control {
diff --git a/src/text-field/TextField.ts b/src/text-field/TextField.ts
index 64fbc1a9..6970fb39 100644
--- a/src/text-field/TextField.ts
+++ b/src/text-field/TextField.ts
@@ -74,35 +74,35 @@ export class TextField extends OmniFormElement {
         return [
             super.styles,
             css`
-        .field {
-          flex: 1 1 auto;
+                .field {
+                    flex: 1 1 auto;
 
-          border: none;
-          background: none;
-          box-shadow: none;
-          outline: 0;
-          padding: 0;
-          margin: 0;
+                    border: none;
+                    background: none;
+                    box-shadow: none;
+                    outline: 0;
+                    padding: 0;
+                    margin: 0;
 
-          text-align: var(--omni-text-field-text-align, left);
+                    text-align: var(--omni-text-field-text-align, left);
 
-          color: var(--omni-text-field-font-color, var(--omni-font-color));
-          font-family: var(--omni-text-field-font-family, var(--omni-font-family));
-          font-size: var(--omni-text-field-font-size, var(--omni-font-size));
-          font-weight: var(--omni-text-field-font-weight, var(--omni-font-weight));
-          padding: var(--omni-text-field-padding, 10px);
-          height: var(--omni-text-field-height, 100%);
-          width: var(--omni-text-field-width, 100%);
-        }
+                    color: var(--omni-text-field-font-color, var(--omni-font-color));
+                    font-family: var(--omni-text-field-font-family, var(--omni-font-family));
+                    font-size: var(--omni-text-field-font-size, var(--omni-font-size));
+                    font-weight: var(--omni-text-field-font-weight, var(--omni-font-weight));
+                    padding: var(--omni-text-field-padding, 10px);
+                    height: var(--omni-text-field-height, 100%);
+                    width: var(--omni-text-field-width, 100%);
+                }
 
-        .field.disabled {
-            color: var(--omni-text-field-disabled-font-color, #7C7C7C);
-        }
+                .field.disabled {
+                    color: var(--omni-text-field-disabled-font-color, #7C7C7C);
+                }
 
-        .field.error {
-            color: var(--omni-text-field-error-font-color);
-        }
-      `
+                .field.error {
+                    color: var(--omni-text-field-error-font-color, var(--omni-font-color));
+                }
+            `
         ];
     }