1. We should verify if the input is in an error state onMount and set the error accordingly.

2. Fix last commits and the `invalid` state border works again.
3. If the `invalid` state is set by the user, we must use `setCustomValidity` to set input validity to false.
4. `invalidText` must have a default and must not be empty. If empty, it will set the validity to true. I don't know if we should check for that.

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

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>
+<p>
-{value}
+  <strong>Value:</strong>
+  {value}
+</p>
+<p>
+  <strong>Invalid:</strong>
+  {invalid}
+</p>

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 }) {
+  function getValidity() {
-    value = parse(target.value);
+    return !ref.checkValidity() || invalid;
-    error = !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}"