OTP Field

[logaretm]

What

OTP inputs are tricky to build and naturally, they have multiple requirements and expectations.

The OTP input should have the following features:

• Supports digits or characters.
• Code length should be configurable, maybe a length prop?
• Supports Paste/Backspace focus management and value filling.
• Supports typing focus management between inputs.
• Supports iOS/Android filling hints from messages.
• Supports validation and error messages.
• RTL direction.

Anatomy

There are two ways to build an OTP input, I do not think we should support both since they are wildly different.

Single Input Field

Easier to manage and fill as it is only 1 field.

 <input type="text"
         inputmode="numeric"
         autocomplete="one-time-code"
         pattern="\d{6}"
         required>

Validation will be easy to implement, but patterns will require some logic to prevent illegal characters.

You could style it to look like it has code boxes like in this article, but I do not think it feels nice at all and it is magic-number heavy.

Multi-input Fields

Each field would represent one code character, most UI libraries implement this pattern as it is more visually appealing and does inform the user about the length of the expected code implicitly.

I think this is the approach we should follow, I do not know about the a11y concerns around this.

Examples:

• Prime Vue OTP Input
• Vuetify OTP Input

Extras

Web OTP API

This can be very useful for mobile devices, right now it is only supported on Chrome/Edge and their mobile counterparts, but we can support it regardless.

Resources

• https://web.dev/articles/sms-otp-form

[ahmadalfy]

I wanted to add this link, happy to find it's already in the list.

RTL direction is always ignored when OTP is implemented through multiple inputs. The container's direction should be LTR instead.