Interface for a class OtpInput
Event triggers when the Otp input is focused out.
EmitType<Event>
Event triggers after the creation of the Otp Input.
Event triggers when the Otp input is focused.
Event triggers each time when the value of each Otp input is changed.
Event triggers after the value is changed and the Otp input is focused out.
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');
boolean
Specifies whether the OTP input field should automatically receive focus when the component is rendered.
string
Defines one or more CSS classes that can be used to customize the appearance of the Otp (One-Time Password) input component.
boolean
Specifies whether the Otp input component is disabled. When set to true, the component is disabled and user input is not allowed.
boolean
Enable or disable persisting component’s state between page reloads.
boolean
Enable or disable rendering component in right to left direction.
{ : }
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');
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');
string
Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.
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');
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');
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');
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. 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');
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');