How can I help you?
Input Types in React OTP Input component
21 Feb 20267 minutes to read
Types
This section explains the various OTP (One-Time Password) input types, their default behaviors, and appropriate use cases.
Number type
Set the type property to number to use numeric input. This is ideal for OTP codes containing only digits. The default value 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
Set the type property to text to use text input. This is suitable when the OTP includes 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
Set the type property to password to mask the OTP values for security purposes.
// 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'));