From 7095a8686b9e08092d6c196aa253b6c8042025c5 Mon Sep 17 00:00:00 2001
From: pasqualevitiello <pasqualevitiello@gmail.com>
Date: Wed, 14 Oct 2026 21:05:20 +0200
Subject: [PATCH 1/2] fix(ui): correct particle input semantics and constraints

---
 .../registry/default/particles/p-dialog-4.tsx |  1 +
 .../registry/default/particles/p-field-10.tsx |  2 +-
 .../default/particles/p-input-group-22.tsx    |  9 +++-
 .../default/particles/p-input-group-29.tsx    |  6 +--
 .../default/particles/p-otp-field-1.tsx       | 31 ++++++++-----
 .../default/particles/p-otp-field-2.tsx       | 31 ++++++++-----
 .../default/particles/p-otp-field-3.tsx       | 45 ++++++++++++-------
 .../default/particles/p-otp-field-7.tsx       |  2 +-
 .../default/particles/p-textarea-10.tsx       |  1 +
 .../coss/references/primitives/otp-field.md   | 11 +++--
 10 files changed, 90 insertions(+), 49 deletions(-)

diff --git a/apps/ui/registry/default/particles/p-dialog-4.tsx b/apps/ui/registry/default/particles/p-dialog-4.tsx
index 059ccaa4a..7c30e5b2c 100644
--- a/apps/ui/registry/default/particles/p-dialog-4.tsx
+++ b/apps/ui/registry/default/particles/p-dialog-4.tsx
@@ -61,6 +61,7 @@ export default function Particle() {
           <DialogPanel>
             <Field>
               <Textarea
+                aria-label="Message"
                 onChange={(e) => setValue(e.target.value)}
                 value={value}
               />
diff --git a/apps/ui/registry/default/particles/p-field-10.tsx b/apps/ui/registry/default/particles/p-field-10.tsx
index 5fe4949ff..6c7eec9a9 100644
--- a/apps/ui/registry/default/particles/p-field-10.tsx
+++ b/apps/ui/registry/default/particles/p-field-10.tsx
@@ -11,7 +11,7 @@ export default function Particle() {
   return (
     <Field>
       <FieldLabel>Bio</FieldLabel>
-      <Textarea placeholder="Tell us about yourself…" />
+      <Textarea maxLength={500} placeholder="Tell us about yourself…" />
       <FieldDescription>
         Write a short bio. Maximum 500 characters.
       </FieldDescription>
diff --git a/apps/ui/registry/default/particles/p-input-group-22.tsx b/apps/ui/registry/default/particles/p-input-group-22.tsx
index 4a533eada..95760893c 100644
--- a/apps/ui/registry/default/particles/p-input-group-22.tsx
+++ b/apps/ui/registry/default/particles/p-input-group-22.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { XIcon } from "lucide-react";
-import { useState } from "react";
+import { useRef, useState } from "react";
 import { Button } from "@/registry/default/ui/button";
 import {
   InputGroup,
@@ -10,6 +10,7 @@ import {
 } from "@/registry/default/ui/input-group";
 
 export default function Particle() {
+  const inputRef = useRef<HTMLInputElement>(null);
   const [value, setValue] = useState("Clear me");
 
   return (
@@ -18,6 +19,7 @@ export default function Particle() {
         aria-label="Text input with clear button"
         onChange={(e) => setValue(e.target.value)}
         placeholder="Enter text"
+        ref={inputRef}
         type="text"
         value={value}
       />
@@ -25,7 +27,10 @@ export default function Particle() {
         <InputGroupAddon align="inline-end">
           <Button
             aria-label="Clear input"
-            onClick={() => setValue("")}
+            onClick={() => {
+              setValue("");
+              inputRef.current?.focus();
+            }}
             size="icon-xs"
             variant="ghost"
           >
diff --git a/apps/ui/registry/default/particles/p-input-group-29.tsx b/apps/ui/registry/default/particles/p-input-group-29.tsx
index 881157ee0..f90811d61 100644
--- a/apps/ui/registry/default/particles/p-input-group-29.tsx
+++ b/apps/ui/registry/default/particles/p-input-group-29.tsx
@@ -5,7 +5,6 @@ import { Button } from "@/registry/default/ui/button";
 import {
   InputGroup,
   InputGroupAddon,
-  InputGroupText,
   InputGroupTextarea,
 } from "@/registry/default/ui/input-group";
 import {
@@ -34,15 +33,12 @@ export default function Particle() {
           </TooltipTrigger>
           <TooltipPopup>Record voice message</TooltipPopup>
         </Tooltip>
-        <InputGroupText className="ml-auto text-muted-foreground text-xs">
-          Press Enter to send
-        </InputGroupText>
         <Tooltip>
           <TooltipTrigger
             render={
               <Button
                 aria-label="Send message"
-                className="rounded-full"
+                className="ml-auto rounded-full"
                 size="icon-sm"
               />
             }
diff --git a/apps/ui/registry/default/particles/p-otp-field-1.tsx b/apps/ui/registry/default/particles/p-otp-field-1.tsx
index 7b8ffb6c2..c752a5161 100644
--- a/apps/ui/registry/default/particles/p-otp-field-1.tsx
+++ b/apps/ui/registry/default/particles/p-otp-field-1.tsx
@@ -1,3 +1,6 @@
+"use client";
+
+import { useId } from "react";
 import { OTPField, OTPFieldInput } from "@/registry/default/ui/otp-field";
 
 const OTP_LENGTH = 6;
@@ -8,16 +11,24 @@ const OTP_SLOT_KEYS = Array.from(
 );
 
 export default function Particle() {
+  const id = useId();
   return (
-    <OTPField aria-label="One-time password" length={OTP_LENGTH}>
-      {OTP_SLOT_KEYS.map((slotKey, index) => (
-        <OTPFieldInput
-          key={slotKey}
-          aria-label={
-            index === 0 ? undefined : `Character ${index + 1} of ${OTP_LENGTH}`
-          }
-        />
-      ))}
-    </OTPField>
+    <>
+      <label className="sr-only" htmlFor={id}>
+        One-time password
+      </label>
+      <OTPField id={id} length={OTP_LENGTH}>
+        {OTP_SLOT_KEYS.map((slotKey, index) => (
+          <OTPFieldInput
+            key={slotKey}
+            aria-label={
+              index === 0
+                ? undefined
+                : `Character ${index + 1} of ${OTP_LENGTH}`
+            }
+          />
+        ))}
+      </OTPField>
+    </>
   );
 }
diff --git a/apps/ui/registry/default/particles/p-otp-field-2.tsx b/apps/ui/registry/default/particles/p-otp-field-2.tsx
index 661e45436..7e08dddcd 100644
--- a/apps/ui/registry/default/particles/p-otp-field-2.tsx
+++ b/apps/ui/registry/default/particles/p-otp-field-2.tsx
@@ -1,3 +1,6 @@
+"use client";
+
+import { useId } from "react";
 import { OTPField, OTPFieldInput } from "@/registry/default/ui/otp-field";
 
 const OTP_LENGTH = 4;
@@ -8,16 +11,24 @@ const OTP_SLOT_KEYS = Array.from(
 );
 
 export default function Particle() {
+  const id = useId();
   return (
-    <OTPField aria-label="One-time password" length={OTP_LENGTH} size="lg">
-      {OTP_SLOT_KEYS.map((slotKey, index) => (
-        <OTPFieldInput
-          key={slotKey}
-          aria-label={
-            index === 0 ? undefined : `Character ${index + 1} of ${OTP_LENGTH}`
-          }
-        />
-      ))}
-    </OTPField>
+    <>
+      <label className="sr-only" htmlFor={id}>
+        One-time password
+      </label>
+      <OTPField id={id} length={OTP_LENGTH} size="lg">
+        {OTP_SLOT_KEYS.map((slotKey, index) => (
+          <OTPFieldInput
+            key={slotKey}
+            aria-label={
+              index === 0
+                ? undefined
+                : `Character ${index + 1} of ${OTP_LENGTH}`
+            }
+          />
+        ))}
+      </OTPField>
+    </>
   );
 }
diff --git a/apps/ui/registry/default/particles/p-otp-field-3.tsx b/apps/ui/registry/default/particles/p-otp-field-3.tsx
index 85511ea8e..56d1fbd6c 100644
--- a/apps/ui/registry/default/particles/p-otp-field-3.tsx
+++ b/apps/ui/registry/default/particles/p-otp-field-3.tsx
@@ -1,3 +1,6 @@
+"use client";
+
+import { useId } from "react";
 import {
   OTPField,
   OTPFieldInput,
@@ -13,23 +16,31 @@ const OTP_SLOT_KEYS = Array.from(
 );
 
 export default function Particle() {
+  const id = useId();
   return (
-    <OTPField aria-label="Verification code" length={OTP_LENGTH}>
-      {OTP_SLOT_KEYS.slice(0, GROUP_LENGTH).map((slotKey, index) => (
-        <OTPFieldInput
-          key={slotKey}
-          aria-label={
-            index === 0 ? undefined : `Character ${index + 1} of ${OTP_LENGTH}`
-          }
-        />
-      ))}
-      <OTPFieldSeparator />
-      {OTP_SLOT_KEYS.slice(GROUP_LENGTH).map((slotKey, index) => (
-        <OTPFieldInput
-          key={slotKey}
-          aria-label={`Character ${index + GROUP_LENGTH + 1} of ${OTP_LENGTH}`}
-        />
-      ))}
-    </OTPField>
+    <>
+      <label className="sr-only" htmlFor={id}>
+        Verification code
+      </label>
+      <OTPField id={id} length={OTP_LENGTH}>
+        {OTP_SLOT_KEYS.slice(0, GROUP_LENGTH).map((slotKey, index) => (
+          <OTPFieldInput
+            key={slotKey}
+            aria-label={
+              index === 0
+                ? undefined
+                : `Character ${index + 1} of ${OTP_LENGTH}`
+            }
+          />
+        ))}
+        <OTPFieldSeparator />
+        {OTP_SLOT_KEYS.slice(GROUP_LENGTH).map((slotKey, index) => (
+          <OTPFieldInput
+            key={slotKey}
+            aria-label={`Character ${index + GROUP_LENGTH + 1} of ${OTP_LENGTH}`}
+          />
+        ))}
+      </OTPField>
+    </>
   );
 }
diff --git a/apps/ui/registry/default/particles/p-otp-field-7.tsx b/apps/ui/registry/default/particles/p-otp-field-7.tsx
index aee736b40..4f780ebb3 100644
--- a/apps/ui/registry/default/particles/p-otp-field-7.tsx
+++ b/apps/ui/registry/default/particles/p-otp-field-7.tsx
@@ -45,7 +45,7 @@ export default function Particle() {
       {!valid && !invalid && (
         <FieldDescription>Enter `123456` to pass validation.</FieldDescription>
       )}
-      {invalid && <FieldError>Code must be 123456.</FieldError>}
+      {invalid && <FieldError match>Code must be 123456.</FieldError>}
       {valid && <FieldDescription>Code verified.</FieldDescription>}
     </Field>
   );
diff --git a/apps/ui/registry/default/particles/p-textarea-10.tsx b/apps/ui/registry/default/particles/p-textarea-10.tsx
index 94fd3e198..3a1c41de7 100644
--- a/apps/ui/registry/default/particles/p-textarea-10.tsx
+++ b/apps/ui/registry/default/particles/p-textarea-10.tsx
@@ -5,6 +5,7 @@ export default function Particle() {
   const id = useId();
   return (
     <Textarea
+      aria-label="Read-only text"
       className="read-only:bg-muted"
       defaultValue="This is a read-only textarea"
       id={id}
diff --git a/apps/ui/skills/coss/references/primitives/otp-field.md b/apps/ui/skills/coss/references/primitives/otp-field.md
index 7b23ff62f..fcebcc23c 100644
--- a/apps/ui/skills/coss/references/primitives/otp-field.md
+++ b/apps/ui/skills/coss/references/primitives/otp-field.md
@@ -30,7 +30,10 @@ import {
 ## Minimal pattern
 
 ```tsx
-<OTPField aria-label="Verification code" length={6}>
+const id = useId()
+
+<label className="sr-only" htmlFor={id}>Verification code</label>
+<OTPField id={id} length={6}>
   <OTPFieldInput />
   <OTPFieldInput aria-label="Character 2 of 6" />
   <OTPFieldInput aria-label="Character 3 of 6" />
@@ -48,11 +51,13 @@ import {
 OTP with label and controlled value:
 
 ```tsx
+const id = useId()
 const [value, setValue] = useState("")
 
 <div className="flex flex-col gap-2">
-  <Label>Verification code</Label>
+  <Label htmlFor={id}>Verification code</Label>
   <OTPField
+    id={id}
     length={6}
     value={value}
     onValueChange={setValue}
@@ -79,7 +84,7 @@ See `p-otp-field-1` through `p-otp-field-4` and `p-otp-field-6` through `p-otp-f
 ## Common pitfalls
 
 - Slot count mismatch with `length`, causing broken OTP UX.
-- Missing root labeling (`aria-label` or visible label), or adding per-slot labels to the first input.
+- A root `aria-label` does not name the first input. Associate a visible or visually hidden label with the root `id`; the first input inherits it. Additional slots can use per-slot labels.
 - Using OTP slots for arbitrary text input instead of fixed verification codes.
 
 ## Useful particle references

From 16c4faca773498fea1aa9fbf0d094a5c406d0a2e Mon Sep 17 00:00:00 2001
From: pasqualevitiello <pasqualevitiello@gmail.com>
Date: Wed, 14 Oct 2026 21:51:59 +0200
Subject: [PATCH 2/2] fix(particles): use Field labels for OTP examples

---
 apps/ui/public/r/p-dialog-4.json              |  2 +-
 apps/ui/public/r/p-field-10.json              |  2 +-
 apps/ui/public/r/p-input-group-22.json        |  2 +-
 apps/ui/public/r/p-input-group-29.json        |  2 +-
 apps/ui/public/r/p-otp-field-1.json           |  5 +--
 apps/ui/public/r/p-otp-field-2.json           |  5 +--
 apps/ui/public/r/p-otp-field-3.json           |  5 +--
 apps/ui/public/r/p-otp-field-7.json           |  2 +-
 apps/ui/public/r/p-textarea-10.json           |  2 +-
 apps/ui/public/r/registry.json                |  9 +++--
 apps/ui/registry.json                         |  9 +++--
 apps/ui/registry/__index__.tsx                |  6 ++--
 .../default/particles/p-input-group-29.tsx    |  6 +++-
 .../default/particles/p-otp-field-1.tsx       | 15 +++-----
 .../default/particles/p-otp-field-2.tsx       | 15 +++-----
 .../default/particles/p-otp-field-3.tsx       | 15 +++-----
 apps/ui/registry/registry-particles.ts        |  6 ++--
 .../coss/references/primitives/otp-field.md   | 35 +++++++++----------
 18 files changed, 70 insertions(+), 73 deletions(-)

diff --git a/apps/ui/public/r/p-dialog-4.json b/apps/ui/public/r/p-dialog-4.json
index 1641c4d89..100d0db0e 100644
--- a/apps/ui/public/r/p-dialog-4.json
+++ b/apps/ui/public/r/p-dialog-4.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/default/particles/p-dialog-4.tsx",
-      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport {\n  AlertDialog,\n  AlertDialogClose,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogPopup,\n  AlertDialogTitle,\n} from \"@/registry/default/ui/alert-dialog\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Dialog,\n  DialogClose,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogPanel,\n  DialogPopup,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/default/ui/dialog\";\nimport { Field } from \"@/registry/default/ui/field\";\nimport { Form } from \"@/registry/default/ui/form\";\nimport { Textarea } from \"@/registry/default/ui/textarea\";\n\nexport default function Particle() {\n  const [dialogOpen, setDialogOpen] = useState(false);\n  const [confirmOpen, setConfirmOpen] = useState(false);\n  const [value, setValue] = useState(\"\");\n\n  return (\n    <Dialog\n      onOpenChange={(o) => {\n        if (!o && value) {\n          setConfirmOpen(true);\n        } else {\n          setDialogOpen(o);\n        }\n      }}\n      open={dialogOpen}\n    >\n      <DialogTrigger render={<Button variant=\"outline\" />}>\n        Compose\n      </DialogTrigger>\n      <DialogPopup showCloseButton={false}>\n        <DialogHeader>\n          <DialogTitle>New message</DialogTitle>\n          <DialogDescription>Type something and try closing.</DialogDescription>\n        </DialogHeader>\n        <Form\n          className=\"contents\"\n          onSubmit={(event) => {\n            event.preventDefault();\n            // Close the dialog when submitting\n            setDialogOpen(false);\n          }}\n        >\n          <DialogPanel>\n            <Field>\n              <Textarea\n                onChange={(e) => setValue(e.target.value)}\n                value={value}\n              />\n            </Field>\n          </DialogPanel>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"ghost\" />}>\n              Cancel\n            </DialogClose>\n            <Button\n              onClick={() => {\n                setValue(\"\");\n                setDialogOpen(false);\n              }}\n            >\n              Send\n            </Button>\n          </DialogFooter>\n        </Form>\n      </DialogPopup>\n\n      {/* Confirmation dialog */}\n      <AlertDialog onOpenChange={setConfirmOpen} open={confirmOpen}>\n        <AlertDialogPopup>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Discard changes?</AlertDialogTitle>\n            <AlertDialogDescription>\n              Your message will be lost.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogClose render={<Button variant=\"ghost\" />}>\n              Go back\n            </AlertDialogClose>\n            <Button\n              onClick={() => {\n                setConfirmOpen(false);\n                setValue(\"\");\n                setDialogOpen(false);\n              }}\n            >\n              Discard\n            </Button>\n          </AlertDialogFooter>\n        </AlertDialogPopup>\n      </AlertDialog>\n    </Dialog>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport {\n  AlertDialog,\n  AlertDialogClose,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogPopup,\n  AlertDialogTitle,\n} from \"@/registry/default/ui/alert-dialog\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  Dialog,\n  DialogClose,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogPanel,\n  DialogPopup,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/default/ui/dialog\";\nimport { Field } from \"@/registry/default/ui/field\";\nimport { Form } from \"@/registry/default/ui/form\";\nimport { Textarea } from \"@/registry/default/ui/textarea\";\n\nexport default function Particle() {\n  const [dialogOpen, setDialogOpen] = useState(false);\n  const [confirmOpen, setConfirmOpen] = useState(false);\n  const [value, setValue] = useState(\"\");\n\n  return (\n    <Dialog\n      onOpenChange={(o) => {\n        if (!o && value) {\n          setConfirmOpen(true);\n        } else {\n          setDialogOpen(o);\n        }\n      }}\n      open={dialogOpen}\n    >\n      <DialogTrigger render={<Button variant=\"outline\" />}>\n        Compose\n      </DialogTrigger>\n      <DialogPopup showCloseButton={false}>\n        <DialogHeader>\n          <DialogTitle>New message</DialogTitle>\n          <DialogDescription>Type something and try closing.</DialogDescription>\n        </DialogHeader>\n        <Form\n          className=\"contents\"\n          onSubmit={(event) => {\n            event.preventDefault();\n            // Close the dialog when submitting\n            setDialogOpen(false);\n          }}\n        >\n          <DialogPanel>\n            <Field>\n              <Textarea\n                aria-label=\"Message\"\n                onChange={(e) => setValue(e.target.value)}\n                value={value}\n              />\n            </Field>\n          </DialogPanel>\n          <DialogFooter>\n            <DialogClose render={<Button variant=\"ghost\" />}>\n              Cancel\n            </DialogClose>\n            <Button\n              onClick={() => {\n                setValue(\"\");\n                setDialogOpen(false);\n              }}\n            >\n              Send\n            </Button>\n          </DialogFooter>\n        </Form>\n      </DialogPopup>\n\n      {/* Confirmation dialog */}\n      <AlertDialog onOpenChange={setConfirmOpen} open={confirmOpen}>\n        <AlertDialogPopup>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Discard changes?</AlertDialogTitle>\n            <AlertDialogDescription>\n              Your message will be lost.\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogClose render={<Button variant=\"ghost\" />}>\n              Go back\n            </AlertDialogClose>\n            <Button\n              onClick={() => {\n                setConfirmOpen(false);\n                setValue(\"\");\n                setDialogOpen(false);\n              }}\n            >\n              Discard\n            </Button>\n          </AlertDialogFooter>\n        </AlertDialogPopup>\n      </AlertDialog>\n    </Dialog>\n  );\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/ui/public/r/p-field-10.json b/apps/ui/public/r/p-field-10.json
index 28f615582..f8132b01b 100644
--- a/apps/ui/public/r/p-field-10.json
+++ b/apps/ui/public/r/p-field-10.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/particles/p-field-10.tsx",
-      "content": "\"use client\";\n\nimport {\n  Field,\n  FieldDescription,\n  FieldLabel,\n} from \"@/registry/default/ui/field\";\nimport { Textarea } from \"@/registry/default/ui/textarea\";\n\nexport default function Particle() {\n  return (\n    <Field>\n      <FieldLabel>Bio</FieldLabel>\n      <Textarea placeholder=\"Tell us about yourself…\" />\n      <FieldDescription>\n        Write a short bio. Maximum 500 characters.\n      </FieldDescription>\n    </Field>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport {\n  Field,\n  FieldDescription,\n  FieldLabel,\n} from \"@/registry/default/ui/field\";\nimport { Textarea } from \"@/registry/default/ui/textarea\";\n\nexport default function Particle() {\n  return (\n    <Field>\n      <FieldLabel>Bio</FieldLabel>\n      <Textarea maxLength={500} placeholder=\"Tell us about yourself…\" />\n      <FieldDescription>\n        Write a short bio. Maximum 500 characters.\n      </FieldDescription>\n    </Field>\n  );\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/ui/public/r/p-input-group-22.json b/apps/ui/public/r/p-input-group-22.json
index 85576d7fb..ca1072eea 100644
--- a/apps/ui/public/r/p-input-group-22.json
+++ b/apps/ui/public/r/p-input-group-22.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/default/particles/p-input-group-22.tsx",
-      "content": "\"use client\";\n\nimport { XIcon } from \"lucide-react\";\nimport { useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/default/ui/input-group\";\n\nexport default function Particle() {\n  const [value, setValue] = useState(\"Clear me\");\n\n  return (\n    <InputGroup>\n      <InputGroupInput\n        aria-label=\"Text input with clear button\"\n        onChange={(e) => setValue(e.target.value)}\n        placeholder=\"Enter text\"\n        type=\"text\"\n        value={value}\n      />\n      {value && (\n        <InputGroupAddon align=\"inline-end\">\n          <Button\n            aria-label=\"Clear input\"\n            onClick={() => setValue(\"\")}\n            size=\"icon-xs\"\n            variant=\"ghost\"\n          >\n            <XIcon aria-hidden=\"true\" />\n          </Button>\n        </InputGroupAddon>\n      )}\n    </InputGroup>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport { XIcon } from \"lucide-react\";\nimport { useRef, useState } from \"react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/default/ui/input-group\";\n\nexport default function Particle() {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [value, setValue] = useState(\"Clear me\");\n\n  return (\n    <InputGroup>\n      <InputGroupInput\n        aria-label=\"Text input with clear button\"\n        onChange={(e) => setValue(e.target.value)}\n        placeholder=\"Enter text\"\n        ref={inputRef}\n        type=\"text\"\n        value={value}\n      />\n      {value && (\n        <InputGroupAddon align=\"inline-end\">\n          <Button\n            aria-label=\"Clear input\"\n            onClick={() => {\n              setValue(\"\");\n              inputRef.current?.focus();\n            }}\n            size=\"icon-xs\"\n            variant=\"ghost\"\n          >\n            <XIcon aria-hidden=\"true\" />\n          </Button>\n        </InputGroupAddon>\n      )}\n    </InputGroup>\n  );\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/ui/public/r/p-input-group-29.json b/apps/ui/public/r/p-input-group-29.json
index ff6c5a46d..a385adb4a 100644
--- a/apps/ui/public/r/p-input-group-29.json
+++ b/apps/ui/public/r/p-input-group-29.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/default/particles/p-input-group-29.tsx",
-      "content": "\"use client\";\n\nimport { ArrowRightIcon, MicIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/default/ui/input-group\";\nimport {\n  Tooltip,\n  TooltipPopup,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\nexport default function Particle() {\n  return (\n    <InputGroup>\n      <InputGroupTextarea placeholder=\"Type a message…\" />\n      <InputGroupAddon align=\"block-end\">\n        <Tooltip>\n          <TooltipTrigger\n            render={\n              <Button\n                aria-label=\"Voice message\"\n                className=\"rounded-full\"\n                size=\"icon-sm\"\n                variant=\"ghost\"\n              />\n            }\n          >\n            <MicIcon />\n          </TooltipTrigger>\n          <TooltipPopup>Record voice message</TooltipPopup>\n        </Tooltip>\n        <InputGroupText className=\"ml-auto text-muted-foreground text-xs\">\n          Press Enter to send\n        </InputGroupText>\n        <Tooltip>\n          <TooltipTrigger\n            render={\n              <Button\n                aria-label=\"Send message\"\n                className=\"rounded-full\"\n                size=\"icon-sm\"\n              />\n            }\n          >\n            <ArrowRightIcon />\n          </TooltipTrigger>\n          <TooltipPopup>Send</TooltipPopup>\n        </Tooltip>\n      </InputGroupAddon>\n    </InputGroup>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport { ArrowRightIcon, MicIcon } from \"lucide-react\";\nimport { Button } from \"@/registry/default/ui/button\";\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupText,\n  InputGroupTextarea,\n} from \"@/registry/default/ui/input-group\";\nimport {\n  Tooltip,\n  TooltipPopup,\n  TooltipTrigger,\n} from \"@/registry/default/ui/tooltip\";\n\nexport default function Particle() {\n  return (\n    <InputGroup>\n      <InputGroupTextarea placeholder=\"Type a message…\" />\n      <InputGroupAddon align=\"block-end\">\n        <Tooltip>\n          <TooltipTrigger\n            render={\n              <Button\n                aria-label=\"Voice message\"\n                className=\"rounded-full\"\n                size=\"icon-sm\"\n                variant=\"ghost\"\n              />\n            }\n          >\n            <MicIcon />\n          </TooltipTrigger>\n          <TooltipPopup>Record voice message</TooltipPopup>\n        </Tooltip>\n        <InputGroupText className=\"ms-auto text-muted-foreground text-xs\">\n          Press Enter to send\n        </InputGroupText>\n        <Tooltip>\n          <TooltipTrigger\n            render={\n              <Button\n                aria-label=\"Send message\"\n                className=\"rounded-full\"\n                size=\"icon-sm\"\n              />\n            }\n          >\n            <ArrowRightIcon />\n          </TooltipTrigger>\n          <TooltipPopup>Send</TooltipPopup>\n        </Tooltip>\n      </InputGroupAddon>\n    </InputGroup>\n  );\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/ui/public/r/p-otp-field-1.json b/apps/ui/public/r/p-otp-field-1.json
index 8a3208407..ceaca4144 100644
--- a/apps/ui/public/r/p-otp-field-1.json
+++ b/apps/ui/public/r/p-otp-field-1.json
@@ -3,12 +3,13 @@
   "name": "p-otp-field-1",
   "description": "Basic OTP field",
   "registryDependencies": [
-    "@coss/otp-field"
+    "@coss/otp-field",
+    "@coss/field"
   ],
   "files": [
     {
       "path": "registry/default/particles/p-otp-field-1.tsx",
-      "content": "import { OTPField, OTPFieldInput } from \"@/registry/default/ui/otp-field\";\n\nconst OTP_LENGTH = 6;\n\nconst OTP_SLOT_KEYS = Array.from(\n  { length: OTP_LENGTH },\n  (_, i) => `otp-slot-${i}`,\n);\n\nexport default function Particle() {\n  return (\n    <OTPField aria-label=\"One-time password\" length={OTP_LENGTH}>\n      {OTP_SLOT_KEYS.map((slotKey, index) => (\n        <OTPFieldInput\n          key={slotKey}\n          aria-label={\n            index === 0 ? undefined : `Character ${index + 1} of ${OTP_LENGTH}`\n          }\n        />\n      ))}\n    </OTPField>\n  );\n}\n",
+      "content": "import { Field, FieldLabel } from \"@/registry/default/ui/field\";\nimport { OTPField, OTPFieldInput } from \"@/registry/default/ui/otp-field\";\n\nconst OTP_LENGTH = 6;\n\nconst OTP_SLOT_KEYS = Array.from(\n  { length: OTP_LENGTH },\n  (_, i) => `otp-slot-${i}`,\n);\n\nexport default function Particle() {\n  return (\n    <Field>\n      <FieldLabel className=\"sr-only\">One-time password</FieldLabel>\n      <OTPField length={OTP_LENGTH}>\n        {OTP_SLOT_KEYS.map((slotKey, index) => (\n          <OTPFieldInput\n            key={slotKey}\n            aria-label={\n              index === 0\n                ? undefined\n                : `Character ${index + 1} of ${OTP_LENGTH}`\n            }\n          />\n        ))}\n      </OTPField>\n    </Field>\n  );\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/ui/public/r/p-otp-field-2.json b/apps/ui/public/r/p-otp-field-2.json
index 111f67fc8..737a1068b 100644
--- a/apps/ui/public/r/p-otp-field-2.json
+++ b/apps/ui/public/r/p-otp-field-2.json
@@ -3,12 +3,13 @@
   "name": "p-otp-field-2",
   "description": "Large OTP field",
   "registryDependencies": [
-    "@coss/otp-field"
+    "@coss/otp-field",
+    "@coss/field"
   ],
   "files": [
     {
       "path": "registry/default/particles/p-otp-field-2.tsx",
-      "content": "import { OTPField, OTPFieldInput } from \"@/registry/default/ui/otp-field\";\n\nconst OTP_LENGTH = 4;\n\nconst OTP_SLOT_KEYS = Array.from(\n  { length: OTP_LENGTH },\n  (_, i) => `otp-slot-${i}`,\n);\n\nexport default function Particle() {\n  return (\n    <OTPField aria-label=\"One-time password\" length={OTP_LENGTH} size=\"lg\">\n      {OTP_SLOT_KEYS.map((slotKey, index) => (\n        <OTPFieldInput\n          key={slotKey}\n          aria-label={\n            index === 0 ? undefined : `Character ${index + 1} of ${OTP_LENGTH}`\n          }\n        />\n      ))}\n    </OTPField>\n  );\n}\n",
+      "content": "import { Field, FieldLabel } from \"@/registry/default/ui/field\";\nimport { OTPField, OTPFieldInput } from \"@/registry/default/ui/otp-field\";\n\nconst OTP_LENGTH = 4;\n\nconst OTP_SLOT_KEYS = Array.from(\n  { length: OTP_LENGTH },\n  (_, i) => `otp-slot-${i}`,\n);\n\nexport default function Particle() {\n  return (\n    <Field>\n      <FieldLabel className=\"sr-only\">One-time password</FieldLabel>\n      <OTPField length={OTP_LENGTH} size=\"lg\">\n        {OTP_SLOT_KEYS.map((slotKey, index) => (\n          <OTPFieldInput\n            key={slotKey}\n            aria-label={\n              index === 0\n                ? undefined\n                : `Character ${index + 1} of ${OTP_LENGTH}`\n            }\n          />\n        ))}\n      </OTPField>\n    </Field>\n  );\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/ui/public/r/p-otp-field-3.json b/apps/ui/public/r/p-otp-field-3.json
index bfddca9ac..8fad39cb5 100644
--- a/apps/ui/public/r/p-otp-field-3.json
+++ b/apps/ui/public/r/p-otp-field-3.json
@@ -3,12 +3,13 @@
   "name": "p-otp-field-3",
   "description": "OTP field with separator",
   "registryDependencies": [
-    "@coss/otp-field"
+    "@coss/otp-field",
+    "@coss/field"
   ],
   "files": [
     {
       "path": "registry/default/particles/p-otp-field-3.tsx",
-      "content": "import {\n  OTPField,\n  OTPFieldInput,\n  OTPFieldSeparator,\n} from \"@/registry/default/ui/otp-field\";\n\nconst OTP_LENGTH = 6;\nconst GROUP_LENGTH = 3;\n\nconst OTP_SLOT_KEYS = Array.from(\n  { length: OTP_LENGTH },\n  (_, i) => `otp-slot-${i}`,\n);\n\nexport default function Particle() {\n  return (\n    <OTPField aria-label=\"Verification code\" length={OTP_LENGTH}>\n      {OTP_SLOT_KEYS.slice(0, GROUP_LENGTH).map((slotKey, index) => (\n        <OTPFieldInput\n          key={slotKey}\n          aria-label={\n            index === 0 ? undefined : `Character ${index + 1} of ${OTP_LENGTH}`\n          }\n        />\n      ))}\n      <OTPFieldSeparator />\n      {OTP_SLOT_KEYS.slice(GROUP_LENGTH).map((slotKey, index) => (\n        <OTPFieldInput\n          key={slotKey}\n          aria-label={`Character ${index + GROUP_LENGTH + 1} of ${OTP_LENGTH}`}\n        />\n      ))}\n    </OTPField>\n  );\n}\n",
+      "content": "import { Field, FieldLabel } from \"@/registry/default/ui/field\";\nimport {\n  OTPField,\n  OTPFieldInput,\n  OTPFieldSeparator,\n} from \"@/registry/default/ui/otp-field\";\n\nconst OTP_LENGTH = 6;\nconst GROUP_LENGTH = 3;\n\nconst OTP_SLOT_KEYS = Array.from(\n  { length: OTP_LENGTH },\n  (_, i) => `otp-slot-${i}`,\n);\n\nexport default function Particle() {\n  return (\n    <Field>\n      <FieldLabel className=\"sr-only\">Verification code</FieldLabel>\n      <OTPField length={OTP_LENGTH}>\n        {OTP_SLOT_KEYS.slice(0, GROUP_LENGTH).map((slotKey, index) => (\n          <OTPFieldInput\n            key={slotKey}\n            aria-label={\n              index === 0\n                ? undefined\n                : `Character ${index + 1} of ${OTP_LENGTH}`\n            }\n          />\n        ))}\n        <OTPFieldSeparator />\n        {OTP_SLOT_KEYS.slice(GROUP_LENGTH).map((slotKey, index) => (\n          <OTPFieldInput\n            key={slotKey}\n            aria-label={`Character ${index + GROUP_LENGTH + 1} of ${OTP_LENGTH}`}\n          />\n        ))}\n      </OTPField>\n    </Field>\n  );\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/ui/public/r/p-otp-field-7.json b/apps/ui/public/r/p-otp-field-7.json
index 5cf70a289..4f11385a8 100644
--- a/apps/ui/public/r/p-otp-field-7.json
+++ b/apps/ui/public/r/p-otp-field-7.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/default/particles/p-otp-field-7.tsx",
-      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/default/ui/field\";\nimport { OTPField, OTPFieldInput } from \"@/registry/default/ui/otp-field\";\n\nconst OTP_LENGTH = 6;\n\nconst OTP_SLOT_KEYS = Array.from(\n  { length: OTP_LENGTH },\n  (_, i) => `otp-slot-${i}`,\n);\n\nexport default function Particle() {\n  const [value, setValue] = useState(\"\");\n  const [invalid, setInvalid] = useState(false);\n  const valid = value.length === OTP_LENGTH && value === \"123456\";\n\n  return (\n    <Field className=\"items-center\">\n      <FieldLabel>Verification code</FieldLabel>\n      <OTPField\n        length={OTP_LENGTH}\n        onValueChange={(nextValue) => {\n          setValue(nextValue);\n          setInvalid(\n            nextValue.length === OTP_LENGTH ? nextValue !== \"123456\" : false,\n          );\n        }}\n        value={value}\n      >\n        {OTP_SLOT_KEYS.map((slotKey, index) => (\n          <OTPFieldInput\n            key={slotKey}\n            aria-invalid={invalid || undefined}\n            aria-label={`Character ${index + 1} of ${OTP_LENGTH}`}\n          />\n        ))}\n      </OTPField>\n      {!valid && !invalid && (\n        <FieldDescription>Enter `123456` to pass validation.</FieldDescription>\n      )}\n      {invalid && <FieldError>Code must be 123456.</FieldError>}\n      {valid && <FieldDescription>Code verified.</FieldDescription>}\n    </Field>\n  );\n}\n",
+      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/default/ui/field\";\nimport { OTPField, OTPFieldInput } from \"@/registry/default/ui/otp-field\";\n\nconst OTP_LENGTH = 6;\n\nconst OTP_SLOT_KEYS = Array.from(\n  { length: OTP_LENGTH },\n  (_, i) => `otp-slot-${i}`,\n);\n\nexport default function Particle() {\n  const [value, setValue] = useState(\"\");\n  const [invalid, setInvalid] = useState(false);\n  const valid = value.length === OTP_LENGTH && value === \"123456\";\n\n  return (\n    <Field className=\"items-center\">\n      <FieldLabel>Verification code</FieldLabel>\n      <OTPField\n        length={OTP_LENGTH}\n        onValueChange={(nextValue) => {\n          setValue(nextValue);\n          setInvalid(\n            nextValue.length === OTP_LENGTH ? nextValue !== \"123456\" : false,\n          );\n        }}\n        value={value}\n      >\n        {OTP_SLOT_KEYS.map((slotKey, index) => (\n          <OTPFieldInput\n            key={slotKey}\n            aria-invalid={invalid || undefined}\n            aria-label={`Character ${index + 1} of ${OTP_LENGTH}`}\n          />\n        ))}\n      </OTPField>\n      {!valid && !invalid && (\n        <FieldDescription>Enter `123456` to pass validation.</FieldDescription>\n      )}\n      {invalid && <FieldError match>Code must be 123456.</FieldError>}\n      {valid && <FieldDescription>Code verified.</FieldDescription>}\n    </Field>\n  );\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/ui/public/r/p-textarea-10.json b/apps/ui/public/r/p-textarea-10.json
index 9092f84aa..ab83933bf 100644
--- a/apps/ui/public/r/p-textarea-10.json
+++ b/apps/ui/public/r/p-textarea-10.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/default/particles/p-textarea-10.tsx",
-      "content": "import { useId } from \"react\";\nimport { Textarea } from \"@/registry/default/ui/textarea\";\n\nexport default function Particle() {\n  const id = useId();\n  return (\n    <Textarea\n      className=\"read-only:bg-muted\"\n      defaultValue=\"This is a read-only textarea\"\n      id={id}\n      readOnly\n    />\n  );\n}\n",
+      "content": "import { useId } from \"react\";\nimport { Textarea } from \"@/registry/default/ui/textarea\";\n\nexport default function Particle() {\n  const id = useId();\n  return (\n    <Textarea\n      aria-label=\"Read-only text\"\n      className=\"read-only:bg-muted\"\n      defaultValue=\"This is a read-only textarea\"\n      id={id}\n      readOnly\n    />\n  );\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/ui/public/r/registry.json b/apps/ui/public/r/registry.json
index 336ed7cad..2183a0113 100644
--- a/apps/ui/public/r/registry.json
+++ b/apps/ui/public/r/registry.json
@@ -7327,7 +7327,8 @@
       ],
       "name": "p-otp-field-1",
       "registryDependencies": [
-        "@coss/otp-field"
+        "@coss/otp-field",
+        "@coss/field"
       ],
       "type": "registry:block"
     },
@@ -7345,7 +7346,8 @@
       ],
       "name": "p-otp-field-2",
       "registryDependencies": [
-        "@coss/otp-field"
+        "@coss/otp-field",
+        "@coss/field"
       ],
       "type": "registry:block"
     },
@@ -7363,7 +7365,8 @@
       ],
       "name": "p-otp-field-3",
       "registryDependencies": [
-        "@coss/otp-field"
+        "@coss/otp-field",
+        "@coss/field"
       ],
       "type": "registry:block"
     },
diff --git a/apps/ui/registry.json b/apps/ui/registry.json
index 336ed7cad..2183a0113 100644
--- a/apps/ui/registry.json
+++ b/apps/ui/registry.json
@@ -7327,7 +7327,8 @@
       ],
       "name": "p-otp-field-1",
       "registryDependencies": [
-        "@coss/otp-field"
+        "@coss/otp-field",
+        "@coss/field"
       ],
       "type": "registry:block"
     },
@@ -7345,7 +7346,8 @@
       ],
       "name": "p-otp-field-2",
       "registryDependencies": [
-        "@coss/otp-field"
+        "@coss/otp-field",
+        "@coss/field"
       ],
       "type": "registry:block"
     },
@@ -7363,7 +7365,8 @@
       ],
       "name": "p-otp-field-3",
       "registryDependencies": [
-        "@coss/otp-field"
+        "@coss/otp-field",
+        "@coss/field"
       ],
       "type": "registry:block"
     },
diff --git a/apps/ui/registry/__index__.tsx b/apps/ui/registry/__index__.tsx
index ce4a33104..c5cded686 100644
--- a/apps/ui/registry/__index__.tsx
+++ b/apps/ui/registry/__index__.tsx
@@ -6301,7 +6301,7 @@ export const Index: Record<string, any> = {
     name: "p-otp-field-1",
     description: "Basic OTP field",
     type: "registry:block",
-    registryDependencies: ["@coss/otp-field"],
+    registryDependencies: ["@coss/otp-field","@coss/field"],
     files: [{
       path: "registry/default/particles/p-otp-field-1.tsx",
       type: "registry:block",
@@ -6319,7 +6319,7 @@ export const Index: Record<string, any> = {
     name: "p-otp-field-2",
     description: "Large OTP field",
     type: "registry:block",
-    registryDependencies: ["@coss/otp-field"],
+    registryDependencies: ["@coss/otp-field","@coss/field"],
     files: [{
       path: "registry/default/particles/p-otp-field-2.tsx",
       type: "registry:block",
@@ -6337,7 +6337,7 @@ export const Index: Record<string, any> = {
     name: "p-otp-field-3",
     description: "OTP field with separator",
     type: "registry:block",
-    registryDependencies: ["@coss/otp-field"],
+    registryDependencies: ["@coss/otp-field","@coss/field"],
     files: [{
       path: "registry/default/particles/p-otp-field-3.tsx",
       type: "registry:block",
diff --git a/apps/ui/registry/default/particles/p-input-group-29.tsx b/apps/ui/registry/default/particles/p-input-group-29.tsx
index f90811d61..aeab3ed2a 100644
--- a/apps/ui/registry/default/particles/p-input-group-29.tsx
+++ b/apps/ui/registry/default/particles/p-input-group-29.tsx
@@ -5,6 +5,7 @@ import { Button } from "@/registry/default/ui/button";
 import {
   InputGroup,
   InputGroupAddon,
+  InputGroupText,
   InputGroupTextarea,
 } from "@/registry/default/ui/input-group";
 import {
@@ -33,12 +34,15 @@ export default function Particle() {
           </TooltipTrigger>
           <TooltipPopup>Record voice message</TooltipPopup>
         </Tooltip>
+        <InputGroupText className="ms-auto text-muted-foreground text-xs">
+          Press Enter to send
+        </InputGroupText>
         <Tooltip>
           <TooltipTrigger
             render={
               <Button
                 aria-label="Send message"
-                className="ml-auto rounded-full"
+                className="rounded-full"
                 size="icon-sm"
               />
             }
diff --git a/apps/ui/registry/default/particles/p-otp-field-1.tsx b/apps/ui/registry/default/particles/p-otp-field-1.tsx
index c752a5161..3b1572563 100644
--- a/apps/ui/registry/default/particles/p-otp-field-1.tsx
+++ b/apps/ui/registry/default/particles/p-otp-field-1.tsx
@@ -1,6 +1,4 @@
-"use client";
-
-import { useId } from "react";
+import { Field, FieldLabel } from "@/registry/default/ui/field";
 import { OTPField, OTPFieldInput } from "@/registry/default/ui/otp-field";
 
 const OTP_LENGTH = 6;
@@ -11,13 +9,10 @@ const OTP_SLOT_KEYS = Array.from(
 );
 
 export default function Particle() {
-  const id = useId();
   return (
-    <>
-      <label className="sr-only" htmlFor={id}>
-        One-time password
-      </label>
-      <OTPField id={id} length={OTP_LENGTH}>
+    <Field>
+      <FieldLabel className="sr-only">One-time password</FieldLabel>
+      <OTPField length={OTP_LENGTH}>
         {OTP_SLOT_KEYS.map((slotKey, index) => (
           <OTPFieldInput
             key={slotKey}
@@ -29,6 +24,6 @@ export default function Particle() {
           />
         ))}
       </OTPField>
-    </>
+    </Field>
   );
 }
diff --git a/apps/ui/registry/default/particles/p-otp-field-2.tsx b/apps/ui/registry/default/particles/p-otp-field-2.tsx
index 7e08dddcd..d8f297e1d 100644
--- a/apps/ui/registry/default/particles/p-otp-field-2.tsx
+++ b/apps/ui/registry/default/particles/p-otp-field-2.tsx
@@ -1,6 +1,4 @@
-"use client";
-
-import { useId } from "react";
+import { Field, FieldLabel } from "@/registry/default/ui/field";
 import { OTPField, OTPFieldInput } from "@/registry/default/ui/otp-field";
 
 const OTP_LENGTH = 4;
@@ -11,13 +9,10 @@ const OTP_SLOT_KEYS = Array.from(
 );
 
 export default function Particle() {
-  const id = useId();
   return (
-    <>
-      <label className="sr-only" htmlFor={id}>
-        One-time password
-      </label>
-      <OTPField id={id} length={OTP_LENGTH} size="lg">
+    <Field>
+      <FieldLabel className="sr-only">One-time password</FieldLabel>
+      <OTPField length={OTP_LENGTH} size="lg">
         {OTP_SLOT_KEYS.map((slotKey, index) => (
           <OTPFieldInput
             key={slotKey}
@@ -29,6 +24,6 @@ export default function Particle() {
           />
         ))}
       </OTPField>
-    </>
+    </Field>
   );
 }
diff --git a/apps/ui/registry/default/particles/p-otp-field-3.tsx b/apps/ui/registry/default/particles/p-otp-field-3.tsx
index 56d1fbd6c..d14869dc8 100644
--- a/apps/ui/registry/default/particles/p-otp-field-3.tsx
+++ b/apps/ui/registry/default/particles/p-otp-field-3.tsx
@@ -1,6 +1,4 @@
-"use client";
-
-import { useId } from "react";
+import { Field, FieldLabel } from "@/registry/default/ui/field";
 import {
   OTPField,
   OTPFieldInput,
@@ -16,13 +14,10 @@ const OTP_SLOT_KEYS = Array.from(
 );
 
 export default function Particle() {
-  const id = useId();
   return (
-    <>
-      <label className="sr-only" htmlFor={id}>
-        Verification code
-      </label>
-      <OTPField id={id} length={OTP_LENGTH}>
+    <Field>
+      <FieldLabel className="sr-only">Verification code</FieldLabel>
+      <OTPField length={OTP_LENGTH}>
         {OTP_SLOT_KEYS.slice(0, GROUP_LENGTH).map((slotKey, index) => (
           <OTPFieldInput
             key={slotKey}
@@ -41,6 +36,6 @@ export default function Particle() {
           />
         ))}
       </OTPField>
-    </>
+    </Field>
   );
 }
diff --git a/apps/ui/registry/registry-particles.ts b/apps/ui/registry/registry-particles.ts
index 9e7aeeca5..bda794458 100644
--- a/apps/ui/registry/registry-particles.ts
+++ b/apps/ui/registry/registry-particles.ts
@@ -3247,7 +3247,7 @@ export const particles: ParticleItem[] = [
     description: "Basic OTP field",
     files: [{ path: "particles/p-otp-field-1.tsx", type: "registry:block" }],
     name: "p-otp-field-1",
-    registryDependencies: ["@coss/otp-field"],
+    registryDependencies: ["@coss/otp-field", "@coss/field"],
     type: "registry:block",
   },
   {
@@ -3255,7 +3255,7 @@ export const particles: ParticleItem[] = [
     description: "Large OTP field",
     files: [{ path: "particles/p-otp-field-2.tsx", type: "registry:block" }],
     name: "p-otp-field-2",
-    registryDependencies: ["@coss/otp-field"],
+    registryDependencies: ["@coss/otp-field", "@coss/field"],
     type: "registry:block",
   },
   {
@@ -3263,7 +3263,7 @@ export const particles: ParticleItem[] = [
     description: "OTP field with separator",
     files: [{ path: "particles/p-otp-field-3.tsx", type: "registry:block" }],
     name: "p-otp-field-3",
-    registryDependencies: ["@coss/otp-field"],
+    registryDependencies: ["@coss/otp-field", "@coss/field"],
     type: "registry:block",
   },
   {
diff --git a/apps/ui/skills/coss/references/primitives/otp-field.md b/apps/ui/skills/coss/references/primitives/otp-field.md
index fcebcc23c..f933823be 100644
--- a/apps/ui/skills/coss/references/primitives/otp-field.md
+++ b/apps/ui/skills/coss/references/primitives/otp-field.md
@@ -20,6 +20,7 @@ npm install @base-ui/react lucide-react
 ## Canonical imports
 
 ```tsx
+import { Field, FieldLabel } from "@/components/ui/field"
 import {
   OTPField,
   OTPFieldInput,
@@ -30,18 +31,18 @@ import {
 ## Minimal pattern
 
 ```tsx
-const id = useId()
-
-<label className="sr-only" htmlFor={id}>Verification code</label>
-<OTPField id={id} length={6}>
-  <OTPFieldInput />
-  <OTPFieldInput aria-label="Character 2 of 6" />
-  <OTPFieldInput aria-label="Character 3 of 6" />
-  <OTPFieldSeparator />
-  <OTPFieldInput aria-label="Character 4 of 6" />
-  <OTPFieldInput aria-label="Character 5 of 6" />
-  <OTPFieldInput aria-label="Character 6 of 6" />
-</OTPField>
+<Field>
+  <FieldLabel className="sr-only">Verification code</FieldLabel>
+  <OTPField length={6}>
+    <OTPFieldInput />
+    <OTPFieldInput aria-label="Character 2 of 6" />
+    <OTPFieldInput aria-label="Character 3 of 6" />
+    <OTPFieldSeparator />
+    <OTPFieldInput aria-label="Character 4 of 6" />
+    <OTPFieldInput aria-label="Character 5 of 6" />
+    <OTPFieldInput aria-label="Character 6 of 6" />
+  </OTPField>
+</Field>
 ```
 
 ## Patterns from coss particles
@@ -51,13 +52,11 @@ const id = useId()
 OTP with label and controlled value:
 
 ```tsx
-const id = useId()
 const [value, setValue] = useState("")
 
-<div className="flex flex-col gap-2">
-  <Label htmlFor={id}>Verification code</Label>
+<Field>
+  <FieldLabel>Verification code</FieldLabel>
   <OTPField
-    id={id}
     length={6}
     value={value}
     onValueChange={setValue}
@@ -70,7 +69,7 @@ const [value, setValue] = useState("")
     <OTPFieldInput aria-label="Character 5 of 6" />
     <OTPFieldInput aria-label="Character 6 of 6" />
   </OTPField>
-</div>
+</Field>
 ```
 
 Digit-only SMS-style codes use Base UI’s default `validationType` (`numeric`) and matching `inputMode`; set those props explicitly only when you need different behavior.
@@ -84,7 +83,7 @@ See `p-otp-field-1` through `p-otp-field-4` and `p-otp-field-6` through `p-otp-f
 ## Common pitfalls
 
 - Slot count mismatch with `length`, causing broken OTP UX.
-- A root `aria-label` does not name the first input. Associate a visible or visually hidden label with the root `id`; the first input inherits it. Additional slots can use per-slot labels.
+- A root `aria-label` does not name the first input. Use `Field` with a visible or visually hidden `FieldLabel`; the first input inherits it. Additional slots can use per-slot labels.
 - Using OTP slots for arbitrary text input instead of fixed verification codes.
 
 ## Useful particle references