diff --git a/apps/ui/public/r/field.json b/apps/ui/public/r/field.json
index 11ec34b19..b94c302e5 100644
--- a/apps/ui/public/r/field.json
+++ b/apps/ui/public/r/field.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/ui/field.tsx",
-      "content": "\"use client\";\n\nimport { Field as FieldPrimitive } from \"@base-ui/react/field\";\n\nimport { cn } from \"@/registry/default/lib/utils\";\n\nfunction Field({ className, ...props }: FieldPrimitive.Root.Props) {\n  return (\n    <FieldPrimitive.Root\n      className={cn(\"flex flex-col items-start gap-2\", className)}\n      data-slot=\"field\"\n      {...props}\n    />\n  );\n}\n\nfunction FieldLabel({ className, ...props }: FieldPrimitive.Label.Props) {\n  return (\n    <FieldPrimitive.Label\n      className={cn(\n        \"inline-flex items-center gap-2 font-medium text-base/4.5 sm:text-sm/4\",\n        className,\n      )}\n      data-slot=\"field-label\"\n      {...props}\n    />\n  );\n}\n\nfunction FieldDescription({\n  className,\n  ...props\n}: FieldPrimitive.Description.Props) {\n  return (\n    <FieldPrimitive.Description\n      className={cn(\"text-muted-foreground text-xs\", className)}\n      data-slot=\"field-description\"\n      {...props}\n    />\n  );\n}\n\nfunction FieldError({ className, ...props }: FieldPrimitive.Error.Props) {\n  return (\n    <FieldPrimitive.Error\n      className={cn(\"text-destructive-foreground text-xs\", className)}\n      data-slot=\"field-error\"\n      {...props}\n    />\n  );\n}\n\nconst FieldControl = FieldPrimitive.Control;\nconst FieldValidity = FieldPrimitive.Validity;\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldControl,\n  FieldValidity,\n};\n",
+      "content": "\"use client\";\n\nimport { Field as FieldPrimitive } from \"@base-ui/react/field\";\n\nimport { cn } from \"@/registry/default/lib/utils\";\n\nfunction Field({ className, ...props }: FieldPrimitive.Root.Props) {\n  return (\n    <FieldPrimitive.Root\n      className={cn(\"flex flex-col items-start gap-2\", className)}\n      data-slot=\"field\"\n      {...props}\n    />\n  );\n}\n\nfunction FieldItem({ className, ...props }: FieldPrimitive.Item.Props) {\n  return (\n    <FieldPrimitive.Item\n      className={cn(\"inline-flex items-start gap-2\", className)}\n      data-slot=\"field-item\"\n      {...props}\n    />\n  );\n}\n\nfunction FieldLabel({ className, ...props }: FieldPrimitive.Label.Props) {\n  return (\n    <FieldPrimitive.Label\n      className={cn(\n        \"inline-flex items-center gap-2 font-medium text-base/4.5 sm:text-sm/4\",\n        className,\n      )}\n      data-slot=\"field-label\"\n      {...props}\n    />\n  );\n}\n\nfunction FieldDescription({\n  className,\n  ...props\n}: FieldPrimitive.Description.Props) {\n  return (\n    <FieldPrimitive.Description\n      className={cn(\"text-muted-foreground text-xs\", className)}\n      data-slot=\"field-description\"\n      {...props}\n    />\n  );\n}\n\nfunction FieldError({ className, ...props }: FieldPrimitive.Error.Props) {\n  return (\n    <FieldPrimitive.Error\n      className={cn(\"text-destructive-foreground text-xs\", className)}\n      data-slot=\"field-error\"\n      {...props}\n    />\n  );\n}\n\nconst FieldControl = FieldPrimitive.Control;\nconst FieldValidity = FieldPrimitive.Validity;\n\nexport {\n  Field,\n  FieldItem,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldControl,\n  FieldValidity,\n};\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/ui/public/r/p-checkbox-group-5.json b/apps/ui/public/r/p-checkbox-group-5.json
index 43a9fa666..f22811748 100644
--- a/apps/ui/public/r/p-checkbox-group-5.json
+++ b/apps/ui/public/r/p-checkbox-group-5.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/default/particles/p-checkbox-group-5.tsx",
-      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { CheckboxGroup } from \"@/registry/default/ui/checkbox-group\";\nimport { Field, FieldLabel } from \"@/registry/default/ui/field\";\nimport { Fieldset, FieldsetLegend } from \"@/registry/default/ui/fieldset\";\nimport { Form } from \"@/registry/default/ui/form\";\nimport { Label } from \"@/registry/default/ui/label\";\n\nexport default function Particle() {\n  const [loading, setLoading] = React.useState(false);\n  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n    const formData = new FormData(e.currentTarget);\n    setLoading(true);\n    await new Promise((r) => setTimeout(r, 800));\n    setLoading(false);\n    const frameworks = formData.getAll(\"frameworks\") as string[];\n    alert(`Selected: ${frameworks.join(\", \") || \"none\"}`);\n  };\n\n  return (\n    <Form className=\"max-w-[160px]\" onSubmit={onSubmit}>\n      <Field\n        className=\"gap-4\"\n        name=\"frameworks\"\n        render={(props) => <Fieldset {...props} />}\n      >\n        <Label className=\"font-normal\" render={<FieldsetLegend />}>\n          Frameworks\n        </Label>\n        <CheckboxGroup defaultValue={[\"next\"]} disabled={loading}>\n          <FieldLabel>\n            <Checkbox value=\"next\" />\n            Next.js\n          </FieldLabel>\n          <FieldLabel>\n            <Checkbox value=\"vite\" />\n            Vite\n          </FieldLabel>\n          <FieldLabel>\n            <Checkbox value=\"astro\" />\n            Astro\n          </FieldLabel>\n        </CheckboxGroup>\n      </Field>\n      <Button disabled={loading} type=\"submit\">\n        Submit\n      </Button>\n    </Form>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { CheckboxGroup } from \"@/registry/default/ui/checkbox-group\";\nimport {\n  Field,\n  FieldDescription,\n  FieldItem,\n  FieldLabel,\n} from \"@/registry/default/ui/field\";\nimport { Fieldset, FieldsetLegend } from \"@/registry/default/ui/fieldset\";\nimport { Form } from \"@/registry/default/ui/form\";\n\nexport default function Particle() {\n  const [loading, setLoading] = React.useState(false);\n  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n    const formData = new FormData(e.currentTarget);\n    setLoading(true);\n    await new Promise((r) => setTimeout(r, 800));\n    setLoading(false);\n    const frameworks = formData.getAll(\"frameworks\") as string[];\n    alert(`Selected: ${frameworks.join(\", \") || \"none\"}`);\n  };\n\n  return (\n    <Form className=\"max-w-xl\" onSubmit={onSubmit}>\n      <Field name=\"frameworks\">\n        <Fieldset\n          className=\"gap-4\"\n          render={<CheckboxGroup defaultValue={[\"next\"]} disabled={loading} />}\n        >\n          <FieldsetLegend className=\"font-medium text-sm\">\n            Frameworks\n          </FieldsetLegend>\n          <FieldItem>\n            <Checkbox value=\"next\" />\n            <div className=\"flex flex-col items-start gap-2\">\n              <FieldLabel>Next.js</FieldLabel>\n              <FieldDescription>\n                Next.js is a React framework for building web applications.\n              </FieldDescription>\n            </div>\n          </FieldItem>\n          <FieldItem>\n            <Checkbox value=\"vite\" />\n            <FieldLabel>Vite</FieldLabel>\n          </FieldItem>\n          <FieldItem>\n            <Checkbox value=\"astro\" />\n            <FieldLabel>Astro</FieldLabel>\n          </FieldItem>\n        </Fieldset>\n      </Field>\n      <Button disabled={loading} type=\"submit\">\n        Submit\n      </Button>\n    </Form>\n  );\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/ui/public/r/p-field-13.json b/apps/ui/public/r/p-field-13.json
index 18c63945a..f52dfcf11 100644
--- a/apps/ui/public/r/p-field-13.json
+++ b/apps/ui/public/r/p-field-13.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/default/particles/p-field-13.tsx",
-      "content": "\"use client\";\n\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { CheckboxGroup } from \"@/registry/default/ui/checkbox-group\";\nimport { Field, FieldLabel } from \"@/registry/default/ui/field\";\nimport { Fieldset, FieldsetLegend } from \"@/registry/default/ui/fieldset\";\n\nexport default function Particle() {\n  return (\n    <Fieldset className=\"gap-4\">\n      <FieldsetLegend className=\"font-medium text-sm\">\n        Frameworks\n      </FieldsetLegend>\n      <CheckboxGroup defaultValue={[\"react\"]}>\n        <Field name=\"frameworks\">\n          <FieldLabel>\n            <Checkbox value=\"react\" /> React\n          </FieldLabel>\n        </Field>\n        <Field name=\"frameworks\">\n          <FieldLabel>\n            <Checkbox value=\"vue\" /> Vue\n          </FieldLabel>\n        </Field>\n        <Field name=\"frameworks\">\n          <FieldLabel>\n            <Checkbox value=\"svelte\" /> Svelte\n          </FieldLabel>\n        </Field>\n      </CheckboxGroup>\n    </Fieldset>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport { Checkbox } from \"@/registry/default/ui/checkbox\";\nimport { CheckboxGroup } from \"@/registry/default/ui/checkbox-group\";\nimport { Field, FieldItem, FieldLabel } from \"@/registry/default/ui/field\";\nimport { Fieldset, FieldsetLegend } from \"@/registry/default/ui/fieldset\";\n\nexport default function Particle() {\n  return (\n    <Field name=\"frameworks\">\n      <Fieldset\n        className=\"gap-4\"\n        render={<CheckboxGroup defaultValue={[\"react\"]} />}\n      >\n        <FieldsetLegend className=\"font-medium text-sm\">\n          Frameworks\n        </FieldsetLegend>\n        <FieldItem>\n          <Checkbox value=\"react\" />\n          <FieldLabel>React</FieldLabel>\n        </FieldItem>\n        <FieldItem>\n          <Checkbox value=\"vue\" />\n          <FieldLabel>Vue</FieldLabel>\n        </FieldItem>\n        <FieldItem>\n          <Checkbox value=\"svelte\" />\n          <FieldLabel>Svelte</FieldLabel>\n        </FieldItem>\n      </Fieldset>\n    </Field>\n  );\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/ui/public/r/p-field-14.json b/apps/ui/public/r/p-field-14.json
index b044ae5e9..b933bba82 100644
--- a/apps/ui/public/r/p-field-14.json
+++ b/apps/ui/public/r/p-field-14.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/default/particles/p-field-14.tsx",
-      "content": "\"use client\";\n\nimport {\n  Field,\n  FieldDescription,\n  FieldLabel,\n} from \"@/registry/default/ui/field\";\nimport { Fieldset, FieldsetLegend } from \"@/registry/default/ui/fieldset\";\nimport { Radio, RadioGroup } from \"@/registry/default/ui/radio-group\";\n\nexport default function Particle() {\n  return (\n    <Field\n      className=\"gap-4\"\n      name=\"plan\"\n      render={(props) => <Fieldset {...props} />}\n    >\n      <FieldsetLegend className=\"font-medium text-sm\">\n        Choose Plan\n      </FieldsetLegend>\n      <RadioGroup defaultValue=\"free\">\n        <FieldLabel>\n          <Radio value=\"free\" /> Free\n        </FieldLabel>\n        <FieldLabel>\n          <Radio value=\"pro\" /> Pro\n        </FieldLabel>\n        <FieldLabel>\n          <Radio value=\"enterprise\" /> Enterprise\n        </FieldLabel>\n      </RadioGroup>\n      <FieldDescription>Select the plan that fits your needs.</FieldDescription>\n    </Field>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport {\n  Field,\n  FieldDescription,\n  FieldItem,\n  FieldLabel,\n} from \"@/registry/default/ui/field\";\nimport { Fieldset, FieldsetLegend } from \"@/registry/default/ui/fieldset\";\nimport { Radio, RadioGroup } from \"@/registry/default/ui/radio-group\";\n\nexport default function Particle() {\n  return (\n    <Field name=\"plan\">\n      <Fieldset className=\"gap-4\" render={<RadioGroup defaultValue=\"free\" />}>\n        <FieldsetLegend className=\"font-medium text-sm\">\n          Choose Plan\n        </FieldsetLegend>\n        <FieldItem>\n          <Radio value=\"free\" />\n          <FieldLabel>Free</FieldLabel>\n        </FieldItem>\n        <FieldItem>\n          <Radio value=\"pro\" />\n          <FieldLabel>Pro</FieldLabel>\n        </FieldItem>\n        <FieldItem>\n          <Radio value=\"enterprise\" />\n          <FieldLabel>Enterprise</FieldLabel>\n        </FieldItem>\n      </Fieldset>\n      <FieldDescription>Select the plan that fits your needs.</FieldDescription>\n    </Field>\n  );\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/ui/public/r/p-radio-group-5.json b/apps/ui/public/r/p-radio-group-5.json
index f3509a741..90963ae42 100644
--- a/apps/ui/public/r/p-radio-group-5.json
+++ b/apps/ui/public/r/p-radio-group-5.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/default/particles/p-radio-group-5.tsx",
-      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { Button } from \"@/registry/default/ui/button\";\nimport { Field, FieldLabel } from \"@/registry/default/ui/field\";\nimport { Fieldset, FieldsetLegend } from \"@/registry/default/ui/fieldset\";\nimport { Form } from \"@/registry/default/ui/form\";\nimport { Radio, RadioGroup } from \"@/registry/default/ui/radio-group\";\n\nexport default function Particle() {\n  const [loading, setLoading] = React.useState(false);\n\n  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n    const formData = new FormData(e.currentTarget);\n    setLoading(true);\n    await new Promise((r) => setTimeout(r, 800));\n    setLoading(false);\n    alert(`Selected: ${formData.get(\"frameworks\")}`);\n  };\n\n  return (\n    <Form className=\"max-w-[160px]\" onSubmit={onSubmit}>\n      <Field\n        className=\"gap-4\"\n        name=\"frameworks\"\n        render={(props) => <Fieldset {...props} />}\n      >\n        <FieldsetLegend className=\"font-medium text-sm\">\n          Frameworks\n        </FieldsetLegend>\n        <RadioGroup defaultValue=\"next\">\n          <FieldLabel>\n            <Radio disabled={loading} value=\"next\" /> Next.js\n          </FieldLabel>\n          <FieldLabel>\n            <Radio disabled={loading} value=\"vite\" /> Vite\n          </FieldLabel>\n          <FieldLabel>\n            <Radio disabled={loading} value=\"astro\" /> Astro\n          </FieldLabel>\n        </RadioGroup>\n      </Field>\n      <Button disabled={loading} type=\"submit\">\n        Submit\n      </Button>\n    </Form>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Field,\n  FieldDescription,\n  FieldItem,\n  FieldLabel,\n} from \"@/registry/default/ui/field\";\nimport { Fieldset, FieldsetLegend } from \"@/registry/default/ui/fieldset\";\nimport { Form } from \"@/registry/default/ui/form\";\nimport { Radio, RadioGroup } from \"@/registry/default/ui/radio-group\";\n\nexport default function Particle() {\n  const [loading, setLoading] = React.useState(false);\n\n  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {\n    e.preventDefault();\n    const formData = new FormData(e.currentTarget);\n    setLoading(true);\n    await new Promise((r) => setTimeout(r, 800));\n    setLoading(false);\n    alert(`Selected: ${formData.get(\"frameworks\")}`);\n  };\n\n  return (\n    <Form className=\"max-w-xl\" onSubmit={onSubmit}>\n      <Field name=\"frameworks\">\n        <Fieldset className=\"gap-4\" render={<RadioGroup defaultValue=\"next\" />}>\n          <FieldsetLegend className=\"font-medium text-sm\">\n            Frameworks\n          </FieldsetLegend>\n          <FieldItem>\n            <Radio disabled={loading} value=\"next\" />\n            <div className=\"flex flex-col items-start gap-2\">\n              <FieldLabel> Next.js</FieldLabel>\n              <FieldDescription>\n                Next.js is a React framework for building web applications.\n              </FieldDescription>\n            </div>\n          </FieldItem>\n          <FieldItem>\n            <Radio disabled={loading} value=\"vite\" />\n            <FieldLabel>Vite</FieldLabel>\n          </FieldItem>\n          <FieldItem>\n            <Radio disabled={loading} value=\"astro\" />\n            <FieldLabel>Astro</FieldLabel>\n          </FieldItem>\n        </Fieldset>\n      </Field>\n      <Button disabled={loading} type=\"submit\">\n        Submit\n      </Button>\n    </Form>\n  );\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/ui/registry/default/particles/p-checkbox-group-5.tsx b/apps/ui/registry/default/particles/p-checkbox-group-5.tsx
index 1784c63ad..0d02ed58e 100644
--- a/apps/ui/registry/default/particles/p-checkbox-group-5.tsx
+++ b/apps/ui/registry/default/particles/p-checkbox-group-5.tsx
@@ -5,10 +5,14 @@ import * as React from "react";
 import { Button } from "@/registry/default/ui/button";
 import { Checkbox } from "@/registry/default/ui/checkbox";
 import { CheckboxGroup } from "@/registry/default/ui/checkbox-group";
-import { Field, FieldLabel } from "@/registry/default/ui/field";
+import {
+  Field,
+  FieldDescription,
+  FieldItem,
+  FieldLabel,
+} from "@/registry/default/ui/field";
 import { Fieldset, FieldsetLegend } from "@/registry/default/ui/fieldset";
 import { Form } from "@/registry/default/ui/form";
-import { Label } from "@/registry/default/ui/label";
 
 export default function Particle() {
   const [loading, setLoading] = React.useState(false);
@@ -23,29 +27,33 @@ export default function Particle() {
   };
 
   return (
-    <Form className="max-w-[160px]" onSubmit={onSubmit}>
-      <Field
-        className="gap-4"
-        name="frameworks"
-        render={(props) => <Fieldset {...props} />}
-      >
-        <Label className="font-normal" render={<FieldsetLegend />}>
-          Frameworks
-        </Label>
-        <CheckboxGroup defaultValue={["next"]} disabled={loading}>
-          <FieldLabel>
+    <Form className="max-w-xl" onSubmit={onSubmit}>
+      <Field name="frameworks">
+        <Fieldset
+          className="gap-4"
+          render={<CheckboxGroup defaultValue={["next"]} disabled={loading} />}
+        >
+          <FieldsetLegend className="font-medium text-sm">
+            Frameworks
+          </FieldsetLegend>
+          <FieldItem>
             <Checkbox value="next" />
-            Next.js
-          </FieldLabel>
-          <FieldLabel>
+            <div className="flex flex-col items-start gap-2">
+              <FieldLabel>Next.js</FieldLabel>
+              <FieldDescription>
+                Next.js is a React framework for building web applications.
+              </FieldDescription>
+            </div>
+          </FieldItem>
+          <FieldItem>
             <Checkbox value="vite" />
-            Vite
-          </FieldLabel>
-          <FieldLabel>
+            <FieldLabel>Vite</FieldLabel>
+          </FieldItem>
+          <FieldItem>
             <Checkbox value="astro" />
-            Astro
-          </FieldLabel>
-        </CheckboxGroup>
+            <FieldLabel>Astro</FieldLabel>
+          </FieldItem>
+        </Fieldset>
       </Field>
       <Button disabled={loading} type="submit">
         Submit
diff --git a/apps/ui/registry/default/particles/p-field-13.tsx b/apps/ui/registry/default/particles/p-field-13.tsx
index 389dd782b..1842c2f3f 100644
--- a/apps/ui/registry/default/particles/p-field-13.tsx
+++ b/apps/ui/registry/default/particles/p-field-13.tsx
@@ -2,32 +2,32 @@
 
 import { Checkbox } from "@/registry/default/ui/checkbox";
 import { CheckboxGroup } from "@/registry/default/ui/checkbox-group";
-import { Field, FieldLabel } from "@/registry/default/ui/field";
+import { Field, FieldItem, FieldLabel } from "@/registry/default/ui/field";
 import { Fieldset, FieldsetLegend } from "@/registry/default/ui/fieldset";
 
 export default function Particle() {
   return (
-    <Fieldset className="gap-4">
-      <FieldsetLegend className="font-medium text-sm">
-        Frameworks
-      </FieldsetLegend>
-      <CheckboxGroup defaultValue={["react"]}>
-        <Field name="frameworks">
-          <FieldLabel>
-            <Checkbox value="react" /> React
-          </FieldLabel>
-        </Field>
-        <Field name="frameworks">
-          <FieldLabel>
-            <Checkbox value="vue" /> Vue
-          </FieldLabel>
-        </Field>
-        <Field name="frameworks">
-          <FieldLabel>
-            <Checkbox value="svelte" /> Svelte
-          </FieldLabel>
-        </Field>
-      </CheckboxGroup>
-    </Fieldset>
+    <Field name="frameworks">
+      <Fieldset
+        className="gap-4"
+        render={<CheckboxGroup defaultValue={["react"]} />}
+      >
+        <FieldsetLegend className="font-medium text-sm">
+          Frameworks
+        </FieldsetLegend>
+        <FieldItem>
+          <Checkbox value="react" />
+          <FieldLabel>React</FieldLabel>
+        </FieldItem>
+        <FieldItem>
+          <Checkbox value="vue" />
+          <FieldLabel>Vue</FieldLabel>
+        </FieldItem>
+        <FieldItem>
+          <Checkbox value="svelte" />
+          <FieldLabel>Svelte</FieldLabel>
+        </FieldItem>
+      </Fieldset>
+    </Field>
   );
 }
diff --git a/apps/ui/registry/default/particles/p-field-14.tsx b/apps/ui/registry/default/particles/p-field-14.tsx
index 6ce8e9697..49e027960 100644
--- a/apps/ui/registry/default/particles/p-field-14.tsx
+++ b/apps/ui/registry/default/particles/p-field-14.tsx
@@ -3,6 +3,7 @@
 import {
   Field,
   FieldDescription,
+  FieldItem,
   FieldLabel,
 } from "@/registry/default/ui/field";
 import { Fieldset, FieldsetLegend } from "@/registry/default/ui/fieldset";
@@ -10,25 +11,24 @@ import { Radio, RadioGroup } from "@/registry/default/ui/radio-group";
 
 export default function Particle() {
   return (
-    <Field
-      className="gap-4"
-      name="plan"
-      render={(props) => <Fieldset {...props} />}
-    >
-      <FieldsetLegend className="font-medium text-sm">
-        Choose Plan
-      </FieldsetLegend>
-      <RadioGroup defaultValue="free">
-        <FieldLabel>
-          <Radio value="free" /> Free
-        </FieldLabel>
-        <FieldLabel>
-          <Radio value="pro" /> Pro
-        </FieldLabel>
-        <FieldLabel>
-          <Radio value="enterprise" /> Enterprise
-        </FieldLabel>
-      </RadioGroup>
+    <Field name="plan">
+      <Fieldset className="gap-4" render={<RadioGroup defaultValue="free" />}>
+        <FieldsetLegend className="font-medium text-sm">
+          Choose Plan
+        </FieldsetLegend>
+        <FieldItem>
+          <Radio value="free" />
+          <FieldLabel>Free</FieldLabel>
+        </FieldItem>
+        <FieldItem>
+          <Radio value="pro" />
+          <FieldLabel>Pro</FieldLabel>
+        </FieldItem>
+        <FieldItem>
+          <Radio value="enterprise" />
+          <FieldLabel>Enterprise</FieldLabel>
+        </FieldItem>
+      </Fieldset>
       <FieldDescription>Select the plan that fits your needs.</FieldDescription>
     </Field>
   );
diff --git a/apps/ui/registry/default/particles/p-radio-group-5.tsx b/apps/ui/registry/default/particles/p-radio-group-5.tsx
index dfd919d92..5d365c4aa 100644
--- a/apps/ui/registry/default/particles/p-radio-group-5.tsx
+++ b/apps/ui/registry/default/particles/p-radio-group-5.tsx
@@ -3,7 +3,12 @@
 import * as React from "react";
 
 import { Button } from "@/registry/default/ui/button";
-import { Field, FieldLabel } from "@/registry/default/ui/field";
+import {
+  Field,
+  FieldDescription,
+  FieldItem,
+  FieldLabel,
+} from "@/registry/default/ui/field";
 import { Fieldset, FieldsetLegend } from "@/registry/default/ui/fieldset";
 import { Form } from "@/registry/default/ui/form";
 import { Radio, RadioGroup } from "@/registry/default/ui/radio-group";
@@ -21,26 +26,30 @@ export default function Particle() {
   };
 
   return (
-    <Form className="max-w-[160px]" onSubmit={onSubmit}>
-      <Field
-        className="gap-4"
-        name="frameworks"
-        render={(props) => <Fieldset {...props} />}
-      >
-        <FieldsetLegend className="font-medium text-sm">
-          Frameworks
-        </FieldsetLegend>
-        <RadioGroup defaultValue="next">
-          <FieldLabel>
-            <Radio disabled={loading} value="next" /> Next.js
-          </FieldLabel>
-          <FieldLabel>
-            <Radio disabled={loading} value="vite" /> Vite
-          </FieldLabel>
-          <FieldLabel>
-            <Radio disabled={loading} value="astro" /> Astro
-          </FieldLabel>
-        </RadioGroup>
+    <Form className="max-w-xl" onSubmit={onSubmit}>
+      <Field name="frameworks">
+        <Fieldset className="gap-4" render={<RadioGroup defaultValue="next" />}>
+          <FieldsetLegend className="font-medium text-sm">
+            Frameworks
+          </FieldsetLegend>
+          <FieldItem>
+            <Radio disabled={loading} value="next" />
+            <div className="flex flex-col items-start gap-2">
+              <FieldLabel> Next.js</FieldLabel>
+              <FieldDescription>
+                Next.js is a React framework for building web applications.
+              </FieldDescription>
+            </div>
+          </FieldItem>
+          <FieldItem>
+            <Radio disabled={loading} value="vite" />
+            <FieldLabel>Vite</FieldLabel>
+          </FieldItem>
+          <FieldItem>
+            <Radio disabled={loading} value="astro" />
+            <FieldLabel>Astro</FieldLabel>
+          </FieldItem>
+        </Fieldset>
       </Field>
       <Button disabled={loading} type="submit">
         Submit
diff --git a/apps/ui/registry/default/ui/field.tsx b/apps/ui/registry/default/ui/field.tsx
index 96ad5487b..f62ec521c 100644
--- a/apps/ui/registry/default/ui/field.tsx
+++ b/apps/ui/registry/default/ui/field.tsx
@@ -14,6 +14,16 @@ function Field({ className, ...props }: FieldPrimitive.Root.Props) {
   );
 }
 
+function FieldItem({ className, ...props }: FieldPrimitive.Item.Props) {
+  return (
+    <FieldPrimitive.Item
+      className={cn("inline-flex items-start gap-2", className)}
+      data-slot="field-item"
+      {...props}
+    />
+  );
+}
+
 function FieldLabel({ className, ...props }: FieldPrimitive.Label.Props) {
   return (
     <FieldPrimitive.Label
@@ -55,6 +65,7 @@ const FieldValidity = FieldPrimitive.Validity;
 
 export {
   Field,
+  FieldItem,
   FieldLabel,
   FieldDescription,
   FieldError,
diff --git a/packages/ui/src/components/field.tsx b/packages/ui/src/components/field.tsx
index d1840808d..96907cc07 100644
--- a/packages/ui/src/components/field.tsx
+++ b/packages/ui/src/components/field.tsx
@@ -14,6 +14,16 @@ function Field({ className, ...props }: FieldPrimitive.Root.Props) {
   );
 }
 
+function FieldItem({ className, ...props }: FieldPrimitive.Item.Props) {
+  return (
+    <FieldPrimitive.Item
+      className={cn("inline-flex items-start gap-2", className)}
+      data-slot="field-item"
+      {...props}
+    />
+  );
+}
+
 function FieldLabel({ className, ...props }: FieldPrimitive.Label.Props) {
   return (
     <FieldPrimitive.Label
@@ -55,6 +65,7 @@ const FieldValidity = FieldPrimitive.Validity;
 
 export {
   Field,
+  FieldItem,
   FieldLabel,
   FieldDescription,
   FieldError,