Appearance in Angular OTP Input

25 Sep 20266 minutes to read

You can also customize the appearance of Angular OTP Input component.

Setting input length

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

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { OtpInputModule } from '@syncfusion/ej2-angular-inputs'
import { enableRipple } from '@syncfusion/ej2-base'

import { Component } from '@angular/core';

@Component({
imports: [
         FormsModule, OtpInputModule
    ],


standalone: true,
  selector: 'app-root',
  template: `<!-- To Render OTP Input component. -->
    <div class="wrap">
        <div id='otp-container' style="width: 350px;">
            <div ejs-otpinput length='5'></div>
        </div>
    </div>`
})

export class AppComponent { }
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
/* Represents the styles for loader */
#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.wrap {
  margin: 50px auto;
}

Disabling OTP Input

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

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { OtpInputModule } from '@syncfusion/ej2-angular-inputs'
import { enableRipple } from '@syncfusion/ej2-base'

import { Component } from '@angular/core';

@Component({
imports: [
         FormsModule, OtpInputModule
    ],


standalone: true,
  selector: 'app-root',
  template: `<!-- To Render OTP Input component. -->
    <div class="wrap">
        <div id='otp-container' style="width: 350px;">
            <div ejs-otpinput disabled="true"></div>
        </div>
    </div>`
})

export class AppComponent { }
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
/* Represents the styles for loader */
#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.wrap {
  margin: 50px auto;
}

CSS classes

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

The Angular 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 { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { OtpInputModule } from '@syncfusion/ej2-angular-inputs'
import { enableRipple } from '@syncfusion/ej2-base'

import { Component } from '@angular/core';

@Component({
imports: [
         FormsModule, OtpInputModule
    ],


standalone: true,
  selector: 'app-root',
  template: `<!-- To Render OTP Input component. -->
    <div class="wrap">
        <div id='otp-container' style="width: 350px;">
            <div ejs-otpinput cssClass="e-success"></div>
        </div>
    </div>`
})

export class AppComponent { }
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
/* Represents the styles for loader */
#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.wrap {
  margin: 50px auto;
}