public class OtpField

Segmented one-time-code input – one box per digit, with a caret that walks from box to box as the code is typed. The standard entry screen for an SMS or authenticator code, and the second half of phone number verification.

Example

OtpField otp = new OtpField(6);
otp.addCompleteListener(e -> verify(otp.getText()));
form.add(otp);

Receiving the code from the SMS

The field carries TextArea#ONE_TIME_CODE, so the platform offers the code from the incoming message by itself: on iOS the keyboard’s suggestion bar shows it above the keys, on Android the autofill service offers it on the field. Accepting it fills every box at once. The application reads no messages and asks for no messaging permission – it only says what the field is for, and the platform does the rest. A platform that cannot offer the code is unaffected, and the code is typed.

This is why the boxes are drawn rather than being separate editors. A code arrives as one value, and a row of one-character fields can only receive one character of it. Behind the boxes is a single field holding the whole code, so an offered code, a paste and a keyboard all land the same way.

Styling

Each box uses the UIID “OtpDigit” and the field itself uses “OtpField”.