Adding a input otp component

[VerburgtJimmy]

Describe the feature

I saw that the react based shadcn/ui (https://ui.shadcn.com/docs/components/input-otp) created a new input otp component. So since I also need this component for my own project i thought I could help out by start creating this component for this library. The component is based on the bits-ui input otp(https://www.bits-ui.com/docs/components/pin-input) component but shares the visuals and functionality of the shadcn/ui input otp component. See photo for example running locally. The full functionality is not done yet and there are some discussions to be had on how to implement some things but a start is always nice

I have already made a basic version in a local environment so if someone can assign me to this feature i can commit the new input otp component for what i have so far so that you guys can correct some things or provide more feedback. This component is highly requested for this package and would be a great addition.

If you need more info please ask.

[victorDigital]

+1 🤗

[shyakadavis]

Related:

• day 1 of requesting for input otp & breadcrumb 🔥🔥 #881
• Input OTP from shadcn/ui #995
• Add new Input OTP component  #1027

[VerburgtJimmy]

Ok so we are not basing it on the bits ui for this one? But we are waiting for the same person who created the input otp wrapper/api for the react version to make a svelte variant.

[shyakadavis]

Tbh, I'm not sure. The author of input-otp hasn't made any strides in the multiple-frameworks version. At least AFAICT.

But, Hunter made a remark that there might be the possibility of making the Bits-UI version as good as the input-otp one.

Pin Input (I think we can make this as good as the input-otp library)

huntabyte/bits-ui#469 (comment)

Guess time will tell the direction this goes in.

[VerburgtJimmy]

Ah ok. I looked at the input-opt multiple frameworks branch and it looked already pretty far along for svelte but who knows how much time it will actually be before it is production ready. I will keep an eye open for a any changes and for now I will be using my own created input-otp component based on the react one.

[shyakadavis]

@VerburgtJimmy if you're ever up for it, please do share your component. 🙂

[VerburgtJimmy]

@huntabyte don't know how far you are with the svelte input-otp implementation but this is what I have and use so far. Still a work in progress but has the same features and foundation as the input-otp package for react.
https://github.com/VerburgtJimmy/svelte-input-otp/tree/main

[VerburgtJimmy]

Here is a small demo video

Screen.Recording.2024-06-05.at.17.03.31.mov

[huntabyte]

Hey @VerburgtJimmy! Thanks for that! I'll check it out once I get through some of these higher-priority components in the Bits UI rewrite for Svelte 5 first.

[VerburgtJimmy]

Sure take all the time you need! I am developing it further and publishing it on npm as a unstyled component. That component can than be used to create the shadcn variant. And thanks for all the hard work you provide for this community👍🏻

[VerburgtJimmy]

fyi: just deployed the package. For more info see: https://svelte-input-otp.jimmyverburgt.com/

[DaniAcu]

@VerburgtJimmy Awesome job 🚀 ! I was checking the accesibility of your component and I saw some improvements that we can do. I open a PR VerburgtJimmy/svelte-input-otp#2

With this change the copy and paste will work better in mobile, and we wil have a aria-label to set to the control.

Let me know, happy to contribute in any other things 😄

[kjmj]

Not to rush anything here, but I'm just curious if the plan is still to add input otp to this awesome library

[VerburgtJimmy]

Hey @VerburgtJimmy! Thanks for that! I'll check it out once I get through some of these higher-priority components in the Bits UI rewrite for Svelte 5 first.

Like mentioned here. The priority for now is on rewriting bits-ui to svelte 5 and then convert this library to svelte 5 as well I guess but @huntabyte can correct me if I am wrong!

For now I guess the only option is to use a different input-otp package and then add shadcn/ui styles to it or if you are familiar with bits-ui you can check out the pin-input component over there: https://www.bits-ui.com/docs/components/pin-input