disabled prop on RadixOTPField.Root doesn’t disable the child inputs

[clinton-slice]

Bug report

Current Behavior

When passing the disabled prop to the One-Time-Password field components, the inputs remain interactive—they can still be focused and edited—and styling never reflects a disabled state. Even if you wrap <RadixOTPField.Root disabled={true}>, neither the individual nor the hidden input respects or applies that flag.

Expected behavior

A consumer should be able to disable the entire OTP field by doing:
<RadixOTPField.Root disabled />

• All digit inputs should become non-focusable and non-editable.
• The hidden input should also be marked disabled.
• The component should emit native disabled attributes and allow CSS selectors (e.g. [disabled], .disabled) to style the root and inputs.

Reproducible example

CodeSandbox Template

• Pass disabled to <RadixOTPField.Root>.
• Notice you can still click into and type in each digit .
• Inspect the DOM: the inputs never receive disabled="true".

Suggested solution

Have the package forward an explicit disabled prop to each child:

// In @radix-ui/react-one-time-password-field/src/Root.tsx
- <div {...rootProps}>{children}</div>
+ <div {...rootProps} data-disabled={disabled} aria-disabled={disabled}>
+   {React.Children.map(children, child =>
+     React.isValidElement(child)
+       ? React.cloneElement(child, { disabled })
+       : child
+   )}
+ </div>

And in Input.tsx and HiddenInput.tsx, ensure the element accepts and applies disabled={disabled}.

Additional context

Your environment

Software	Name(s)	Version
Radix Package(s)	@radix-ui/react-one-time-password-field	^1.0.0
React	n/a
Browser
Assistive tech
Node	n/a
npm/yarn/pnpm
Operating System

[nayounsang]

I'm constantly trying to improve OTP. I want to try this issue

[jcgsville]

If it helps anyone, here's a pnpm patch I have that seems to do the trick:

diff --git a/dist/index.js b/dist/index.js
index e5fff2443a41b5dfb1d8a11c0fb1d70ccf5a4b6d..d4d45420accd7621ac1360b5509c5fd36533a4c7 100644
--- a/dist/index.js
+++ b/dist/index.js
@@ -332,7 +332,7 @@ var OneTimePasswordField = React.forwardRef(
   }
 );
 var OneTimePasswordFieldHiddenInput = React.forwardRef(function OneTimePasswordFieldHiddenInput2({ __scopeOneTimePasswordField, ...props }, forwardedRef) {
-  const { value, hiddenInputRef, name } = useOneTimePasswordFieldContext(
+  const { value, hiddenInputRef, name, disabled } = useOneTimePasswordFieldContext(
     "OneTimePasswordFieldHiddenInput",
     __scopeOneTimePasswordField
   );
@@ -351,7 +351,8 @@ var OneTimePasswordFieldHiddenInput = React.forwardRef(function OneTimePasswordF
       spellCheck: false,
       ...props,
       type: "hidden",
-      readOnly: true
+      readOnly: true,
+      disabled
     }
   );
 });
@@ -425,6 +426,7 @@ var OneTimePasswordFieldInput = React.forwardRef(function OneTimePasswordFieldIn
             maxLength: 1,
             pattern: validation?.pattern,
             readOnly: context.readOnly,
+            disabled: context.disabled,
             value: char,
             placeholder,
             "data-radix-otp-input": "",
diff --git a/dist/index.mjs b/dist/index.mjs
index 64a37420a93cc9d6ba2b24387301a6069ed46784..d8b7473077dbc85c3197a73524b0bc2e6b47a18b 100644
--- a/dist/index.mjs
+++ b/dist/index.mjs
@@ -292,7 +292,7 @@ var OneTimePasswordField = React.forwardRef(
   }
 );
 var OneTimePasswordFieldHiddenInput = React.forwardRef(function OneTimePasswordFieldHiddenInput2({ __scopeOneTimePasswordField, ...props }, forwardedRef) {
-  const { value, hiddenInputRef, name } = useOneTimePasswordFieldContext(
+  const { value, hiddenInputRef, name, disabled } = useOneTimePasswordFieldContext(
     "OneTimePasswordFieldHiddenInput",
     __scopeOneTimePasswordField
   );
@@ -311,7 +311,8 @@ var OneTimePasswordFieldHiddenInput = React.forwardRef(function OneTimePasswordF
       spellCheck: false,
       ...props,
       type: "hidden",
-      readOnly: true
+      readOnly: true,
+      disabled
     }
   );
 });
@@ -385,6 +386,7 @@ var OneTimePasswordFieldInput = React.forwardRef(function OneTimePasswordFieldIn
             maxLength: 1,
             pattern: validation?.pattern,
             readOnly: context.readOnly,
+            disabled: context.disabled,
             value: char,
             placeholder,
             "data-radix-otp-input": "",
diff --git a/src/one-time-password-field.tsx b/src/one-time-password-field.tsx
index f585b61d56f611a035db305cf7430f8c5a0c0f19..7b2cdbe0887feaf2d237632b7672792b32bc4869 100644
--- a/src/one-time-password-field.tsx
+++ b/src/one-time-password-field.tsx
@@ -506,7 +506,7 @@ const OneTimePasswordFieldHiddenInput = React.forwardRef<
   { __scopeOneTimePasswordField, ...props }: ScopedProps<OneTimePasswordFieldHiddenInputProps>,
   forwardedRef
 ) {
-  const { value, hiddenInputRef, name } = useOneTimePasswordFieldContext(
+  const { value, hiddenInputRef, name, disabled } = useOneTimePasswordFieldContext(
     'OneTimePasswordFieldHiddenInput',
     __scopeOneTimePasswordField
   );
@@ -525,6 +525,7 @@ const OneTimePasswordFieldHiddenInput = React.forwardRef<
       {...props}
       type="hidden"
       readOnly
+      disabled={disabled}
     />
   );
 });
@@ -649,6 +650,7 @@ const OneTimePasswordFieldInput = React.forwardRef<
               maxLength={1}
               pattern={validation?.pattern}
               readOnly={context.readOnly}
+              disabled={context.disabled}
               value={char}
               placeholder={placeholder}
               data-radix-otp-input=""