Input Types in React OTP Input component

13 Jun 20247 minutes to read

Types

This section explains the the various types of OTP (One-Time Password) input controls, explaining their default behaviors and appropriate use cases.

Number type

You can set the type property to number to use this input type as number. This is ideal for OTP input scenarios with numeric-only codes. By default type property is number.

// Import the OTP Input.
import { OtpInputComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// To render OTP Input.
function App() {
    return (<div id='container'>
            <OtpInputComponent id='otpinput' type='number' value={1234}></OtpInputComponent>
        </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('element'));
// Import the OTP Input.
import { OtpInputComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';

// To render OTP Input.
function App() {
  
    return (
        <div id='container'>
            <OtpInputComponent id='otpinput' type='number' value={1234}></OtpInputComponent>
        </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));

Text type

You can set the type property to text to use this input type as text. This is suitable when the OTP input need to include both letters and numbers.

// Import the OTP Input.
import { OtpInputComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// To render OTP Input.
function App() {
    return (<div id='container'>
            <OtpInputComponent id='otpinput' type='text' value={"e3c7"}></OtpInputComponent>
        </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('element'));
// Import the OTP Input.
import { OtpInputComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';

// To render OTP Input.
function App() {
  
    return (
        <div id='container'>
            <OtpInputComponent id='otpinput' type='text' value={"e3c7"}></OtpInputComponent>
        </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));

Password type

You can set the type property to password to use this input type as password in the OTP Input.

// Import the OTP Input.
import { OtpInputComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// To render OTP Input.
function App() {
    return (<div id='container'>
            <OtpInputComponent id='otpinput' type='password' value={1234}></OtpInputComponent>
        </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('element'));
// Import the OTP Input.
import { OtpInputComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';

// To render OTP Input.
function App() {
  
    return (
        <div id='container'>
            <OtpInputComponent id='otpinput' type='password' value={1234}></OtpInputComponent>
        </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));

Value

You can specify the value of OTP Input by using the value property.

// Import the OTP Input.
import { OtpInputComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// To render OTP Input.
function App() {
    return (<div id='container'>
            <OtpInputComponent id='otpinput' value="1234"></OtpInputComponent>
        </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('element'));
// Import the OTP Input.
import { OtpInputComponent } from '@syncfusion/ej2-react-inputs';
import * as React from 'react';
import * as ReactDom from 'react-dom';

// To render OTP Input.
function App() {
  
    return (
        <div id='container'>
            <OtpInputComponent id='otpinput' value="1234"></OtpInputComponent>
        </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));