Important

The library is under active development. Some features may not be fully implemented or may change in future versions.

OTP Input Component

otp-input-demo.mp4

How it works

Unlike other libraries, this component does not render inputs or enforce styles. It simply adds OTP interaction logic to your existing fields.

To use it, just wrap your input fields inside the custom element:

+<otp-input>
  <input type="text" maxlength="1" inputmode="numeric" aria-label="Please enter OTP character 1" />
  <input type="text" maxlength="1" inputmode="numeric" aria-label="Please enter OTP character 2" />
  <input type="text" maxlength="1" inputmode="numeric" aria-label="Please enter OTP character 3" />
  <input type="text" maxlength="1" inputmode="numeric" aria-label="Please enter OTP character 4" />
+</otp-input>

You keep full control over the markup and styling, the component only adds the interaction logic.

Usage

pnpm add @moaqzdev/otp-input

Import the component in your JavaScript entry point:

+ // Optional: Import a theme
+ // import "@moaqzdev/otp-input/themes/default";
+import "@moaqzdev/otp-input";

Use it in your HTML:

+<otp-input>
  <input ... aria-label="Please enter OTP character 1" />
  <input ... aria-label="Please enter OTP character 2" />
  ...
+</otp-input>

License

Published under the MIT license.