Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Nettalco/nettalco-theme/llms.txt

Use this file to discover all available pages before exploring further.

The InputOTP component renders a one-time password input as a row of individual character slots, commonly used for two-factor authentication. Nettalco Theme controls the spacing between slots and the width of each slot at small, default, and large size variants. Each individual slot inherits its border, background, and focus styling from the global form.field.* system.

​
Usage

<!-- Default 6-digit OTP -->
<p-inputOtp [(ngModel)]="otp" [length]="6" />

<!-- Integer mask -->
<p-inputOtp [(ngModel)]="otp" [length]="4" integerOnly />

<!-- Size variants -->
<p-inputOtp [(ngModel)]="otp" [length]="6" size="small" />
<p-inputOtp [(ngModel)]="otp" [length]="6" size="large" />

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { InputOtpModule } from 'primeng/inputotp';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [InputOtpModule, FormsModule],
  templateUrl: './example.component.html'
})
export class ExampleComponent {
  otp: string | undefined;
}

​
Design Tokens

​
Root

TokenValueDescription
gap0.5remSpace between each OTP slot

​
Input (slot dimensions)

TokenValueDescription
input.width2.5remDefault slot width
input.sm.width2remSlot width in sm size variant
input.lg.width3remSlot width in lg size variant
InputOTP slots are square by default — the height is driven by the vertical padding and font size inherited from form.field.*, keeping the height in sync with other form fields at every size variant.

​
Theme Notes

InputOTP has a minimal set of bespoke tokens. The gap (0.5rem) and slot widths are the only layout values defined here; all color, border, shadow, and focus ring properties come from the shared form.field token system.
The three slot widths (2 rem / 2.5 rem / 3 rem) correspond proportionally to the sm, default, and lg padding scales. This ensures the slots look balanced relative to other form controls at every size.

Build docs developers (and LLMs) love

Get started for freeTalk to us