OtpInput

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.

Returns void

appendTo

Appends the control within the given HTML element

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.

Returns void

Inject

Dynamically injects the required modules to the component.

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.