OtpInput

23 Sep 20257 minutes to read

Represents the Otp component that allows the user to enter the otp values.

<div id='OTPInput'></div>

<script>
  var OtpinputObj = new OtpInput();
  OtpinputObj.appendTo('#OTPInput');
</script>

Properties

ariaLabels string[]

Defines the ARIA-label attribute for each input field in the Otp (One-Time Password) input component.
Each string in the array corresponds to the ARIA-label attribute for each input field.

    <div id="otp_input"></div>

import { OtpInput } from '@syncfusion/ej2-inputs';
let otp_input: OtpInput = new OtpInput({
    ariaLabels: ['otp-input-1', 'otp-input-2', 'otp-input-3', 'otp-input-4']
});
otp_input.appendTo('#otp_input');

Defaults to []

autoFocus boolean

Specifies whether the OTP input field should automatically receive focus when the component is rendered.

Defaults to false

cssClass string

Defines one or more CSS classes that can be used to customize the appearance of the Otp (One-Time Password) input component.

Defaults to ’’

disabled boolean

Specifies whether the Otp input component is disabled.
When set to true, the component is disabled and user input is not allowed.

Defaults to false

enablePersistence boolean

Enable or disable persisting component’s state between page reloads.

Defaults to false

enableRtl boolean

Enable or disable rendering component in right to left direction.

Defaults to false

htmlAttributes { : }

Specifies additional HTML attributes to be applied to the Otp (One-Time Password) input component.

    <div id="otp_input"></div>

import { OtpInput } from '@syncfusion/ej2-inputs';
let otp_input: OtpInput = new OtpInput({
    htmlAttributes: { name: 'otp-input'}
});
otp_input.appendTo('#otp_input');

Defaults to {}

length number

Specifies the length of the Otp (One-Time Password) to be entered by the user.
This determines the number of input fields in the Otp Input.

    <div id="otp_length"></div>

import { OtpInput } from '@syncfusion/ej2-inputs';
let otp_length: OtpInput = new OtpInput({
    length: 4
});
otp_length.appendTo('#otp_length');

Defaults to 4

locale string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

Defaults to ’’

placeholder string

Specifies the text that is shown as a hint/placeholder until the user focuses on or enters a value in the Otp Input.
If a single text is provided, it will be used for all input fields; otherwise, each text letter will be used for each field.

    <div id="otp_placeholder"></div>

import { OtpInput } from '@syncfusion/ej2-inputs';
let otp_placeholder: OtpInput = new OtpInput({
    placeholder: 'x'
});
otp_placeholder.appendTo('#otp_placeholder');

Defaults to ’’

separator string

Specifies the separator used to separate each input field in the Otp Input component.
The separator is displayed between each input field.

    <div id="otp_separator"></div>

import { OtpInput } from '@syncfusion/ej2-inputs';
let otp_separator: OtpInput = new OtpInput({
    separator: "/"
});
otp_separator.appendTo('#otp_separator');

Defaults to ’’

stylingMode string|OtpInputStyle

Specifies the style variant for the input fields in the Otp Input component.

    <div id="otp_style"></div>

import { OtpInput } from '@syncfusion/ej2-inputs';
let otp_style: OtpInput = new OtpInput({
    stylingMode: 'outlined'
});
otp_style.appendTo('#otp_style');

Defaults to OtpInputStyle.Outlined

textTransform string|TextTransform

Specifies the case transformation for the OTP input text.
Valid values are:

TextTransform.Uppercase for uppercase transformation.
TextTransform.Lowercase for lowercase transformation.
TextTransform.None for no transformation.

Defaults to TextTransform.None

type string|OtpInputType

Specifies the input type of the Otp.

    <div id="otp_type"></div>

import { OtpInput } from '@syncfusion/ej2-inputs';
let otp_type: OtpInput = new OtpInput({
    type: 'number'
});
otp_type.appendTo('#otp_type');

Defaults to OtpInputType.Number

value string|number

Specifies the value of the Otp (One-Time Password) input.
This can be a string or a number, representing the Otp value entered by the user.

    <div id="otp_value"></div>

import { OtpInput } from '@syncfusion/ej2-inputs';
let otp_value: OtpInput = new OtpInput({
    value: 1234
});
otp_value.appendTo('#otp_value');

Defaults to ’’

Methods

addEventListener

Adds the handler to the given event listener.

Parameter	Type	Description
eventName	`string`	A String that specifies the name of the event
handler	`Function`	Specifies the call to run when the event occurs.

Returns void

appendTo

Appends the control within the given HTML element

Parameter	Type	Description
selector (optional)	`string` \| `HTMLElement`	Target element where control needs to be appended

Returns void

attachUnloadEvent

Adding unload event to persist data when enable persistence true

Returns void

dataBind

When invoked, applies the pending property changes immediately to the component.

Returns void

destroy

Destroy the Otp input.

Returns void

detachUnloadEvent

Removing unload event to persist data when enable persistence true

Returns void

focusIn

Sets the focus to the Otp input for interaction.

Returns void

focusOut

Remove the focus from Otp input, if it is in focus state.

Returns void

getLocalData

Returns the persistence data for component

Returns any

getRootElement

Returns the route element of the component

Returns HTMLElement

handleUnload

Handling unload event to persist data when enable persistence true

Returns void

refresh

Applies all the pending property changes and render the component again.

Returns void

removeEventListener

Removes the handler from the given event listener.

Parameter	Type	Description
eventName	`string`	A String that specifies the name of the event to remove
handler	`Function`	Specifies the function to remove

Returns void

Inject

Dynamically injects the required modules to the component.

Parameter	Type	Description
moduleList	`Function[]`	?

Returns void

Events

blur EmitType<OtpFocusEventArgs>

Event triggers when the Otp input is focused out.

created EmitType<Event>

Event triggers after the creation of the Otp Input.

focus EmitType<OtpFocusEventArgs>

Event triggers when the Otp input is focused.

input EmitType<OtpInputEventArgs>

Event triggers each time when the value of each Otp input is changed.

valueChanged EmitType<OtpChangedEventArgs>

Event triggers after the value is changed and the Otp input is focused out.