Open
Description
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
- 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 |
Metadata
Metadata
Assignees
Labels
No labels