Vibeset

Code slots

It is the screen where the most people get lost, and six separate inputs fail exactly where it matters: pasting the whole code, mobile autofill, deleting and screen readers. The fix is the opposite of what it looks like: there is a single real input, transparent and on top of everything, and the slots are drawing that reads its value, so they cannot get out of sync. It receives the system autofill (one-time-code) and to a reader it is a text field and nothing else. It has no maxLength: if you paste "123 456", with a limit of 6 the browser cuts before cleaning and a digit is lost. onCompleto can be asynchronous: it waits once full, and if the code is wrong it shakes, empties and gives focus back.

And the React Bits original: Code Slots

This piece is written from scratch in Vibeset: nothing was copied or ported from React Bits. It does something similar to their Code Slots, and this is what we saw in theirs in case you prefer to use the original.

When to use it

To verify an email, a phone or a second factor. It is exactly the screen where a bad experience loses people.

Watch out for

The hard parts of these fields (mobile autofill, pasting the whole code) already come solved. What is left is yours: validate the code on the server, with an attempt limit.

Accessibility

One of the best: seven aria signals, keyboard, one-time-code autofill and reduced motion.