diff --git a/docs/src/pages/components/NumberInput.svx b/docs/src/pages/components/NumberInput.svx
index 7c4c7317..930044d9 100644
--- a/docs/src/pages/components/NumberInput.svx
+++ b/docs/src/pages/components/NumberInput.svx
@@ -27,12 +27,14 @@ See [#no-value](#no-value) to allow for an empty value.
 
 <NumberInput value="{1}" helperText="Step of 0.1" step={0.1} label="Clusters" />
 
-## No value
+## No value and error states
 
-Set `allowEmpty` to `true` to allow for no value.
+Set `required` to `false` to allow for no value.
 
 Set `value` to `null` to denote "no value."
 
+Set `invalid` to `true` to set the input in `invalid` state.
+
 <FileSource src="/framed/NumberInput/NumberInputEmpty" />
 
 ## Hidden label
diff --git a/docs/src/pages/framed/NumberInput/NumberInputEmpty.svelte b/docs/src/pages/framed/NumberInput/NumberInputEmpty.svelte
index cc76a330..c33a801c 100644
--- a/docs/src/pages/framed/NumberInput/NumberInputEmpty.svelte
+++ b/docs/src/pages/framed/NumberInput/NumberInputEmpty.svelte
@@ -2,14 +2,22 @@
   import { NumberInput, Button } from "carbon-components-svelte";
 
   let value = null;
+  let invalid = false;
 </script>
 
-<NumberInput allowEmpty bind:value />
+<NumberInput required="{false}" bind:value="{value}" invalid="{invalid}" />
 
 <div style="margin: var(--cds-layout-01) 0">
   <Button on:click="{() => (value = null)}">Set to null</Button>
   <Button on:click="{() => (value = 0)}">Set to 0</Button>
+  <Button on:click="{() => (invalid = !invalid)}">Toggle invalid</Button>
 </div>
 
-<strong>Value:</strong>
-{value}
+<p>
+  <strong>Value:</strong>
+  {value}
+</p>
+<p>
+  <strong>Invalid:</strong>
+  {invalid}
+</p>
diff --git a/src/NumberInput/NumberInput.svelte b/src/NumberInput/NumberInput.svelte
index aa85d675..58454a93 100644
--- a/src/NumberInput/NumberInput.svelte
+++ b/src/NumberInput/NumberInput.svelte
@@ -55,7 +55,7 @@
   export let invalid = false;
 
   /** Specify the invalid state text */
-  export let invalidText = "";
+  export let invalidText = "Number is not valid";
 
   /** Set to `true` to indicate an warning state */
   export let warn = false;
@@ -101,7 +101,7 @@
 
   let error = false;
 
-  import { createEventDispatcher } from "svelte";
+  import { createEventDispatcher, onMount } from "svelte";
   import Add from "../icons/Add.svelte";
   import Subtract from "../icons/Subtract.svelte";
   import WarningFilled from "../icons/WarningFilled.svelte";
@@ -138,18 +138,27 @@
     return raw != "" ? Number(raw) : null;
   }
 
-  function onInput({ target }) {
-    value = parse(target.value);
-    error = !ref.checkValidity() || invalid;
+  function getValidity() {
+    return !ref.checkValidity() || invalid;
+  }
 
-    dispatch("input", value);
+  function onInput({ target }) {
+    error = getValidity();
+
+    dispatch("input", parse(target.value));
   }
 
   function onChange({ target }) {
-    error = !ref.checkValidity() || invalid;
+    error = getValidity();
 
     dispatch("change", parse(target.value));
   }
+
+  $: if (ref) ref.setCustomValidity(invalid ? invalidText : "");
+
+  onMount(() => {
+    error = getValidity();
+  });
 </script>
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
@@ -162,7 +171,7 @@
   on:mouseleave
 >
   <div
-    data-invalid="{error || undefined}"
+    data-invalid="{invalid || error ? true : undefined}"
     class:bx--number="{true}"
     class:bx--number--helpertext="{true}"
     class:bx--number--readonly="{readonly}"
@@ -258,7 +267,7 @@
         </div>
       {/if}
     </div>
-    {#if !error && !warn && helperText}
+    {#if !invalid && !error && !warn && helperText}
       <div
         class:bx--form__helper-text="{true}"
         class:bx--form__helper-text--disabled="{disabled}"