Bindable TextInput value

.changeset/heavy-years-attack.md

@@ -0,0 +1,5 @@
+---
+"@stackoverflow/stacks-svelte": minor
+---
+
+Made TextInputs value prop bindable

packages/stacks-svelte/src/components/TextInput/TextInput.stories.svelte

@@ -53,6 +53,8 @@
             },
         },
     });
+
+    let bindableValue = $state("Change me");
 </script>
 
 <Story name="Base" args={{ id: "base-example-input", label: "Username" }} />
@@ -211,3 +213,19 @@
         </div>
     </div>
 </Story>
+
+<Story name="Bindable Value" asChild>
+    <div class="d-grid g16">
+        <div class="d-flex fd-column">
+            <TextInput
+                id="binding-input"
+                label="Bindable input"
+                bind:value={bindableValue}
+            />
+            <p class="mt24">
+                <span class="fw-bold">Bound value:</span>
+                {bindableValue}
+            </p>
+        </div>
+    </div>
+</Story>

packages/stacks-svelte/src/components/TextInput/TextInput.svelte

@@ -130,6 +130,11 @@
          * Optional message snippet rendered after the input.
          */
         message?: Snippet;
+
+        /**
+         * value of the text input.
+         */
+        value?: string;
     }
 
     let {
@@ -150,6 +155,7 @@
         description,
         fill,
         message,
+        value = $bindable(undefined),
         ...rest
     }: Props = $props();
 
@@ -240,6 +246,7 @@
                 {placeholder}
                 {readonly}
                 {required}
+                bind:value
                 {...rest}
             />
 

packages/stacks-svelte/src/components/TextInput/TextInput.test.ts

@@ -3,6 +3,7 @@ import { expect } from "@open-wc/testing";
 import { render, screen } from "@testing-library/svelte";
 import userEvent from "@testing-library/user-event";
 import sinon from "sinon";
+import { createRawComponent } from "../../../test-utils";
 
 import TextInput from "./TextInput.svelte";
 
@@ -173,6 +174,39 @@ describe("TextInput", () => {
         );
     });
 
+    it("should render with an initial value", async () => {
+        render(TextInput, {
+            id: "example-input",
+            label: "example label",
+            value: "initial",
+        });
+        expect(screen.getByRole("textbox")).to.have.value("initial");
+    });
+
+    it("should support bind:value", async () => {
+        const component = await createRawComponent(`
+            <script>
+                import TextInput from "$root/components/TextInput/TextInput.svelte";
+                let value = $state("initial");
+            </script>
+            <TextInput id="bind-test" label="bindable input" bind:value />
+            <div data-testid="output">{value}</div>
+        `);
+
+        render(component);
+
+        const input = screen.getByRole("textbox");
+        const output = screen.getByTestId("output");
+
+        expect(input).to.have.value("initial");
+        expect(output).to.have.text("initial");
+
+        await user.type(input, " (edited)");
+
+        expect(input).to.have.value("initial (edited)");
+        expect(output).to.have.text("initial (edited)");
+    });
+
     // slots
     it("should render the description slot", () => {
         render(TextInput, {