Package com.flowingcode.vaadin.addons.otpfield

Class OtpField

java.lang.Object
com.vaadin.flow.component.Component
com.vaadin.flow.component.AbstractField<OtpField,String>
com.vaadin.flow.component.AbstractSinglePropertyField<OtpField,String>
com.flowingcode.vaadin.addons.otpfield.OtpField
All Implemented Interfaces:
AttachNotifier, BlurNotifier<OtpField>, DetachNotifier, Focusable<OtpField>, FocusNotifier<OtpField>, HasAriaLabel, HasElement, HasEnabled, HasHelper, HasLabel, HasPlaceholder, HasSize, HasStyle, HasValidation, HasValue<AbstractField.ComponentValueChangeEvent<OtpField,String>,String>, HasValueAndElement<AbstractField.ComponentValueChangeEvent<OtpField,String>,String>, HasAllowedCharPattern, HasPrefix, HasSuffix, HasTooltip, HasValidationProperties, InputField<AbstractField.ComponentValueChangeEvent<OtpField,String>,String>, HasValidator<String>, HasValueChangeMode, Serializable
@Tag("fc-otp-field") @JsModule("./fc-otp-field/otp-field.ts") @NpmPackage(value="@vaadin/field-base",version="25.2.7") @NpmPackage(value="@vaadin/component-base",version="25.2.7") public class OtpField extends AbstractSinglePropertyField<OtpField,String> implements InputField<AbstractField.ComponentValueChangeEvent<OtpField,String>,String>, HasAllowedCharPattern, HasAriaLabel, HasPlaceholder, HasPrefix, HasSuffix, HasValidationProperties, HasValidator<String>, HasValueChangeMode, Focusable<OtpField>
A field for entering a short verification code: a one-time password, a 2FA or SMS code, an e-mail confirmation code or a banking token.

The field renders one visual slot per character, advances as the user types, accepts a pasted or auto-filled code, and integrates with Binder like any other Vaadin input field.

Value

The value is a String that may be shorter than getLength(): what the user typed is always the value, and "not finished yet" is a constraint violation rather than a hidden value. Applications that only care about the finished code use addCompleteListener(ComponentEventListener) instead of inspecting the length of every value change.

The value change mode defaults to ValueChangeMode.EAGER, so the server sees every keystroke. Applications that would rather not transmit partial codes can switch to ValueChangeMode.ON_CHANGE, which leaves the complete event intact.

Validation

The field has three built-in constraints:

  • required — the value is empty while setRequiredIndicatorVisible(boolean) is enabled
  • incomplete — the value is non-empty and shorter than getLength()
  • invalid — the value is longer than getLength(), or contains characters the field does not accept. A user cannot enter such a value, so this reports a value that was set programmatically, typically a stored code that no longer fits the configuration of the field

getDefaultValidator() reports all three, so a Binder picks them up automatically, and the error messages come from OtpFieldI18n. Verifying a code against a back end is the responsibility of the application: use addCompleteListener together with HasValidationProperties.setInvalid(boolean) and HasValidationProperties.setErrorMessage(String) for that, or hand validation over entirely with setManualValidation(boolean).

The field generates, sends, verifies or expires nothing: it is an input control, not a security control. Masking is a shoulder-surfing measure only.

Example

 OtpField otp = new OtpField("Verification code", 6);
 otp.addCompleteListener(e -> verifyCode(e.getValue()));
Since:
1.0.0
Author:
Flowing Code
See Also: