Open
Description
Bug report
Current Behavior
Regardless of how many <OneTimePasswordField.Input>
elements are rendered, if you copy and paste text into the field, all of the pasted characters are inserted, even beyond the intended length.
Expected behavior
Any characters beyond the configured number of inputs should be truncated—excess text should not be added to the field.
Reproducible example
- Navigate to the Radix UI One Time Password Field demo:
https://www.radix-ui.com/primitives/docs/components/one-time-password-field - Copy a string of more than 6 digits.
- Click into the OTP field and paste.
- Observe that all digits appear, overflowing the intended 6-character limit.
Suggested solution
On value change (e.g. in the onValueChange
handler), verify the new value’s length and slice it to the maximum allowed length before updating state.
Your environment
Software | Name(s) | Version |
---|---|---|
Radix Package(s) | @radix-ui/react-one-time-password-field | ^0.1.6 |
React | n/a | ^19.1.0 |
npm/yarn/pnpm | pnpm | 10.11.0 |
Metadata
Metadata
Assignees
Labels
No labels