Appearance in React OTP Input component

13 Jun 20245 minutes to read

You can also customize the appearance of OTP Input component.

Setting input length

You can specify the length of OTP by using the length property. The default value is 4.

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

Disable inputs

You can disable the OTP Input control by using the disabled property. By default the value is false.

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

CssClass

You can customize the appearance of the OTP Input component, such as by changing its colors, fonts, sizes or other visual aspects by using the cssClass property.

The OTP input component supports the following predefined styles that can be defined using the cssClass property. You can customize by replacing the cssClass property with the below defined class names.

cssClass Description
e-success Used to represent a positive action.
e-warning Used to represent an action with caution.
e-error Used to represent a negative action. 
// 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} cssClass='e-success'></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} cssClass='e-success'></OtpInputComponent>
        </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('element'));