Syncfusion AI Assistant

How can I help you?

Placeholder in React OTP Input component

21 Feb 20263 minutes to read

The placeholder in OTP Input displays text as a hint until the user enters a value. It provides guidance regarding the expected input format or purpose.

You can set the placeholder text using the placeholder property. When providing a single character, all OTP input fields display that same character.

// 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' placeholder='x'></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' placeholder='x'></OtpInputComponent>
        </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));

When multiple placeholder characters are provided, each OTP input field displays characters from the placeholder string sequentially based on the OTP length.

// 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' placeholder='wxyz'></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' placeholder='wxyz'></OtpInputComponent>
        </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));