Playground

Turn the options and watch it change. The code below changes with it, in whichever framework you are using — copy it and you have what is on the screen.

Live

Length

Type

Mask Show dots rather than the digits.

import { createOtpInput } from '@devix-labs/otp-input';
import '@devix-labs/otp-input/styles.css';

createOtpInput(document.querySelector('#target'), {
  length: 6,
  type: 'numeric',
  mask: false
});

import { OtpInput } from '@devix-labs/otp-input/react';
import '@devix-labs/otp-input/styles.css';

<OtpInput
  length={6}
  type="numeric"
/>

<script setup>
import { OtpInput } from '@devix-labs/otp-input/vue';
import '@devix-labs/otp-input/styles.css';
</script>

<template>
  <OtpInput
  :length="6"
  type="numeric"
/>
</template>

<script>
  import { otpInput } from '@devix-labs/otp-input/svelte';
  import '@devix-labs/otp-input/styles.css';
</script>

<div use:otpInput={{
  length: 6,
  type: 'numeric',
  mask: false
}} />

Every option here is in the documentation, along with the ones that are not worth a control.