	Language
	English
	English
	English
	French
	German
	German
	German
	Italian
	Korean
	Spanish
	Catalan
	Dutch
	Portuguese
	Portuguese
	Arabic
	Arabic
	Bulgarian
	Bangla
	Bosnian
	Czech
	Greek
	Estonian
	Persian
	Finnish
	Danish
	Hindi
	Indonesian
	Icelandic
	Croatian
	Japanese
	Hungarian
	Hebrew
	Georgian
	Central Kurdish
	Khmer
	Kyrgyz
	Kazakh
	Lithuanian
	Latvian
	Malay
	Norwegian
	Polish
	Romanian
	Russian
	Slovak
	Slovenian
	Serbian
	Serbian
	Swedish
	Thai
	Turkish
	Ukrainian
	Uzbek
	Vietnamese
	Chinese
	Chinese

InputOtp

InputOtp is an input for one-time passwords and PINs with one input per character. Typing moves to the next input, a pasted code is distributed over the inputs and mobile browsers can fill in a code received by SMS.

InputOtp Tag Documentation

InputOtp is an input for one-time passwords and PINs, one input per character.

Name	Type	Required	Default	Description
id	String	false	generated	Unique identifier of the component in a namingContainer.
rendered	boolean	false	true	Boolean value to specify the rendering of the component, when set to false component will not be rendered.
binding	UIComponent	false	generated	An EL expression referring to a server side UIComponent instance in a backing bean.
widgetVar	String	false	generated ('widget_' + componentClientId)	Name of the client side widget.
ariaDescribedBy	String	false		The aria-describedby attribute is used to define a component id that describes the current element for accessibility.
ariaLabel	String	false		Label of each input for screen readers, {0} is replaced by the position of the input. Defaults to the otpLabel of the locale.
ariaLabelledBy	String	false
autocomplete	String	false	one-time-code	Autocomplete of the first input, the default lets mobile browsers fill in a code received by SMS.
converter	Converter	false		EL expression resolves to a converter instance or literal converter ID defining a component converter.
converterMessage	String	false
disabled	boolean	false	false	Disables the component.
immediate	boolean	false	false	When set true, process validations logic is executed at apply request values phase for this component.
inputStyle	String	false		Inline style of the inputs.
inputStyleClass	String	false		Style class of the inputs, e.g. p-inputtext-sm or p-inputtext-lg.
integerOnly	boolean	false	false	Accepts digits only and shows the numeric keyboard on mobile devices.
label	String	false		User presentable name, used in the validation messages.
length	int	false	4	Number of characters, one input per character.
mask	boolean	false	false	Masks the characters like a password.
onchange	String	false		Client side callback to execute when the value changes, the new value is passed as argument.
placeholder	String	false		Placeholder of the inputs: one character for all inputs, or one character per input.
readonly	boolean	false	false	Prevents changes by the user.
redisplay	boolean	false	false	With mask: renders the value, otherwise the inputs are empty like a password.
required	boolean	false	false	Marks component as required.
requiredMessage	String	false
separator	String	false		Text displayed between the inputs, the separator facet takes precedence.
style	String	false		Inline style of the component.
styleClass	String	false		Style class of the component.
submittedValue	Object	false
tabindex	String	false		Position of the inputs in the tabbing order.
validator	Validator	false		A method expression referring to a method validating the input.
validatorMessage	String	false
value	Object	false		Value of the component.
valueChangeListener	ValueChangeListener	false		A method binding expression referring to a method for handling a valuchangeevent.

Name	Description
separator	Content displayed between the inputs, e.g. an icon.

Name	Type	Default	Description
change	AjaxBehaviorEvent	true	Fires when the focus leaves the component and the value was changed.
complete	AjaxBehaviorEvent	false	Fires when all characters are entered.

Name	Library	Target
components.css	primefaces
inputotp/inputotp.css	primefaces
jquery/jquery.js	primefaces
core.js	primefaces
components.js	primefaces
inputotp/inputotp.js	primefaces

Family org.primefaces.component

Type org.primefaces.component.InputOtp

Class org.primefaces.component.inputotp.InputOtp

Renderer Type org.primefaces.component.InputOtpRenderer

Renderer Class org.primefaces.component.inputotp.InputOtpRenderer

RESOURCES

Tag Documentation Documentation Documentation JSDoc

Basic

The complete event fires when all characters are entered.

Mask

Separator

Placeholder

Sizes

Disabled and Readonly

Validation

A partially entered code is invalid.

Usage


<p:growl>
    <p:autoUpdate/>
</p:growl>

<h:form>
    <div class="card">
        <h5 class="mt-0">Basic</h5>
        <p class="mt-0">The <i>complete</i> event fires when all characters are entered.</p>
        <p:outputLabel for="@next" value="Verification code" styleClass="block mb-2"/>
        <p:inputOtp value="#{inputOtpView.code}" length="6" integerOnly="true">
            <p:ajax event="complete" listener="#{inputOtpView.onComplete}"/>
        </p:inputOtp>
    </div>

    <div class="card">
        <h5 class="mt-0">Mask</h5>
        <p:inputOtp value="#{inputOtpView.pin}" mask="true" integerOnly="true"/>
    </div>

    <div class="card">
        <h5 class="mt-0">Separator</h5>
        <div class="flex flex-column gap-3">
            <p:inputOtp length="6" separator="-"/>
            <p:inputOtp length="6" integerOnly="true">
                <f:facet name="separator">
                    <i class="pi pi-minus"/>
                </f:facet>
            </p:inputOtp>
        </div>
    </div>

    <div class="card">
        <h5 class="mt-0">Placeholder</h5>
        <div class="flex flex-column gap-3">
            <p:inputOtp placeholder="0" integerOnly="true"/>
            <p:inputOtp length="5" placeholder="ABCDE"/>
        </div>
    </div>

    <div class="card">
        <h5 class="mt-0">Sizes</h5>
        <div class="flex flex-column gap-3">
            <p:inputOtp inputStyleClass="p-inputtext-sm"/>
            <p:inputOtp/>
            <p:inputOtp inputStyleClass="p-inputtext-lg"/>
        </div>
    </div>

    <div class="card">
        <h5 class="mt-0">Disabled and Readonly</h5>
        <div class="flex flex-column gap-3">
            <p:inputOtp value="1234" disabled="true"/>
            <p:inputOtp value="5678" readonly="true"/>
        </div>
    </div>

    <div class="card">
        <h5 class="mt-0">Validation</h5>
        <p class="mt-0">A partially entered code is invalid.</p>
        <div class="flex flex-wrap align-items-start gap-3">
            <div>
                <p:inputOtp id="token" value="#{inputOtpView.token}" length="6" integerOnly="true" required="true"
                            label="Token"/>
                <p:message for="token"/>
            </div>
            <p:commandButton value="Submit" action="#{inputOtpView.submit}" process="@this token" update="@form"/>
        </div>
    </div>
</h:form>

<h:form>
    <div class="card">
        <h5 class="mt-0">Client Side Validation</h5>
        <p class="mt-0">The code is validated in the browser before the form is submitted.</p>
        <div class="flex flex-wrap align-items-start gap-3">
            <div>
                <p:inputOtp id="csvToken" value="#{inputOtpView.csvToken}" length="6" integerOnly="true" required="true"
                            label="Token"/>
                <p:message for="csvToken"/>
            </div>
            <p:commandButton value="Submit" action="#{inputOtpView.submit}" update="@form" validateClient="true"/>
        </div>
    </div>
</h:form>


package org.primefaces.showcase.view.input;

import java.io.Serializable;

import jakarta.faces.application.FacesMessage;
import jakarta.faces.context.FacesContext;
import jakarta.faces.view.ViewScoped;
import jakarta.inject.Named;

@Named
@ViewScoped
public class InputOtpView implements Serializable {

    private String code;
    private String pin = "1234";
    private String token;
    private String csvToken;

    public void onComplete() {
        FacesContext.getCurrentInstance().addMessage(null,
                new FacesMessage(FacesMessage.SEVERITY_INFO, "Code entered", code));
    }

    public void submit() {
        FacesContext.getCurrentInstance().addMessage(null,
                new FacesMessage(FacesMessage.SEVERITY_INFO, "Submitted", "Token: " + token + ", CSV token: " + csvToken));
    }

    public String getCode() {
        return code;
    }

    public void setCode(String code) {
        this.code = code;
    }

    public String getPin() {
        return pin;
    }

    public void setPin(String pin) {
        this.pin = pin;
    }

    public String getToken() {
        return token;
    }

    public void setToken(String token) {
        this.token = token;
    }

    public String getCsvToken() {
        return csvToken;
    }

    public void setCsvToken(String csvToken) {
        this.csvToken = csvToken;
    }
}