docs(react-form): fix invalid HTML markup in Form Composition (#1660)

Jaime02 · web-flow · commit c34eb6a7f48b · 2025-08-03T01:08:46.000-07:00
<div> can not be child of <label> The HTML <label> tag should not contain a <div>, so this change replaces the <div> with a <span> Source: https://caninclude.onrender.com/caninclude?child=div&parent=label
diff --git a/docs/framework/react/guides/form-composition.md b/docs/framework/react/guides/form-composition.md
@@ -57,7 +57,7 @@ export function TextField({ label }: { label: string }) {
   const field = useFieldContext<string>()
   return (
     <label>
-      <div>{label}</div>
+      <span>{label}</span>
       <input
         value={field.state.value}
         onChange={(e) => field.handleChange(e.target.value)}
@@ -504,7 +504,7 @@ export default function TextField({ label }: { label: string }) {
 
   return (
     <label>
-      <div>{label}</div>
+      <span>{label}</span>
       <input
         value={field.state.value}
         onChange={(e) => field.handleChange(e.target.value)}
@@ -560,7 +560,7 @@ function TextField({ label }: { label: string }) {
   const field = useFieldContext<string>()
   return (
     <label>
-      <div>{label}</div>
+      <span>{label}</span>
       <input
         value={field.state.value}
         onChange={(e) => field.handleChange(e.target.value)}
