OTP Input

This is a Web Component built with StencilJS that allows you to render a nice OTP Input for your users. I built this because a lot of the examples I found either were locked to one framework or only fit specific use cases. THe goal of this component is to work with any Frameworks such as Angular, React, View, or just plain ol' Javascript.

Getting Started

To start building a new web component using Stencil, clone this repo to a new directory:

git clone https://github.com/ionic-team/stencil-component-starter.git my-component
cd my-component
git remote rm origin

and run:

npm install
npm start

Developing

To build the component for production, run:

npm run build

To run the unit tests for the components, run:

npm test

Need help? Check out our docs here.

Using this component

Angular

• Run npm install universal-otp-component --save

• In main.ts, add the following lines

  import { defineCustomElements } from "universal-otp-input/loader";
  
  defineCustomElements(window);

• In app.module.ts, add schemas: [CUSTOM_ELEMENTS_SCHEMA] to your @NgModule configuration.

• In your template, you can reference the define your component like this

  <otp-input
    character-count="6"
    (codeChanged)="codeChanged($event.detail)"
  ></otp-input>