diff --git a/src/lib/elements/forms/inputCheckbox.svelte b/src/lib/elements/forms/inputCheckbox.svelte
index fcc884faa..44c373698 100644
--- a/src/lib/elements/forms/inputCheckbox.svelte
+++ b/src/lib/elements/forms/inputCheckbox.svelte
@@ -11,7 +11,11 @@
     export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
     export let showHelper = false;
 
+    let element: HTMLInputElement;
+
     const handleInvalid = (event: Event) => {
+        errorMessage = element.validationMessage;
+
         event.preventDefault();
         showHelper = true;
     };
@@ -26,6 +30,7 @@
     <div class="input-text-wrapper">
         <input
             on:invalid={handleInvalid}
+            bind:this={element}
             {id}
             {disabled}
             {required}
diff --git a/src/lib/elements/forms/inputEmail.svelte b/src/lib/elements/forms/inputEmail.svelte
index b935ecc76..1710d97df 100644
--- a/src/lib/elements/forms/inputEmail.svelte
+++ b/src/lib/elements/forms/inputEmail.svelte
@@ -11,7 +11,7 @@
     export let disabled = false;
     export let autofocus = false;
     export let autocomplete = false;
-    export let errorMessage = 'Your email should be formatted as: name@example.com';
+    export let errorMessage = 'An error occurred';
     export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
     export let showHelper = false;
 
@@ -24,6 +24,11 @@
     });
 
     const handleInvalid = (event: Event) => {
+        errorMessage = element.validationMessage;
+
+        if (element.validity.typeMismatch) {
+            errorMessage = 'Your email should be formatted as: name@example.com';
+        }
         event.preventDefault();
         showHelper = true;
     };
diff --git a/src/lib/elements/forms/inputNumber.svelte b/src/lib/elements/forms/inputNumber.svelte
index f6d3691b9..37d6ac0cd 100644
--- a/src/lib/elements/forms/inputNumber.svelte
+++ b/src/lib/elements/forms/inputNumber.svelte
@@ -25,6 +25,8 @@
     });
 
     const handleInvalid = (event: Event) => {
+        errorMessage = element.validationMessage;
+
         event.preventDefault();
         showHelper = true;
     };
diff --git a/src/lib/elements/forms/inputPassword.svelte b/src/lib/elements/forms/inputPassword.svelte
index 8bd134359..8553aebe1 100644
--- a/src/lib/elements/forms/inputPassword.svelte
+++ b/src/lib/elements/forms/inputPassword.svelte
@@ -27,6 +27,8 @@
     });
 
     const handleInvalid = (event: Event) => {
+        errorMessage = element.validationMessage;
+
         event.preventDefault();
         showHelper = true;
     };
diff --git a/src/lib/elements/forms/inputPhone.svelte b/src/lib/elements/forms/inputPhone.svelte
index dca033d6a..78c66d3e2 100644
--- a/src/lib/elements/forms/inputPhone.svelte
+++ b/src/lib/elements/forms/inputPhone.svelte
@@ -25,6 +25,8 @@
     });
 
     const handleInvalid = (event: Event) => {
+        errorMessage = element.validationMessage;
+
         event.preventDefault();
         showHelper = true;
     };
diff --git a/src/lib/elements/forms/inputRadio.svelte b/src/lib/elements/forms/inputRadio.svelte
index 54c174374..cf36a123a 100644
--- a/src/lib/elements/forms/inputRadio.svelte
+++ b/src/lib/elements/forms/inputRadio.svelte
@@ -13,7 +13,11 @@
     export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
     export let showHelper = false;
 
+    let element: HTMLInputElement;
+
     const handleInvalid = (event: Event) => {
+        errorMessage = element.validationMessage;
+
         event.preventDefault();
         showHelper = true;
     };
@@ -27,6 +31,7 @@
     <div class="input-text-wrapper">
         <input
             on:invalid={handleInvalid}
+            bind:this={element}
             {id}
             {name}
             {disabled}
diff --git a/src/lib/elements/forms/inputSelect.svelte b/src/lib/elements/forms/inputSelect.svelte
index 028c6342a..cd0113cf8 100644
--- a/src/lib/elements/forms/inputSelect.svelte
+++ b/src/lib/elements/forms/inputSelect.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { FormItem } from '.';
+    import { FormItem, Helper } from '.';
 
     export let label: string;
     export let showLabel = true;
@@ -11,12 +11,37 @@
         value: string;
         label: string;
     }[];
+    export let errorMessage = 'An error occurred';
+    export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
+    export let showHelper = false;
+
+    let element: HTMLSelectElement;
+
+    const handleInvalid = (event: Event) => {
+        errorMessage = element.validationMessage;
+
+        if (element.validity.typeMismatch) {
+            errorMessage = 'Your email should be formatted as: name@example.com';
+        }
+        event.preventDefault();
+        showHelper = true;
+    };
+
+    $: if (value) {
+        showHelper = false;
+    }
 </script>
 
 <FormItem>
     <label class:u-hide={!showLabel} class="label" for={id}>{label}</label>
     <div class="select">
-        <select bind:value {id} {required} {disabled}>
+        <select
+            on:invalid={handleInvalid}
+            bind:this={element}
+            bind:value
+            {id}
+            {required}
+            {disabled}>
             {#each options as option}
                 <option value={option.value} selected={option.value === value}>
                     {option.label}
@@ -25,4 +50,7 @@
         </select>
         <span class="icon-cheveron-down" aria-hidden="true" />
     </div>
+    {#if showHelper}
+        <Helper type={errorType}>{errorMessage}</Helper>
+    {/if}
 </FormItem>
diff --git a/src/lib/elements/forms/inputSwitch.svelte b/src/lib/elements/forms/inputSwitch.svelte
index aa181e333..14595503b 100644
--- a/src/lib/elements/forms/inputSwitch.svelte
+++ b/src/lib/elements/forms/inputSwitch.svelte
@@ -10,7 +10,11 @@
     export let errorType: false | 'success' | 'warning' | 'error' = 'warning';
     export let showHelper = false;
 
+    let element: HTMLInputElement;
+
     const handleInvalid = (event: Event) => {
+        errorMessage = element.validationMessage;
+
         event.preventDefault();
         showHelper = true;
     };
@@ -31,6 +35,7 @@
                 type="checkbox"
                 class="switch"
                 role="switch"
+                bind:this={element}
                 bind:checked={value}
                 on:change />
         </div>
diff --git a/src/lib/elements/forms/inputTags.svelte b/src/lib/elements/forms/inputTags.svelte
index bee1b47e6..43c90ce71 100644
--- a/src/lib/elements/forms/inputTags.svelte
+++ b/src/lib/elements/forms/inputTags.svelte
@@ -53,6 +53,8 @@
     };
 
     const handleInvalid = (event: Event) => {
+        errorMessage = element.validationMessage;
+
         event.preventDefault();
         showHelper = true;
     };
diff --git a/src/lib/elements/forms/inputText.svelte b/src/lib/elements/forms/inputText.svelte
index 826d02a92..b53058b03 100644
--- a/src/lib/elements/forms/inputText.svelte
+++ b/src/lib/elements/forms/inputText.svelte
@@ -25,6 +25,8 @@
     });
 
     const handleInvalid = (event: Event) => {
+        errorMessage = element.validationMessage;
+
         event.preventDefault();
         showHelper = true;
     };
diff --git a/src/lib/elements/forms/inputTextarea.svelte b/src/lib/elements/forms/inputTextarea.svelte
index 6d084346e..da0a15f81 100644
--- a/src/lib/elements/forms/inputTextarea.svelte
+++ b/src/lib/elements/forms/inputTextarea.svelte
@@ -24,6 +24,8 @@
     });
 
     const handleInvalid = (event: Event) => {
+        errorMessage = element.validationMessage;
+
         event.preventDefault();
         showHelper = true;
     };