Add OTP Input component

[sulimanbenhalim]

New pure CSS OTP/PIN input component following daisyUI guidelines. No JavaScript required.

[pdanpdan]

You can get away with less CSS if you design it as a modifier for input.

https://play.tailwindcss.com/zrB3E7tjAq?file=css

I left the outline on focus when it is in wrapper (label) but it can be removed and the same increased border size can be used for focus indication.

[saadeghi]

I did some experiments on this a few months ago but I couldn't get the letter-spacing to work as expected. This looks promising 👍 Well done.

[sulimanbenhalim]

I did some experiments on this a few months ago but I couldn't get the letter-spacing to work as expected. This looks promising 👍 Well done.

still needs some work, it has issue on fully rounded themes like valentine worth looking into @pdanpdan solution

[pdanpdan]

I managed to get rounded boxes for each char.
I would say that now the only problem is that we cannot use transparent colors for the border and the bg of the boxes (so focus/active state should be indicated using bg color or something else), but appart for this it obeys everything in the theme.

v1: https://play.tailwindcss.com/FMTa8yKr3I?file=css
v2: https://play.tailwindcss.com/k0fWKxXvmB (added Valentine theme for testing, no other changes)
v3: https://play.tailwindcss.com/nxMhHDRqcE?file=css (improved aspect on text selection)

A variant with gap 0 should be separately defined, because it can be done with only one filled bg and repeated vertical lines, while using the input border and border radius for the external border.

[sulimanbenhalim]

per-cell rounded boxes via 12-layer tiled gradient compositor

[pdanpdan]

can you please put it in a play tailwind so we can check it?

[sulimanbenhalim]

Contributor

https://play.tailwindcss.com/K9X9n1TByk

[pdanpdan]

It looks like there's still a problem with the connected variant - it scrolls after you insert all digits

[sulimanbenhalim]

It looks like there's still a problem with the connected variant - it scrolls after you insert all digits

Correct
I focused more on the separated variant and still couldn't get the weird looking glow off

[saadeghi]

There's a UX issue, I'm not sure if there's a way to overcome it.
Imagine the user typing one of the numbers wrong. They would click that part to remove it or edit it. Ideally clicking on number must put the cursor after the number so pressing the delete key on keyboard, deletes the number. But since we're using one input and we're using letter spacing, clicking a number puts the cursor before that number which is not ideal.

Video from Vuetify OTP comparing to this PR, trying to remove the number 2:

aa.mp4

[pdanpdan]

I'm not sure this can be fixed without js

[sulimanbenhalim]

I don't think the whole thing is ready with the current CSS limitations.
also not sure if CSSWG have anything inthe pipeline that could solve it either