ngxsmk-otp-input/README.md

Angular 17+ OTP/PIN input component (standalone + SCSS)

# 🚀 ngxsmk-otp-input

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

[![npm version](https://img.shields.io/npm/v/ngxsmk-otp-input.svg)](https://www.npmjs.com/package/ngxsmk-otp-input)
[![downloads](https://img.shields.io/npm/dm/ngxsmk-otp-input.svg)](https://www.npmjs.com/package/ngxsmk-otp-input)
![angular version](https://img.shields.io/badge/angular-%5E17.0-red)
![license](https://img.shields.io/badge/license-MIT-blue)

---


## ✨ 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

```bash
  npm install ngxsmk-otp-input
```

👉 Requires Angular **v17+**

---


## 🚀 Quick Start

```ts
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

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

---


## 🛠 Development

```bash
  ng build ngxsmk-otp-input
```

Output: `dist/ngxsmk-otp-input/`

---


## 📦 Publish to npm

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

---


## 📄 License

[MIT](./LICENSE)

---


## 🌟 Community

If you like this project, give it a ⭐ on [GitHub](https://github.com/toozuuu/ngxsmk-otp-input) and share with others!

---


## 🙌 Credits

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