feat(v4): new implementation for the InputOTP component

[ace-of-aces]

🔗 Linked issue

-

❓ Type of change

• 📖 Documentation (updates to the documentation, readme or JSdoc annotations)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

This PR adds the new InputOTP component using wobsoriano/vue-input-otp that behaves as closely as possible to the one in the current version of shadcn/ui as we discussed in #1503 😄

Steps taken

• Implemented the InputOTP component on the v4 registry
• Changed the default pattern on the OTPInput to accept all kinds of characters (.*) instead having the default in vue-input-otp only accept digits and letters. I did this to match the behaviour of the original guilhermerodz/input-otp react library and therefore shadcn/ui. We could discuss here whether we should make a PR in wobsoriano/vue-input-otp to possibly change this default, or just to have this override in our component.
• Added custom provide/inject logic to mimic the React.context usage in shadcn/ui through otp-input. This behaviour is not provided from vue-input-otp, as it only gives us slot props to use.
• Verified the input behaviour, paste behaviour and overall accessibility to be correct (one exception described below)
• Added documentation with the exact examples used in shadcn/ui (see screenshots below). Uses VeeValidate in the form example, the general structure is closely oriented on the VeeValidate form example.

Known issue

There is a minor bug when typing characters into an otp input where the pattern does not allow the typed characters.

Example: :pattern="REGEXP_ONLY_DIGITS_AND_CHARS" and typing "#$%" moves the focused slot forward (but also inconsistently), which is not the case in shadcn/ui. As this is controlled via vue-input-otp, I likely suspect the issue to be in there instead of on our side.

Here's a video of me repeatedly typing # into the pattern example on the docs page:

Screen.Recording.2025-10-26.at.15.51.15.mov

As you see, the characters correctly don't show up in the input, but the focussed input segment moves forward, and sometimes also backwards.

📸 Screenshots (if appropriate)

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[sadeghbarati]

Hi there! 👋

I believe it’s better to provide context from vue-input-otp instead of from within the <template>.

For now, let's use slotProps. 🙏

I will try to update the upstream repository and submit a pull request, but it may take some time that is why we need to stick with slotProps for now.

[ace-of-aces]

Yes, exactly what I thought as well. Having this provided from the package would be a lot cleaner🙏🏻

[sadeghbarati]

No need to revert back to slotProps

Managed to work on it
We will use useVueOTPContxt after this PR get merged

wobsoriano/vue-input-otp#19

Will update this PR afterwards

Thanks for your contribution 🫡❤️

[ace-of-aces]

What a mighty PR you made there! 😄

Hope this will get merged soon, it'll bring this project a little closer to v4 being ready :)

You're welcome ofc, thx for your awesome work! ❤️