OtpInputComponent

23 Sep 20254 minutes to read

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.