OtpInputComponent

Represents the React OtpInput Component

<OtpInputComponent value={value}></OtpInputComponent>

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.

import * as React from 'react';
import { OtpInputComponent } from '@syncfusion/ej2-react-inputs';
export class App extends React.Component<{},{}> {
   public ariaLabels: string[] = ['otp-input-1', 'otp-input-2', 'otp-input-3', 'otp-input-4'];  
  render() {
    return (
      <OtpInputComponent id='otpInput' ariaLabels={this.ariaLabels}></OtpInputComponent>
    );
  }
}

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.

import * as React from 'react';
import { OtpInputComponent } from '@syncfusion/ej2-react-inputs';
export class App extends React.Component<{},{}> {
  render() {
    return (
      <OtpInputComponent id='otpInput' htmlAttributes={{ name: "otp-input" }}></OtpInputComponent>
    );
  }
}

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.

import * as React from 'react';
import { OtpInputComponent } from '@syncfusion/ej2-react-inputs';
export class App extends React.Component<{},{}> {
  render() {
    return (
      <OtpInputComponent id='otpInput' length={4}></OtpInputComponent>
    );
  }
}

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.

import * as React from 'react';
import { OtpInputComponent } from '@syncfusion/ej2-react-inputs';
export class App extends React.Component<{},{}> {
  render() {
    return (
      <OtpInputComponent id='otpInput' placeholder='x'></OtpInputComponent>
    );
  }
}

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.

import * as React from 'react';
import { OtpInputComponent } from '@syncfusion/ej2-react-inputs';
export class App extends React.Component<{},{}> {
  render() {
    return (
      <OtpInputComponent id='otpInput' separator='/'></OtpInputComponent>
    );
  }
}

Defaults to ”

stylingMode

string | OtpInputStyle

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

import * as React from 'react';
import { OtpInputComponent } from '@syncfusion/ej2-react-inputs';
export class App extends React.Component<{},{}> {
  render() {
    return (
      <OtpInputComponent id='otpInput' stylingMode='outlined'></OtpInputComponent>
    );
  }
}

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.

import * as React from 'react';
import { OtpInputComponent } from '@syncfusion/ej2-react-inputs';
export class App extends React.Component<{},{}> {
  render() {
    return (
      <OtpInputComponent id='otpInput' type='number'></OtpInputComponent>
    );
  }
}

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.

import * as React from 'react';
import { OtpInputComponent } from '@syncfusion/ej2-react-inputs';
export class App extends React.Component<{},{}> {
  render() {
    return (
      <OtpInputComponent id='otpInput' value={1234}></OtpInputComponent>
    );
  }
}

Defaults to ”

Methods

destroy

Destroy the Otp input.

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

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.