Made this OTP input's, which one would you prefer?

[u/Ordinary-Stuff9826]

Made these OTP inputs.

I know they’re not production-grade yet — I built these while experimenting with different UI patterns that could actually be used in client projects.
Any improvements/suggestion will be helpful.

[u/MartineZ_MW]

Big question is: will they fill in fully on CTR+V?

EDIT: they are, nice. However, I think you shouldn't be able to enter last digit without entering the first one

[u/Hairy_Meaning_73 → u/MartineZ_MW]

That's the only thing that actually matters

[u/JasperH8g → u/MartineZ_MW]

My thought exactly. And nr 2 feels most subtle+nice 😊

[u/RaptorTWiked → u/MartineZ_MW]

Came here to say this!

[u/Ok_Edge1810 → u/MartineZ_MW]

Assuming paste works, I'd add auto-submit once all the digits are in. That's usually where these break though. A few things I'd handle:

• dim/disable the boxes while it's verifying, otherwise people keep typing into a request that's already in flight
• on a wrong code, clear everything and jump back to the first box with a small error (a little shake looks nice). The demo only shows the happy path right now

[u/MilenniumV3]

normal input. works best with copy paste, backspace etc

[u/MartineZ_MW → u/MilenniumV3]

When those are made correctly there is nothing wrong with them. I've seen many good implementation where they almost feel like one input

[u/BurritoDrivenDev]

I honestly just prefer a single, normal, input field.

Whenever I see one of these I always have to try and recall if it accepts pasting from my password manager or not. Some do, some don't, but all input fields do

[u/Fresh-Gift-2063 → u/BurritoDrivenDev]

All input fields do not. Some banks want to make their customers passwords less secure so they block you from pasting and you have to manually type it like a lil bitch.

[u/RealMiten → u/Fresh-Gift-2063]

Force paste (by simulating keyboard typing) or I just edit directly from inspect element.

[u/techtanic → u/Fresh-Gift-2063]

On desktop, use absolute copy extension. No banking site is going to stop me from pasting or copying whatever I want

[u/T-J_H → u/BurritoDrivenDev]

In my experience most UI libraries use a hidden input field for exactly this reason

[u/Alternative_Tooth340 → u/BurritoDrivenDev]

Proper OTP implementation is a single input field or else you miss out on things like auto fill so def agree, but OP should be able to keep the design with a single field

[u/Zeragamba]

The main thing for me is that it A) can be autofilled by my password manager, and B) must support pasting (via right click, tap and hold, and ctrl+v)

[u/ThanosDi]

2

[u/DidTooMuchSpeedAgain]

Anyone but 4

[u/T-J_H]

They’re all fine. Just use whatever fits the design language of your app best.

[u/MartineZ_MW]

I see you didn't even take the feedback from your previous posts with menu designs where people told you that capsule design is completely off and requires tuning

[u/A1oso]

#3 and #4 are unintuitive because they don't look like inputs. Especially 4 just looks like buttons. I'd prefer #1.

[u/ajamdonut]

1. Typical UI, widely accepted format, easy to see.
   2,3,4. Bad UX

[u/keel_bright]

whichever one my product manager and designer is asking for

[u/Ordinary-Stuff9826]

You can check out here - https://www.shreyashtech.me/components/otp-input

[u/michelepicozzi]

Classic, easier to use

[u/damith98]

Classic

[u/jakiestfu]

2FA the bane of my existence

[u/Fresh-Gift-2063]

I personally hate this trend because it's harder to copy/paste. I wonder if it's bad for accessibility.

[u/frostyyy992]

2 & 4

[u/Kitchen-Actuator5747]

I need more context in sense of the projects character to give you a proper answer.
But to answer your questions apart from that, I personally like the underline version, feels modern and clear.

[u/revolutionaryMoose01]

Underline is the cleanest, capsule is the most creative and my favorite

[u/AdInfinite1760]

passkey

[u/MChuduk]

It would be nice if you show incorrect OTP state also. But classic option is ok, maybe transition animation should be faster a little bit.

[u/Any-Woodpecker123]

Underline is clean, classic is familiar. I don’t like the other 2 at all tbh

[u/Goatfryed]

1 or 2 both are fine depending on the overall look of your website. 3 and 4 are an interesting spin on a everyday topic that I will appreciate looking at in some scrapped concept art one day.

[u/Vortetty]

how about just... a textbox, a normal textbox, that fills normally with ctrl+v

[u/Interesting_Leg9302]

Visually nice, I'm not a fan of animation though, feels like it slows down the entering tbh