diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index 8272c01d..f708aa4c 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -4167,27 +4167,26 @@ None.
 
 ### 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                     |
-| type        | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify the input type                        |
-| placeholder | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify the placeholder text                  |
-| light       | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to enable the light variant     |
-| disabled    | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to disable the input            |
-| helperText  | <code>let</code> | No       | <code>string</code>                       | <code>""</code>                                  | Specify the helper text                       |
-| 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        |
-| labelText   | <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 |
-| 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                |
-| required    | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to mark the field as required   |
-| inline      | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to use the inline variant       |
-| readonly    | <code>let</code> | No       | <code>boolean</code>                      | <code>false</code>                               | Set to `true` to use the read-only variant    |
+| 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 &#124; string</code> | <code>""</code>                                  | Specify the input value.<br /><br />`value` will be set to `null` if type="number"<br />and the value is empty. |
+| size        | <code>let</code> | No       | <code>"sm" &#124; "xl"</code>                 | <code>undefined</code>                           | Set the size of the input                                                                                       |
+| placeholder | <code>let</code> | No       | <code>string</code>                           | <code>""</code>                                  | Specify the placeholder text                                                                                    |
+| light       | <code>let</code> | No       | <code>boolean</code>                          | <code>false</code>                               | Set to `true` to enable the light variant                                                                       |
+| disabled    | <code>let</code> | No       | <code>boolean</code>                          | <code>false</code>                               | Set to `true` to disable the input                                                                              |
+| helperText  | <code>let</code> | No       | <code>string</code>                           | <code>""</code>                                  | Specify the helper text                                                                                         |
+| 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                                                                          |
+| labelText   | <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                                                                   |
+| 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                                                                                  |
+| required    | <code>let</code> | No       | <code>boolean</code>                          | <code>false</code>                               | Set to `true` to mark the field as required                                                                     |
+| inline      | <code>let</code> | No       | <code>boolean</code>                          | <code>false</code>                               | Set to `true` to use the inline variant                                                                         |
+| readonly    | <code>let</code> | No       | <code>boolean</code>                          | <code>false</code>                               | Set to `true` to use the read-only variant                                                                      |
 
 ### Slots
 
@@ -4197,18 +4196,18 @@ None.
 
 ### Events
 
-| Event name | Type      | Detail |
-| :--------- | :-------- | :----- |
-| click      | forwarded | --     |
-| mouseover  | forwarded | --     |
-| mouseenter | forwarded | --     |
-| mouseleave | forwarded | --     |
-| change     | forwarded | --     |
-| input      | forwarded | --     |
-| keydown    | forwarded | --     |
-| keyup      | forwarded | --     |
-| focus      | forwarded | --     |
-| blur       | forwarded | --     |
+| Event name | Type       | Detail                                        |
+| :--------- | :--------- | :-------------------------------------------- |
+| change     | dispatched | <code>null &#124; number &#124; string</code> |
+| input      | dispatched | <code>null &#124; number &#124; string</code> |
+| click      | forwarded  | --                                            |
+| mouseover  | forwarded  | --                                            |
+| mouseenter | forwarded  | --                                            |
+| mouseleave | forwarded  | --                                            |
+| keydown    | forwarded  | --                                            |
+| keyup      | forwarded  | --                                            |
+| focus      | forwarded  | --                                            |
+| blur       | forwarded  | --                                            |
 
 ## `TextInputSkeleton`
 
diff --git a/docs/src/COMPONENT_API.json b/docs/src/COMPONENT_API.json
index 8983f063..b816f45f 100644
--- a/docs/src/COMPONENT_API.json
+++ b/docs/src/COMPONENT_API.json
@@ -11571,25 +11571,14 @@
         {
           "name": "value",
           "kind": "let",
-          "description": "Specify the input value",
-          "type": "number | string",
+          "description": "Specify the input value.\n\n`value` will be set to `null` if type=\"number\"\nand the value is empty.",
+          "type": "null | number | string",
           "value": "\"\"",
           "isFunction": false,
           "isFunctionDeclaration": false,
           "constant": false,
           "reactive": true
         },
-        {
-          "name": "type",
-          "kind": "let",
-          "description": "Specify the input type",
-          "type": "string",
-          "value": "\"\"",
-          "isFunction": false,
-          "isFunctionDeclaration": false,
-          "constant": false,
-          "reactive": false
-        },
         {
           "name": "placeholder",
           "kind": "let",
@@ -11775,12 +11764,20 @@
         }
       ],
       "events": [
+        {
+          "type": "dispatched",
+          "name": "change",
+          "detail": "null | number | string"
+        },
+        {
+          "type": "dispatched",
+          "name": "input",
+          "detail": "null | number | string"
+        },
         { "type": "forwarded", "name": "click", "element": "div" },
         { "type": "forwarded", "name": "mouseover", "element": "div" },
         { "type": "forwarded", "name": "mouseenter", "element": "div" },
         { "type": "forwarded", "name": "mouseleave", "element": "div" },
-        { "type": "forwarded", "name": "change", "element": "input" },
-        { "type": "forwarded", "name": "input", "element": "input" },
         { "type": "forwarded", "name": "keydown", "element": "input" },
         { "type": "forwarded", "name": "keyup", "element": "input" },
         { "type": "forwarded", "name": "focus", "element": "input" },
diff --git a/src/TextInput/TextInput.svelte b/src/TextInput/TextInput.svelte
index b353b6b4..d3a95249 100644
--- a/src/TextInput/TextInput.svelte
+++ b/src/TextInput/TextInput.svelte
@@ -1,4 +1,9 @@
 <script>
+  /**
+   * @event {null | number | string} change
+   * @event {null | number | string} input
+   */
+
   /**
    * Set the size of the input
    * @type {"sm" | "xl"}
@@ -6,14 +11,14 @@
   export let size = undefined;
 
   /**
-   * Specify the input value
-   * @type {number | string}
+   * Specify the input value.
+   *
+   * `value` will be set to `null` if type="number"
+   * and the value is empty.
+   * @type {null | number | string}
    */
   export let value = "";
 
-  /** Specify the input type */
-  export let type = "";
-
   /** Specify the placeholder text */
   export let placeholder = "";
 
@@ -65,12 +70,29 @@
   /** Set to `true` to use the read-only variant */
   export let readonly = false;
 
-  import { getContext } from "svelte";
+  import { createEventDispatcher, getContext } from "svelte";
   import WarningFilled16 from "../icons/WarningFilled16.svelte";
   import WarningAltFilled16 from "../icons/WarningAltFilled16.svelte";
   import EditOff16 from "../icons/EditOff16.svelte";
 
   const ctx = getContext("Form");
+  const dispatch = createEventDispatcher();
+
+  function parse(raw) {
+    if ($$restProps.type !== "number") return raw;
+    return raw != "" ? Number(raw) : null;
+  }
+
+  /** @type {(e: Event) => void} */
+  const onInput = (e) => {
+    value = parse(e.target.value);
+    dispatch("input", value);
+  };
+
+  /** @type {(e: Event) => void} */
+  const onChange = (e) => {
+    dispatch("change", parse(e.target.value));
+  };
 
   $: isFluid = !!ctx && ctx.isFluid;
   $: errorId = `error-${id}`;
@@ -162,8 +184,7 @@
         id="{id}"
         name="{name}"
         placeholder="{placeholder}"
-        type="{type}"
-        value="{value ?? ''}"
+        bind:value
         required="{required}"
         readonly="{readonly}"
         class:bx--text-input="{true}"
@@ -172,11 +193,8 @@
         class:bx--text-input--warn="{warn}"
         {...$$restProps}
         class="{size && `bx--text-input--${size}`}"
-        on:change
-        on:input
-        on:input="{({ target }) => {
-          value = type === 'number' ? Number(target.value) : target.value;
-        }}"
+        on:change="{onChange}"
+        on:input="{onInput}"
         on:keydown
         on:keyup
         on:focus
diff --git a/tests/TextInput.test.svelte b/tests/TextInput.test.svelte
index 1900a82f..9489b8ad 100644
--- a/tests/TextInput.test.svelte
+++ b/tests/TextInput.test.svelte
@@ -1,8 +1,17 @@
 <script lang="ts">
   import { TextInput, TextInputSkeleton } from "../types";
+
+  let value = null;
 </script>
 
-<TextInput labelText="User name" placeholder="Enter user name..." />
+<TextInput
+  type="number"
+  labelText="User name"
+  placeholder="Enter user name..."
+  bind:value
+  on:input="{(e) => console.log(e.detail)}"
+  on:change="{(e) => (value = e.detail)}"
+/>
 
 <TextInput
   labelText="User name"
diff --git a/types/TextInput/TextInput.svelte.d.ts b/types/TextInput/TextInput.svelte.d.ts
index 511dab39..43020f0a 100644
--- a/types/TextInput/TextInput.svelte.d.ts
+++ b/types/TextInput/TextInput.svelte.d.ts
@@ -10,16 +10,13 @@ export interface TextInputProps
   size?: "sm" | "xl";
 
   /**
-   * Specify the input value
+   * Specify the input value.
+   *
+   * `value` will be set to `null` if type="number"
+   * and the value is empty.
    * @default ""
    */
-  value?: number | string;
-
-  /**
-   * Specify the input type
-   * @default ""
-   */
-  type?: string;
+  value?: null | number | string;
 
   /**
    * Specify the placeholder text
@@ -121,12 +118,12 @@ export interface TextInputProps
 export default class TextInput extends SvelteComponentTyped<
   TextInputProps,
   {
+    change: CustomEvent<null | number | string>;
+    input: CustomEvent<null | number | string>;
     click: WindowEventMap["click"];
     mouseover: WindowEventMap["mouseover"];
     mouseenter: WindowEventMap["mouseenter"];
     mouseleave: WindowEventMap["mouseleave"];
-    change: WindowEventMap["change"];
-    input: WindowEventMap["input"];
     keydown: WindowEventMap["keydown"];
     keyup: WindowEventMap["keyup"];
     focus: WindowEventMap["focus"];