Input OTP

The ownable Input OTP install gives your app a local wrapper for segmented verification-code entry, so you can tune slot markup, defaults, and product-specific presentation without leaving the app repo.

Why own Input OTP locally

Verification flows usually need product-specific copy, autofill rules, and recovery handling. Local ownership keeps those decisions close to the feature code instead of hidden behind a package release.

Adjust slot defaults, masking, or completion behavior inside your app.
Keep verification UI and auth flow changes versioned together.
Review OTP-specific behavior in the same workspace as the product team.

What the install includes

The registry-backed install writes the local component wrapper, template, styles, and export barrel under your app so the generated files can be edited and versioned alongside the rest of the verification flow.

Ownable Install

Install Input OTP from the TailNG registry with the shadcn-like flow. This copies source files into your app so your team can own and evolve the implementation locally.

Install from registry

Run from your Angular workspace root.

pnpm dlx tailng add input-otp

npx tailng add input-otp

Generated files

The command scaffolds local files under src/app/tailng-ui/input-otp.

src/app/tailng-ui/input-otp/tng-input-otp-primitive.ts
src/app/tailng-ui/input-otp/tng-input-otp.ts
src/app/tailng-ui/input-otp/tng-input-otp.html
src/app/tailng-ui/input-otp/tng-input-otp.css
src/app/tailng-ui/input-otp/index.ts

Import in your feature module/component

import { TngInputOtp, TngInputOtpPrimitive } from './tailng-ui/input-otp';

Usage

<tng-input-otp
  [length]="6"
  [ariaLabel]="'Verification code'"
  (complete)="onVerificationComplete($event)"
></tng-input-otp>