🚀 ngxsmk-otp-input

Angular 17+ ⚡ standalone OTP/PIN input component — beautifully styled with SCSS, built for ReactiveForms, and optimized for speed & DX.

---

✨ Why ngxsmk-otp-input?

• 🧩 Plug & Play — drop-in standalone component (no NgModule needed)
• 📱 Mobile-friendly — supports one-time-code autofill & numeric keypad
• 🎯 Customizable — length, numeric-only, mask character, autocomplete
• ⌨️ Smart UX — paste detection, arrow navigation, backspace handling
• ♿ Accessible — ARIA labels & roles built-in
• 🎨 Theme-ready — tweak with CSS variables
• ✅ Forms-ready — works seamlessly with Reactive & Template-driven forms

---

📦 Install

  npm install ngxsmk-otp-input

👉 Requires Angular v17+

---

🚀 Quick Start

import { Component } from '@angular/core';
import { ReactiveFormsModule, FormGroup, FormControl, Validators } from '@angular/forms';
import { OtpInputComponent } from 'ngxsmk-otp-input';

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [ReactiveFormsModule, OtpInputComponent],
  template: `
    <form [formGroup]="form" (ngSubmit)="submit()">
      <h2>🔑 Enter OTP</h2>
      <ngxsmk-otp-input
        formControlName="code"
        [length]="6"
        [numeric]="true"
        [mask]="false"
        (changed)="onChanged($event)"
        (completed)="onCompleted($event)">
      </ngxsmk-otp-input>
      <button type="submit">Verify</button>
    </form>
  `
})
export class DemoComponent {
  form = new FormGroup({
    code: new FormControl('', [Validators.required, Validators.minLength(6)])
  });

  onChanged(v: string) { console.log('Changed:', v); }
  onCompleted(v: string) { console.log('Completed:', v); }
  submit() { console.log('Form:', this.form.value); }
}

---

⚙️ Inputs

Input	Type	Default	Description
length	number	6	Number of OTP boxes
numeric	boolean	true	Only allow 0-9 digits
mask	boolean	false	Mask entered characters
maskChar	string	•	Character to show when masking
autocomplete	'one-time-code' | 'otp' | 'off'	'one-time-code'	Input autocomplete hint
isInvalid	boolean	false	Marks invalid styling
idPrefix	string	'ngxsmk-otp'	Input element id prefix

---

📤 Outputs

Output	Type	Fires When
changed	string	OTP value changes
completed	string	All boxes filled with valid input

---

🎨 Theming

ngxsmk-otp-input {
  --ngx-otp-border: #e5e7eb;
  --ngx-otp-focus: #8b5cf6;
  --ngx-otp-bg: #f9fafb;
  --ngx-otp-fg: #1f2937;
  --ngx-otp-invalid: #ef4444;
}

---

🛠 Development

  ng build ngxsmk-otp-input

Output: dist/ngxsmk-otp-input/

---

📦 Publish to npm

  cd dist/ngxsmk-otp-input
  npm publish --access public

---

📄 License

MIT

---

🌟 Community

If you like this project, give it a ⭐ on GitHub and share with others!

---

🙌 Credits

Made with ❤️ by developers for developers — because OTP inputs shouldn’t be painful.