{"id":15617881,"url":"https://github.com/pkovzz/ngx-otp-input","last_synced_at":"2026-02-11T20:11:02.602Z","repository":{"id":40590584,"uuid":"340679213","full_name":"pkovzz/ngx-otp-input","owner":"pkovzz","description":"One time password input library for Angular","archived":false,"fork":false,"pushed_at":"2025-01-22T14:51:50.000Z","size":1016,"stargazers_count":27,"open_issues_count":4,"forks_count":16,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-09-06T13:58:31.541Z","etag":null,"topics":["angular","input","javascript","one-time-password","otp","typescript","web"],"latest_commit_sha":null,"homepage":"https://ngx-otp-input.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pkovzz.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-02-20T14:53:32.000Z","updated_at":"2025-08-12T14:29:36.000Z","dependencies_parsed_at":"2024-06-01T16:46:29.089Z","dependency_job_id":"e2f3c217-5a45-40c0-ad56-aaa32b1398a6","html_url":"https://github.com/pkovzz/ngx-otp-input","commit_stats":null,"previous_names":["k2peter/ngx-otp-input"],"tags_count":30,"template":false,"template_full_name":null,"purl":"pkg:github/pkovzz/ngx-otp-input","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pkovzz%2Fngx-otp-input","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pkovzz%2Fngx-otp-input/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pkovzz%2Fngx-otp-input/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pkovzz%2Fngx-otp-input/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pkovzz","download_url":"https://codeload.github.com/pkovzz/ngx-otp-input/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pkovzz%2Fngx-otp-input/sbom","scorecard":{"id":736556,"data":{"date":"2025-08-11","repo":{"name":"github.com/pkovzz/ngx-otp-input","commit":"ddfade9c52acf47fc5307eeb3c277428955285c3"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3.5,"checks":[{"name":"Code-Review","score":1,"reason":"Found 4/30 approved changesets -- score normalized to 1","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Info: jobLevel 'contents' permission set to 'read': .github/workflows/npm.yaml:9","Warn: no topLevel permission defined: .github/workflows/ci.yaml:1","Warn: no topLevel permission defined: .github/workflows/npm.yaml:1","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Pinned-Dependencies","score":3,"reason":"dependency not pinned by hash detected -- score normalized to 3","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yaml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/pkovzz/ngx-otp-input/ci.yaml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yaml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/pkovzz/ngx-otp-input/ci.yaml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/npm.yaml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/pkovzz/ngx-otp-input/npm.yaml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/npm.yaml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/pkovzz/ngx-otp-input/npm.yaml/master?enable=pin","Info:   0 out of   4 GitHub-owned GitHubAction dependencies pinned","Info:   2 out of   2 npmCommand dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Packaging","score":10,"reason":"packaging workflow detected","details":["Info: Project packages its releases by way of GitHub Actions.: .github/workflows/npm.yaml:6"],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Branch-Protection","score":3,"reason":"branch protection is not maximal on development and all release branches","details":["Info: 'allow deletion' disabled on branch 'master'","Info: 'force pushes' disabled on branch 'master'","Warn: 'branch protection settings apply to administrators' is disabled on branch 'master'","Warn: could not determine whether codeowners review is allowed","Warn: 'up-to-date branches' is disabled on branch 'master'","Info: status check found to merge onto on branch 'master'","Warn: PRs are not required to make changes on branch 'master'; or we don't have data to detect it.If you think it might be the latter, make sure to run Scorecard with a PAT or use Repo Rules (that are always public) instead of Branch Protection settings"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 9 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"27 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-jr5f-v2jv-69x6","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-67mh-4wv8-2f99","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-4www-5p9h-95mh","Warn: Project is vulnerable to: GHSA-9gqv-wp59-fq42","Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27","Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55","Warn: Project is vulnerable to: GHSA-76c9-3jph-rj3q","Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-3g92-w8c5-73pq","Warn: Project is vulnerable to: GHSA-c76h-2ccp-4975","Warn: Project is vulnerable to: GHSA-cxrh-j4jr-qwg3","Warn: Project is vulnerable to: GHSA-64vr-g452-qvp3","Warn: Project is vulnerable to: GHSA-9cwx-2883-4wfx","Warn: Project is vulnerable to: GHSA-vg6x-rcgg-rjx6","Warn: Project is vulnerable to: GHSA-x574-m823-4x7w","Warn: Project is vulnerable to: GHSA-4r4m-qw57-chr8","Warn: Project is vulnerable to: GHSA-xcj6-pq6g-qj4x","Warn: Project is vulnerable to: GHSA-356w-63v5-8wf4","Warn: Project is vulnerable to: GHSA-859w-5945-r5v3","Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986","Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v","Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-22T16:03:28.489Z","repository_id":40590584,"created_at":"2025-08-22T16:03:28.489Z","updated_at":"2025-08-22T16:03:28.489Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278931654,"owners_count":26070789,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-08T02:00:06.501Z","response_time":56,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","input","javascript","one-time-password","otp","typescript","web"],"created_at":"2024-10-03T08:00:50.881Z","updated_at":"2026-02-11T20:11:02.596Z","avatar_url":"https://github.com/pkovzz.png","language":"TypeScript","funding_links":[],"categories":["Recently Updated","Third Party Components"],"sub_categories":["[Oct 03, 2024](/content/2024/10/03/README.md)","Form Controls"],"readme":"# ngx-otp-input\n\n[![License](https://img.shields.io/github/license/pkovzz/ngx-otp-input?style=flat)](./LICENSE)\n\n`ngx-otp-input` is a CVA-first Angular OTP component with a boxed UI, mobile-friendly behavior, and accessibility-focused defaults.\n\n## Why this library\n\nBuilding OTP inputs from scratch usually means solving many edge cases:\n\n- paste and autofill behavior across browsers and mobile keyboards\n- accessible announcements and clear focus handling\n- validation, sanitization, and keyboard navigation\n- a polished OTP box UI that still works with Angular Forms\n\nThis library handles those details and exposes a small, explicit API.\n\n## Demo\n\n- Live demo: http://ngx-otp-input.vercel.app\n\n## Requirements\n\n- Angular `\u003e=17.2.0`\n- `@angular/forms` (required peer dependency)\n\n## Installation\n\n```bash\nnpm install ngx-otp-input\n```\n\n## Quick start (Reactive Forms)\n\n```typescript\nimport { Component } from '@angular/core';\nimport { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';\nimport { NgxOtpInputComponent, OtpStatus } from 'ngx-otp-input';\n\n@Component({\n  selector: 'app-root',\n  standalone: true,\n  imports: [ReactiveFormsModule, NgxOtpInputComponent],\n  template: `\n    \u003cform [formGroup]=\"form\"\u003e\n      \u003cngx-otp-input\n        formControlName=\"otp\"\n        [length]=\"6\"\n        [status]=\"status\"\n        (otpComplete)=\"verifyOtp($event)\"\n      \u003e\u003c/ngx-otp-input\u003e\n    \u003c/form\u003e\n  `,\n})\nexport class AppComponent {\n  status: OtpStatus = 'idle';\n\n  form = new FormGroup({\n    otp: new FormControl('', { nonNullable: true }),\n  });\n\n  verifyOtp(code: string): void {\n    // Verify the code, then set status to 'success' or 'error'\n  }\n}\n```\n\n## API reference\n\n### Inputs\n\n| Input            | Type                                           | Default                                                 | Description                                                    |\n| ---------------- | ---------------------------------------------- | ------------------------------------------------------- | -------------------------------------------------------------- |\n| `length`         | `number`                                       | `6`                                                     | Number of OTP characters / visible boxes.                      |\n| `autoFocus`      | `boolean`                                      | `true`                                                  | Focuses the input after view init (unless disabled).           |\n| `autoBlur`       | `boolean`                                      | `true`                                                  | Blurs the input when the OTP becomes complete.                 |\n| `mask`           | `boolean`                                      | `false`                                                 | Masks rendered characters (`•`) in the visual boxes.           |\n| `charPattern`    | `RegExp`                                       | `/^\\d$/`                                                | Per-character allowlist used during typing/paste sanitization. |\n| `inputMode`      | `string`                                       | `'numeric'`                                             | Sets the native input's `inputmode` for mobile keyboard hints. |\n| `ariaLabel`      | `string`                                       | `'One Time Password'`                                   | Accessible label for the OTP group.                            |\n| `status`         | `OtpStatus` (`'idle' \\| 'success' \\| 'error'`) | `'idle'`                                                | Visual + screen reader status state.                           |\n| `statusMessages` | `OtpStatusMessages`                            | `{ success: 'Code verified.', error: 'Invalid code.' }` | Custom screen reader status messages.                          |\n\n### Outputs\n\n| Output        | Payload           | Description                                                   |\n| ------------- | ----------------- | ------------------------------------------------------------- |\n| `otpChange`   | `OtpChangeEvent`  | Fires whenever value changes (`{ value, isComplete }`).       |\n| `otpComplete` | `string`          | Fires when value reaches `length`.                            |\n| `otpInvalid`  | `OtpInvalidEvent` | Fires when input is rejected (`too-long` or `char-rejected`). |\n\nExported types:\n\n- `OtpStatus`\n- `OtpStatusMessages`\n- `OtpChangeEvent`\n- `OtpInvalidEvent`\n\n### Public method\n\n`NgxOtpInputComponent` exposes:\n\n- `reset(): void` - clears the current value and moves the caret to index `0`.\n\nExample:\n\n```typescript\nimport { Component, ViewChild } from '@angular/core';\nimport { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';\nimport { NgxOtpInputComponent } from 'ngx-otp-input';\n\n@Component({\n  selector: 'app-root',\n  standalone: true,\n  imports: [ReactiveFormsModule, NgxOtpInputComponent],\n  template: `\n    \u003cform [formGroup]=\"form\"\u003e\n      \u003cngx-otp-input\n        #otpInput\n        formControlName=\"otp\"\n      \u003e\u003c/ngx-otp-input\u003e\n    \u003c/form\u003e\n    \u003cbutton\n      type=\"button\"\n      (click)=\"resetOtp()\"\n    \u003e\n      Reset\n    \u003c/button\u003e\n  `,\n})\nexport class AppComponent {\n  @ViewChild('otpInput') otpInput?: NgxOtpInputComponent;\n\n  form = new FormGroup({\n    otp: new FormControl('', { nonNullable: true }),\n  });\n\n  resetOtp(): void {\n    this.otpInput?.reset();\n  }\n}\n```\n\n## Styling guide\n\nThe component renders a native input plus a visual boxed UI. These classes are available:\n\n| Class                    | Description                                 |\n| ------------------------ | ------------------------------------------- |\n| `ngx-otp-input-root`     | Root wrapper (`role=\"group\"`).              |\n| `ngx-otp-input-native`   | Hidden-but-accessible native input element. |\n| `ngx-otp-input-form`     | Visual boxes container.                     |\n| `ngx-otp-input-box`      | Individual box.                             |\n| `ngx-otp-input-active`   | Active box based on caret position.         |\n| `ngx-otp-input-disabled` | Disabled visual state.                      |\n| `ngx-otp-input-filled`   | Box has a character.                        |\n| `ngx-otp-input-success`  | Success status style.                       |\n| `ngx-otp-input-failed`   | Error status style (`status === 'error'`).  |\n| `ngx-otp-input-status`   | Screen reader status message container.     |\n\nOverride styles from a global stylesheet (for example, `src/styles.css`):\n\n```scss\nngx-otp-input {\n  .ngx-otp-input-box {\n    border-radius: 10px;\n    font-weight: 600;\n  }\n\n  .ngx-otp-input-box.ngx-otp-input-active {\n    outline: 2px solid #4f46e5;\n  }\n}\n```\n\n## Accessibility behavior\n\n- Uses one real input for robust keyboard, paste, and autofill behavior.\n- Uses `autocomplete=\"one-time-code\"` to improve OTP autofill.\n- Announces status messages with an `aria-live` region.\n- Marks invalid state via `aria-invalid`.\n- Keeps visual boxes `aria-hidden` to avoid duplicate announcements.\n\n## Validation and sanitization behavior\n\n- Input is truncated to `length`.\n- Characters not matching `charPattern` are discarded.\n- Rejected input emits `otpInvalid`.\n- Valid changes emit `otpChange`; completion emits `otpComplete`.\n\n## Migration notes (v1 -\u003e v2)\n\nVersion `2.x` introduces a new CVA-first API:\n\n- `options` input removed. Use explicit inputs like `[length]`, `[mask]`, and `[charPattern]`.\n- direct `otp` input removed. Use Angular Forms (`formControl`, `formControlName`, or `ngModel`).\n- `otpChange` payload changed from `string[]` to `{ value: string; isComplete: boolean }`.\n- status values changed to `'idle' | 'success' | 'error'`.\n\n## Repository docs\n\n- Library package readme: `projects/ngx-otp-input/README.md`\n- Documentation archive: `docs/README.md`\n- Legacy `v1.1.4` docs: `docs/v1.1.4/README.md`\n- Changelog: `CHANGELOG.md`\n- Contributing guide: `CONTRIBUTING.md`\n- Code of conduct: `CODE_OF_CONDUCT.md`\n\n## License\n\nMIT. See `LICENSE`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpkovzz%2Fngx-otp-input","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpkovzz%2Fngx-otp-input","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpkovzz%2Fngx-otp-input/lists"}