diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index f43b78fa..b146b397 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -2560,32 +2560,32 @@ export type NumberInputTranslationId = "increment" | "decrement";
 
 ### Props
 
-| Prop name       | Kind               | Reactive | Type                                                            | Default value                                                    | Description                                     |
-| :-------------- | :----------------- | :------- | :-------------------------------------------------------------- | ---------------------------------------------------------------- | ----------------------------------------------- |
-| ref             | <code>let</code>   | Yes      | <code>null &#124; HTMLInputElement</code>                       | <code>null</code>                                                | Obtain a reference to the input HTML element    |
-| value           | <code>let</code>   | Yes      | <code>number &#124; string</code>                               | <code>""</code>                                                  | Specify the input value                         |
-| size            | <code>let</code>   | No       | <code>"sm" &#124; "xl"</code>                                   | <code>undefined</code>                                           | Set the size of the input                       |
-| step            | <code>let</code>   | No       | <code>number</code>                                             | <code>1</code>                                                   | Specify the step increment                      |
-| max             | <code>let</code>   | No       | <code>number</code>                                             | <code>undefined</code>                                           | Specify the maximum value                       |
-| min             | <code>let</code>   | No       | <code>number</code>                                             | <code>undefined</code>                                           | Specify the minimum value                       |
-| light           | <code>let</code>   | No       | <code>boolean</code>                                            | <code>false</code>                                               | Set to `true` to enable the light variant       |
-| readonly        | <code>let</code>   | No       | <code>boolean</code>                                            | <code>false</code>                                               | Set to `true` for the input to be read-only     |
-| mobile          | <code>let</code>   | No       | <code>boolean</code>                                            | <code>false</code>                                               | Set to `true` to enable the mobile variant      |
-| allowEmpty      | <code>let</code>   | No       | <code>boolean</code>                                            | <code>false</code>                                               | Set to `true` to allow for an empty value       |
-| disabled        | <code>let</code>   | No       | <code>boolean</code>                                            | <code>false</code>                                               | Set to `true` to disable the input              |
-| hideSteppers    | <code>let</code>   | No       | <code>boolean</code>                                            | <code>false</code>                                               | Set to `true` to hide the input stepper buttons |
-| iconDescription | <code>let</code>   | No       | <code>string</code>                                             | <code>""</code>                                                  | Specify the ARIA label for the increment icons  |
-| invalid         | <code>let</code>   | No       | <code>boolean</code>                                            | <code>false</code>                                               | Set to `true` to indicate an invalid state      |
-| invalidText     | <code>let</code>   | No       | <code>string</code>                                             | <code>""</code>                                                  | Specify the invalid state text                  |
-| warn            | <code>let</code>   | No       | <code>boolean</code>                                            | <code>false</code>                                               | Set to `true` to indicate an warning state      |
-| warnText        | <code>let</code>   | No       | <code>string</code>                                             | <code>""</code>                                                  | Specify the warning state text                  |
-| helperText      | <code>let</code>   | No       | <code>string</code>                                             | <code>""</code>                                                  | Specify the helper text                         |
-| label           | <code>let</code>   | No       | <code>string</code>                                             | <code>""</code>                                                  | Specify the label text                          |
-| hideLabel       | <code>let</code>   | No       | <code>boolean</code>                                            | <code>false</code>                                               | Set to `true` to visually hide the label text   |
-| translateWithId | <code>let</code>   | No       | <code>(id: NumberInputTranslationId) => string</code>           | <code>(id) => defaultTranslations[id]</code>                     | Override the default translation ids            |
-| translationIds  | <code>const</code> | No       | <code>{ increment: "increment"; decrement: "decrement" }</code> | <code>{ increment: "increment", decrement: "decrement", }</code> | Default translation ids                         |
-| id              | <code>let</code>   | No       | <code>string</code>                                             | <code>"ccs-" + Math.random().toString(36)</code>                 | Set an id for the input element                 |
-| name            | <code>let</code>   | No       | <code>string</code>                                             | <code>undefined</code>                                           | Specify a name attribute for the input          |
+| Prop name       | Kind               | Reactive | Type                                                            | Default value                                                    | Description                                                   |
+| :-------------- | :----------------- | :------- | :-------------------------------------------------------------- | ---------------------------------------------------------------- | ------------------------------------------------------------- |
+| ref             | <code>let</code>   | Yes      | <code>null &#124; HTMLInputElement</code>                       | <code>null</code>                                                | Obtain a reference to the input HTML element                  |
+| value           | <code>let</code>   | Yes      | <code>null &#124; number</code>                                 | <code>null</code>                                                | Specify the input value.<br />Use `null` to denote "no value" |
+| size            | <code>let</code>   | No       | <code>"sm" &#124; "xl"</code>                                   | <code>undefined</code>                                           | Set the size of the input                                     |
+| step            | <code>let</code>   | No       | <code>number</code>                                             | <code>1</code>                                                   | Specify the step increment                                    |
+| max             | <code>let</code>   | No       | <code>number</code>                                             | <code>undefined</code>                                           | Specify the maximum value                                     |
+| min             | <code>let</code>   | No       | <code>number</code>                                             | <code>undefined</code>                                           | Specify the minimum value                                     |
+| light           | <code>let</code>   | No       | <code>boolean</code>                                            | <code>false</code>                                               | Set to `true` to enable the light variant                     |
+| readonly        | <code>let</code>   | No       | <code>boolean</code>                                            | <code>false</code>                                               | Set to `true` for the input to be read-only                   |
+| mobile          | <code>let</code>   | No       | <code>boolean</code>                                            | <code>false</code>                                               | Set to `true` to enable the mobile variant                    |
+| allowEmpty      | <code>let</code>   | No       | <code>boolean</code>                                            | <code>false</code>                                               | Set to `true` to allow for an empty value                     |
+| disabled        | <code>let</code>   | No       | <code>boolean</code>                                            | <code>false</code>                                               | Set to `true` to disable the input                            |
+| hideSteppers    | <code>let</code>   | No       | <code>boolean</code>                                            | <code>false</code>                                               | Set to `true` to hide the input stepper buttons               |
+| iconDescription | <code>let</code>   | No       | <code>string</code>                                             | <code>""</code>                                                  | Specify the ARIA label for the increment icons                |
+| invalid         | <code>let</code>   | No       | <code>boolean</code>                                            | <code>false</code>                                               | Set to `true` to indicate an invalid state                    |
+| invalidText     | <code>let</code>   | No       | <code>string</code>                                             | <code>""</code>                                                  | Specify the invalid state text                                |
+| warn            | <code>let</code>   | No       | <code>boolean</code>                                            | <code>false</code>                                               | Set to `true` to indicate an warning state                    |
+| warnText        | <code>let</code>   | No       | <code>string</code>                                             | <code>""</code>                                                  | Specify the warning state text                                |
+| helperText      | <code>let</code>   | No       | <code>string</code>                                             | <code>""</code>                                                  | Specify the helper text                                       |
+| label           | <code>let</code>   | No       | <code>string</code>                                             | <code>""</code>                                                  | Specify the label text                                        |
+| hideLabel       | <code>let</code>   | No       | <code>boolean</code>                                            | <code>false</code>                                               | Set to `true` to visually hide the label text                 |
+| translateWithId | <code>let</code>   | No       | <code>(id: NumberInputTranslationId) => string</code>           | <code>(id) => defaultTranslations[id]</code>                     | Override the default translation ids                          |
+| translationIds  | <code>const</code> | No       | <code>{ increment: "increment"; decrement: "decrement" }</code> | <code>{ increment: "increment", decrement: "decrement", }</code> | Default translation ids                                       |
+| id              | <code>let</code>   | No       | <code>string</code>                                             | <code>"ccs-" + Math.random().toString(36)</code>                 | Set an id for the input element                               |
+| name            | <code>let</code>   | No       | <code>string</code>                                             | <code>undefined</code>                                           | Specify a name attribute for the input                        |
 
 ### Slots
 
@@ -2595,16 +2595,16 @@ export type NumberInputTranslationId = "increment" | "decrement";
 
 ### Events
 
-| Event name | Type       | Detail              |
-| :--------- | :--------- | :------------------ |
-| change     | dispatched | <code>number</code> |
-| click      | forwarded  | --                  |
-| mouseover  | forwarded  | --                  |
-| mouseenter | forwarded  | --                  |
-| mouseleave | forwarded  | --                  |
-| input      | forwarded  | --                  |
-| focus      | forwarded  | --                  |
-| blur       | forwarded  | --                  |
+| Event name | Type       | Detail                          |
+| :--------- | :--------- | :------------------------------ |
+| change     | dispatched | <code>null &#124; number</code> |
+| click      | forwarded  | --                              |
+| mouseover  | forwarded  | --                              |
+| mouseenter | forwarded  | --                              |
+| mouseleave | forwarded  | --                              |
+| input      | forwarded  | --                              |
+| focus      | forwarded  | --                              |
+| blur       | forwarded  | --                              |
 
 ## `NumberInputSkeleton`
 
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 9baede23..78c211f6 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -6969,9 +6969,9 @@
         {
           "name": "value",
           "kind": "let",
-          "description": "Specify the input value",
-          "type": "number | string",
-          "value": "\"\"",
+          "description": "Specify the input value.\nUse `null` to denote \"no value\"",
+          "type": "null | number",
+          "value": "null",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "constant": false,
@@ -7226,7 +7226,7 @@
         }
       ],
       "events": [
-        { "type": "dispatched", "name": "change", "detail": "number" },
+        { "type": "dispatched", "name": "change", "detail": "null | number" },
         { "type": "forwarded", "name": "click", "element": "div" },
         { "type": "forwarded", "name": "mouseover", "element": "div" },
         { "type": "forwarded", "name": "mouseenter", "element": "div" },
diff --git a/src/NumberInput/NumberInput.svelte b/src/NumberInput/NumberInput.svelte
index d620cc40..210fb7a6 100644
--- a/src/NumberInput/NumberInput.svelte
+++ b/src/NumberInput/NumberInput.svelte
@@ -1,7 +1,7 @@
 <script>
   /**
    * @typedef {"increment" | "decrement"} NumberInputTranslationId
-   * @event {number} change
+   * @event {null | number} change
    */
 
   /**
@@ -11,10 +11,11 @@
   export let size = undefined;
 
   /**
-   * Specify the input value
-   * @type {number | string}
+   * Specify the input value.
+   * Use `null` to denote "no value"
+   * @type {null | number}
    */
-  export let value = "";
+  export let value = null;
 
   /** Specify the step increment */
   export let step = 1;
@@ -131,17 +132,12 @@
 
   let inputValue = value;
 
-  const normalizeValue = (_value) => {
-    if (_value === undefined || _value === "") return _value;
-    return Number(_value);
-  };
-
   $: dispatch("change", value);
   $: incrementLabel = translateWithId("increment");
   $: decrementLabel = translateWithId("decrement");
-  $: value = normalizeValue(inputValue);
+  $: value = inputValue ? Number(inputValue) : null;
   $: error =
-    invalid || (!allowEmpty && value === "") || value > max || value < min;
+    invalid || (!allowEmpty && value == null) || value > max || value < min;
   $: errorId = `error-${id}`;
   $: ariaLabel =
     $$props["aria-label"] ||
@@ -208,7 +204,7 @@
           max="{max}"
           min="{min}"
           step="{step}"
-          value="{value}"
+          value="{value ?? ''}"
           readonly="{readonly}"
           {...$$restProps}
           on:input
@@ -263,7 +259,7 @@
           max="{max}"
           min="{min}"
           step="{step}"
-          value="{value}"
+          value="{value ?? ''}"
           readonly="{readonly}"
           {...$$restProps}
           on:input
diff --git a/tests/NumberInput.test.svelte b/tests/NumberInput.test.svelte
index 61a2a589..62ee4251 100644
--- a/tests/NumberInput.test.svelte
+++ b/tests/NumberInput.test.svelte
@@ -1,11 +1,14 @@
 <script lang="ts">
   import { NumberInput, NumberInputSkeleton } from "../types";
+  import type { NumberInputProps } from "../types/NumberInput/NumberInput.svelte";
+
+  let value: NumberInputProps["value"] = null;
 </script>
 
 <NumberInput
   label="Clusters"
   on:change="{(e) => {
-    console.log(e.detail); // number
+    console.log(e.detail); // null | number
   }}"
 />
 
diff --git a/types/NumberInput/NumberInput.svelte.d.ts b/types/NumberInput/NumberInput.svelte.d.ts
index 5e63cfda..879b3bb1 100644
--- a/types/NumberInput/NumberInput.svelte.d.ts
+++ b/types/NumberInput/NumberInput.svelte.d.ts
@@ -12,10 +12,11 @@ export interface NumberInputProps
   size?: "sm" | "xl";
 
   /**
-   * Specify the input value
-   * @default ""
+   * Specify the input value.
+   * Use `null` to denote "no value"
+   * @default null
    */
-  value?: number | string;
+  value?: null | number;
 
   /**
    * Specify the step increment
@@ -147,7 +148,7 @@ export interface NumberInputProps
 export default class NumberInput extends SvelteComponentTyped<
   NumberInputProps,
   {
-    change: CustomEvent<number>;
+    change: CustomEvent<null | number>;
     click: WindowEventMap["click"];
     mouseover: WindowEventMap["mouseover"];
     mouseenter: WindowEventMap["mouseenter"];