Merge branch 'main' into use_field_configurations

Author: juanvilladev

docs/assets/react_form_composability.svg

@@ -30,3 +30,7 @@ Use schema libraries like zod, yup or valibot to define your schema with validat
 ## 6. [Side effects and listeners](https://youtu.be/A-w2IG7DAso)
 
 Similarly to field validators, you can attach events to field listeners and react to them, for example to reset a field when another one it depends on has changed. [Watch video (5:50)](https://youtu.be/A-w2IG7DAso)
+
+## 7. [Composable Fields for Large Forms](https://youtu.be/YJ3rW85fnKo)
+
+With the Composition APIs you can create reusable components, pre-bound and connected to a generic form context, heavily reducing repetitive code in all form instances across the app. This is especially useful for large forms with many fields. [Watch video (11:01)](https://youtu.be/YJ3rW85fnKo)

docs/framework/react/community/balastrong-tutorial.md

@@ -242,7 +242,7 @@ Example:
                         name={field().name}
                         value={field().state.value}
                         onBlur={field().handleBlur}
-                        onChange={(e) => field().handleChange(e.target.value)}
+                        onInput={(e) => field().handleChange(e.target.value)}
                       />
                       <button
                         type="button"
@@ -264,7 +264,7 @@ Example:
                           name={field().name}
                           value={field().state.value}
                           onBlur={field().handleBlur}
-                          onChange={(e) => field().handleChange(e.target.value)}
+                          onInput={(e) => field().handleChange(e.target.value)}
                         />
                       </div>
                     )

docs/framework/solid/guides/basic-concepts.md

@@ -31,7 +31,7 @@ Here is an example:
         name={field().name}
         value={field().state.value}
         type="number"
-        onChange={(e) => field().handleChange(e.target.valueAsNumber)}
+        onInput={(e) => field().handleChange(e.target.valueAsNumber)}
       />
       {field().state.meta.errors ? (
         <em role="alert">{field().state.meta.errors.join(', ')}</em>
@@ -61,8 +61,8 @@ In the example above, the validation is done at each keystroke (`onChange`). If,
         type="number"
         // Listen to the onBlur event on the field
         onBlur={field().handleBlur}
-        // We always need to implement onChange, so that TanStack Form receives the changes
-        onChange={(e) => field().handleChange(e.target.valueAsNumber)}
+        // We always need to implement onInput, so that TanStack Form receives the changes
+        onInput={(e) => field().handleChange(e.target.valueAsNumber)}
       />
       {field().state.meta.errors ? (
         <em role="alert">{field().state.meta.errors.join(', ')}</em>
@@ -93,8 +93,8 @@ So you can control when the validation is done by implementing the desired callb
         type="number"
         // Listen to the onBlur event on the field
         onBlur={field().handleBlur}
-        // We always need to implement onChange, so that TanStack Form receives the changes
-        onChange={(e) => field().handleChange(e.target.valueAsNumber)}
+        // We always need to implement onInput, so that TanStack Form receives the changes
+        onInput={(e) => field().handleChange(e.target.valueAsNumber)}
       />
       {field().state.meta.errors ? (
         <em role="alert">{field().state.meta.errors.join(', ')}</em>
@@ -242,7 +242,7 @@ To do this, we have dedicated `onChangeAsync`, `onBlurAsync`, and other methods
         name={field().name}
         value={field().state.value}
         type="number"
-        onChange={(e) => field().handleChange(e.target.valueAsNumber)}
+        onInput={(e) => field().handleChange(e.target.valueAsNumber)}
       />
       {field().state.meta.errors ? (
         <em role="alert">{field().state.meta.errors.join(', ')}</em>
@@ -274,7 +274,7 @@ Synchronous and Asynchronous validations can coexist. For example, it is possibl
         value={field().state.value}
         type="number"
         onBlur={field().handleBlur}
-        onChange={(e) => field().handleChange(e.target.valueAsNumber)}
+        onInput={(e) => field().handleChange(e.target.valueAsNumber)}
       />
       {field().state.meta.errors ? (
         <em role="alert">{field().state.meta.errors.join(', ')}</em>