From b67acb2db9b5402cb8a737cf719868229ba83d4a Mon Sep 17 00:00:00 2001
From: ayaan <ayaan.sung@shoplworks.com>
Date: Mon, 24 Aug 2026 14:01:11 +0900
Subject: [PATCH] docs(react): use JSX children instead of children prop

Align React overview docs and examples with JSX children style for
Field/Subscribe render props (fixes #2304).

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 docs/overview.md                              | 21 ++++++-----
 examples/react/compiler/src/index.tsx         | 17 ++++-----
 .../src/features/people/address-fields.tsx    | 35 ++++++++-----------
 .../src/features/people/emergency-contact.tsx | 12 +++----
 .../large-form/src/features/people/page.tsx   | 21 +++++------
 examples/react/query-integration/src/app.tsx  |  5 +--
 examples/react/simple/src/index.tsx           | 17 ++++-----
 examples/react/standard-schema/src/index.tsx  | 19 +++++-----
 8 files changed, 70 insertions(+), 77 deletions(-)

diff --git a/docs/overview.md b/docs/overview.md
index 4ec9e64172..39e00b9026 100644
--- a/docs/overview.md
+++ b/docs/overview.md
@@ -88,7 +88,8 @@ export default function App() {
                 triggerDebounceMs: 500,
               },
             ]}
-            children={(field) => {
+          >
+            {(field) => {
               // Avoid hasty abstractions. Render props are great!
               return (
                 <>
@@ -104,12 +105,11 @@ export default function App() {
                 </>
               )
             }}
-          />
+          </form.Field>
         </div>
         <div>
-          <form.Field
-            name="lastName"
-            children={(field) => (
+          <form.Field name="lastName">
+            {(field) => (
               <>
                 <label htmlFor={field.name}>Last Name:</label>
                 <input
@@ -122,11 +122,12 @@ export default function App() {
                 <FieldInfo field={field} />
               </>
             )}
-          />
+          </form.Field>
         </div>
         <form.Subscribe
           selector={(state) => [state.canSubmit, state.isSubmitting]}
-          children={([canSubmit, isSubmitting]) => (
+        >
+          {([canSubmit, isSubmitting]) => (
             <>
               <button type="submit" disabled={!canSubmit}>
                 {isSubmitting ? '...' : 'Submit'}
@@ -143,7 +144,7 @@ export default function App() {
               </button>
             </>
           )}
-        />
+        </form.Subscribe>
       </form>
     </div>
   )
@@ -424,9 +425,7 @@ function App() {
             )}
           </form.Field>
         </div>
-        <form.Subscribe
-          selector={(state) => [state.canSubmit, state.isSubmitting] as const}
-        >
+        <form.Subscribe selector={(state) => [state.canSubmit, state.isSubmitting] as const}>
           {(state) => (
             <>
               <button type="submit" disabled={!state()[0] || state()[1]}>
diff --git a/examples/react/compiler/src/index.tsx b/examples/react/compiler/src/index.tsx
index 97af96a277..c891059331 100644
--- a/examples/react/compiler/src/index.tsx
+++ b/examples/react/compiler/src/index.tsx
@@ -64,7 +64,8 @@ export default function App() {
                 triggerDebounceMs: 500,
               },
             ]}
-            children={(field) => {
+          >
+            {(field) => {
               // Avoid hasty abstractions. Render props are great!
               return (
                 <>
@@ -80,12 +81,11 @@ export default function App() {
                 </>
               )
             }}
-          />
+          </form.Field>
         </div>
         <div>
-          <form.Field
-            name="lastName"
-            children={(field) => (
+          <form.Field name="lastName">
+            {(field) => (
               <>
                 <label htmlFor={field.name}>Last Name:</label>
                 <input
@@ -98,11 +98,12 @@ export default function App() {
                 <FieldInfo field={field} />
               </>
             )}
-          />
+          </form.Field>
         </div>
         <form.Subscribe
           selector={(state) => [state.canSubmit, state.isSubmitting]}
-          children={([canSubmit, isSubmitting]) => (
+        >
+          {([canSubmit, isSubmitting]) => (
             <>
               <button type="submit" disabled={!canSubmit}>
                 {isSubmitting ? '...' : 'Submit'}
@@ -119,7 +120,7 @@ export default function App() {
               </button>
             </>
           )}
-        />
+        </form.Subscribe>
       </form>
     </div>
   )
diff --git a/examples/react/large-form/src/features/people/address-fields.tsx b/examples/react/large-form/src/features/people/address-fields.tsx
index 4d4a0c6866..3be1e4134f 100644
--- a/examples/react/large-form/src/features/people/address-fields.tsx
+++ b/examples/react/large-form/src/features/people/address-fields.tsx
@@ -9,26 +9,21 @@ export function AddressFields({ form }: AddressFieldsProps) {
   return (
     <div>
       <h2>Address</h2>
-      <form.Field
-        name="address.line1"
-        children={(field) => <field.TextField label="Address Line 1" />}
-      />
-      <form.Field
-        name="address.line2"
-        children={(field) => <field.TextField label="Address Line 2" />}
-      />
-      <form.Field
-        name="address.city"
-        children={(field) => <field.TextField label="City" />}
-      />
-      <form.Field
-        name="address.state"
-        children={(field) => <field.TextField label="State" />}
-      />
-      <form.Field
-        name="address.zip"
-        children={(field) => <field.TextField label="ZIP Code" />}
-      />
+      <form.Field name="address.line1">
+        {(field) => <field.TextField label="Address Line 1" />}
+      </form.Field>
+      <form.Field name="address.line2">
+        {(field) => <field.TextField label="Address Line 2" />}
+      </form.Field>
+      <form.Field name="address.city">
+        {(field) => <field.TextField label="City" />}
+      </form.Field>
+      <form.Field name="address.state">
+        {(field) => <field.TextField label="State" />}
+      </form.Field>
+      <form.Field name="address.zip">
+        {(field) => <field.TextField label="ZIP Code" />}
+      </form.Field>
     </div>
   )
 }
diff --git a/examples/react/large-form/src/features/people/emergency-contact.tsx b/examples/react/large-form/src/features/people/emergency-contact.tsx
index 4d110239f1..32754744ad 100644
--- a/examples/react/large-form/src/features/people/emergency-contact.tsx
+++ b/examples/react/large-form/src/features/people/emergency-contact.tsx
@@ -13,13 +13,13 @@ function EmergencyContactFields({
   return (
     <>
       <fields.Field
-        name="fullName"
-        children={(field) => <field.TextField label="Full Name" />}
-      />
+        name="fullName">
+        {(field) => <field.TextField label="Full Name" />}
+      </fields.Field>
       <fields.Field
-        name="phone"
-        children={(field) => <field.TextField label="Phone" />}
-      />
+        name="phone">
+        {(field) => <field.TextField label="Phone" />}
+      </fields.Field>
     </>
   )
 }
diff --git a/examples/react/large-form/src/features/people/page.tsx b/examples/react/large-form/src/features/people/page.tsx
index 3bf6e465ef..cfa28db97b 100644
--- a/examples/react/large-form/src/features/people/page.tsx
+++ b/examples/react/large-form/src/features/people/page.tsx
@@ -19,18 +19,15 @@ export const PeoplePage = () => {
       }}
     >
       <h1>Personal Information</h1>
-      <form.Field
-        name="fullName"
-        children={(field) => <field.TextField label="Full Name" />}
-      />
-      <form.Field
-        name="email"
-        children={(field) => <field.TextField label="Email" />}
-      />
-      <form.Field
-        name="phone"
-        children={(field) => <field.TextField label="Phone" />}
-      />
+      <form.Field name="fullName">
+        {(field) => <field.TextField label="Full Name" />}
+      </form.Field>
+      <form.Field name="email">
+        {(field) => <field.TextField label="Email" />}
+      </form.Field>
+      <form.Field name="phone">
+        {(field) => <field.TextField label="Phone" />}
+      </form.Field>
       <AddressFields form={form} />
       <h2>Emergency Contact</h2>
       <FieldGroupEmergencyContact
diff --git a/examples/react/query-integration/src/app.tsx b/examples/react/query-integration/src/app.tsx
index 1b293e0220..06cfbfa6f8 100644
--- a/examples/react/query-integration/src/app.tsx
+++ b/examples/react/query-integration/src/app.tsx
@@ -117,7 +117,8 @@ export function App() {
         </form.Field>
         <form.Subscribe
           selector={(state) => [state.canSubmit, state.isSubmitting]}
-          children={([canSubmit, isSubmitting]) => (
+        >
+          {([canSubmit, isSubmitting]) => (
             <>
               <button type="submit" disabled={!canSubmit}>
                 {isSubmitting ? '...' : 'Submit'}
@@ -127,7 +128,7 @@ export function App() {
               </button>
             </>
           )}
-        />
+        </form.Subscribe>
       </form>
     </div>
   )
diff --git a/examples/react/simple/src/index.tsx b/examples/react/simple/src/index.tsx
index f0b6d3d483..dec6bcd0c1 100644
--- a/examples/react/simple/src/index.tsx
+++ b/examples/react/simple/src/index.tsx
@@ -66,7 +66,8 @@ export default function App() {
                 triggerDebounceMs: 500,
               },
             ]}
-            children={(field) => {
+          >
+            {(field) => {
               // Avoid hasty abstractions. Render props are great!
               return (
                 <>
@@ -82,12 +83,11 @@ export default function App() {
                 </>
               )
             }}
-          />
+          </form.Field>
         </div>
         <div>
-          <form.Field
-            name="lastName"
-            children={(field) => (
+          <form.Field name="lastName">
+            {(field) => (
               <>
                 <label htmlFor={field.name}>Last Name:</label>
                 <input
@@ -100,11 +100,12 @@ export default function App() {
                 <FieldInfo field={field} />
               </>
             )}
-          />
+          </form.Field>
         </div>
         <form.Subscribe
           selector={(state) => [state.canSubmit, state.isSubmitting]}
-          children={([canSubmit, isSubmitting]) => (
+        >
+          {([canSubmit, isSubmitting]) => (
             <>
               <button type="submit" disabled={!canSubmit}>
                 {isSubmitting ? '...' : 'Submit'}
@@ -121,7 +122,7 @@ export default function App() {
               </button>
             </>
           )}
-        />
+        </form.Subscribe>
       </form>
     </div>
   )
diff --git a/examples/react/standard-schema/src/index.tsx b/examples/react/standard-schema/src/index.tsx
index a3eb8ce770..2f18bd6cfb 100644
--- a/examples/react/standard-schema/src/index.tsx
+++ b/examples/react/standard-schema/src/index.tsx
@@ -99,9 +99,8 @@ export default function App() {
       >
         <div>
           {/* A type-safe field component*/}
-          <form.Field
-            name="firstName"
-            children={(field) => {
+          <form.Field name="firstName">
+            {(field) => {
               // Avoid hasty abstractions. Render props are great!
               return (
                 <>
@@ -117,12 +116,11 @@ export default function App() {
                 </>
               )
             }}
-          />
+          </form.Field>
         </div>
         <div>
-          <form.Field
-            name="lastName"
-            children={(field) => (
+          <form.Field name="lastName">
+            {(field) => (
               <>
                 <label htmlFor={field.name}>Last Name:</label>
                 <input
@@ -135,16 +133,17 @@ export default function App() {
                 <FieldInfo field={field} />
               </>
             )}
-          />
+          </form.Field>
         </div>
         <form.Subscribe
           selector={(state) => [state.canSubmit, state.isSubmitting]}
-          children={([canSubmit, isSubmitting]) => (
+        >
+          {([canSubmit, isSubmitting]) => (
             <button type="submit" disabled={!canSubmit}>
               {isSubmitting ? '...' : 'Submit'}
             </button>
           )}
-        />
+        </form.Subscribe>
       </form>
     </div>
   )