docs(input): add controlled input examples for onChange and onValueChange

packages/kumo-docs-astro/src/components/demos/InputDemo.tsx

@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { Input } from "@cloudflare/kumo";
 
 export function InputBasicDemo() {
@@ -110,3 +111,31 @@ export function InputReactNodeLabelDemo() {
     />
   );
 }
+
+/** Controlled input using `onChange` (native React event). */
+export function InputControlledOnChangeDemo() {
+  const [value, setValue] = useState("");
+  return (
+    <Input
+      label="With onChange"
+      placeholder="Type something..."
+      description={value ? `Value: ${value}` : "Uses e.target.value"}
+      value={value}
+      onChange={(e) => setValue(e.target.value)}
+    />
+  );
+}
+
+/** Controlled input using `onValueChange` (Base UI convenience — gives you the string directly). */
+export function InputControlledOnValueChangeDemo() {
+  const [value, setValue] = useState("");
+  return (
+    <Input
+      label="With onValueChange"
+      placeholder="Type something..."
+      description={value ? `Value: ${value}` : "Receives the value directly"}
+      value={value}
+      onValueChange={(v) => setValue(v)}
+    />
+  );
+}

packages/kumo-docs-astro/src/pages/components/input.mdx

@@ -23,6 +23,8 @@ import {
   InputOptionalFieldDemo,
   InputLabelTooltipDemo,
   InputReactNodeLabelDemo,
+  InputControlledOnChangeDemo,
+  InputControlledOnValueChangeDemo,
 } from "~/components/demos/InputDemo";
 
 {/* Hero Demo */}
@@ -146,6 +148,25 @@ export default function Example() {
   <InputReactNodeLabelDemo client:visible />
 </ComponentExample>
 
+<Heading level={3}>Controlled with onChange</Heading>
+<p>
+  The standard React `onChange` handler receives the full event object. Use
+  `e.target.value` to get the value.
+</p>
+<ComponentExample demo="InputControlledOnChangeDemo">
+  <InputControlledOnChangeDemo client:load />
+</ComponentExample>
+
+<Heading level={3}>Controlled with onValueChange</Heading>
+<p>
+  `onValueChange` is a convenience handler from Base UI that gives you the
+  string value directly — no event unwrapping needed. This is the same pattern
+  used by `Select`, `Combobox`, and `Radio.Group`.
+</p>
+<ComponentExample demo="InputControlledOnValueChangeDemo">
+  <InputControlledOnValueChangeDemo client:load />
+</ComponentExample>
+
 <Heading level={3}>Bare Input (No Label)</Heading>
 <p>
   Input without `label` renders as a bare input. Must provide `aria-label` for