InputOtp is an input component suitable for inserting fixed-size PINs or one time passwords (OTP).
<div class="card">
<h:form id="frmOtp">
<p:messages id="msgs">
<p:autoUpdate/>
</p:messages>
<div>
<h5>Required</h5>
<pe:inputOtp id="txtRequired" length="4" value="#{inputOtpView.normal}" required="true"
requiredMessage="OTP is required!"/>
<h5>Password</h5>
<pe:inputOtp id="txtPassword" length="5" mask="true" value="#{inputOtpView.password}"/>
<h5>Numbers</h5>
<pe:inputOtp id="txtNumber" length="6" integerOnly="true" value="#{inputOtpView.number}"/>
<h5>Disabled</h5>
<pe:inputOtp disabled="true"/>
</div>
<p:commandButton styleClass="mt-3" value="Submit" actionListener="#{inputOtpView.submit}"
update="@form"/>
</h:form>
</div>
package org.primefaces.showcase.view.input;
import jakarta.faces.application.FacesMessage;
import jakarta.faces.context.FacesContext;
import jakarta.faces.view.ViewScoped;
import jakarta.inject.Named;
import java.io.Serializable;
import io.quarkus.runtime.annotations.RegisterForReflection;
import lombok.Data;
@Named
@ViewScoped
@Data
@RegisterForReflection(serialization = true)
public class InputOtpView implements Serializable {
private static final long serialVersionUID = 1L;
private String normal;
private String password;
private Integer number;
public void submit() {
FacesContext context = FacesContext.getCurrentInstance();
context.addMessage(null,
new FacesMessage(FacesMessage.SEVERITY_INFO, "Required: " + normal, null));
context.addMessage(null,
new FacesMessage(FacesMessage.SEVERITY_INFO, "Password: " + password, null));
context.addMessage(null,
new FacesMessage(FacesMessage.SEVERITY_INFO, "Numbers: " + number, null));
}
}