InputOTP

One-time code cells

For a code the user is sent — by SMS, email or an authenticator app — and types back once. Not for a password or a PIN they choose; that is PasswordInput.

Basic

code: — · try 123456 · paste works

<script setup lang="ts">
import { ref } from "vue";
import { BlessInputOTP, useToast } from "blessing-ui";
const otp = ref("");
const bad = ref(false);
const { toast } = useToast();
function check(code: string) {
  bad.value = code !== "123456";
  toast(
    bad.value ? { title: "Wrong code", color: "danger" } : { title: "Verified", color: "success" },
  );
}
</script>

<template>
  <div class="col" style="max-width: none">
    <BlessInputOTP v-model="otp" :separators="[3]" :invalid="bad" @complete="check" />
    <small>code: {{ otp || "—" }} · try 123456 · paste works</small>
    <BlessInputOTP :length="4" :numeric="false" masked label="Recovery code" />
    <BlessInputOTP :length="4" model-value="42" disabled />
  </div>
</template>

• @complete fires when every cell is filled, so the form can submit itself.
• Paste anywhere and SMS autofill (the first cell is autocomplete="one-time-code") spread across every cell.
• Inside a Field the label points at the first cell and the field's error reaches every cell. name submits the joined code with the form.
• separators splits a long code where the sender does (123 456); masked hides it from people nearby; numeric=false for letter codes.

Usage

import { BlessInputOTP } from "blessing-ui";

API

Props

Name	Type	Default	Description
id	string	—	id of the first cell; inside a BlessField it takes the field's
name	string	—	submitted with the form as the joined code
length	number	6
numeric	boolean	true	digits only (inputmode numeric) or any char
separators	number[]	[]	indexes after which to render a separator
disabled	boolean	—
invalid	boolean	—
label	string	—
masked	boolean	—
modelValue	string	""

Events

Name	Payload	Description
update:modelValue	[value: string]
complete	[code: string]