Modal OTP

Fetch pattern JSON: curl https://webspire.de/patterns/modal/otp.json

otp.html

<div class="flex min-h-64 items-center justify-center">
  <button type="button" onclick="this.nextElementSibling.hidden=false" class="rounded-lg bg-[var(--ws-modal-action-bg)] px-5 py-2.5 text-sm font-medium text-[var(--ws-modal-action-text)] shadow transition hover:opacity-90">Verify Identity</button>
  <div class="ws-modal fixed inset-0 z-50 flex items-center justify-center bg-[var(--ws-modal-overlay)] backdrop-blur-sm" hidden>
    <div role="dialog" aria-modal="true" aria-labelledby="modal-otp-title" aria-describedby="modal-otp-desc" class="mx-4 w-full max-w-sm rounded-2xl bg-[var(--ws-modal-bg)] p-6 shadow-xl">
      <!-- Close button -->
      <div class="flex justify-end">
        <button type="button" onclick="this.closest('.ws-modal').hidden=true" class="flex h-8 w-8 items-center justify-center rounded-lg text-[var(--ws-modal-text-soft)] transition hover:bg-white/5" aria-label="Close">
          <svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/>
          </svg>
        </button>
      </div>

      <div class="text-center">
        <h2 id="modal-otp-title" class="text-lg font-semibold text-[var(--ws-modal-text)]">Enter verification code</h2>
        <p id="modal-otp-desc" class="mt-2 text-sm text-[var(--ws-modal-text-soft)]">We sent a 6-digit code to your email address.</p>
      </div>

      <!-- OTP inputs -->
      <div class="mt-6 flex justify-center gap-2" role="group" aria-label="Verification code">
        <input type="text" maxlength="1" inputmode="numeric" pattern="[0-9]" class="h-12 w-12 rounded-lg border border-[var(--ws-modal-border)] bg-transparent text-center text-lg font-semibold text-[var(--ws-modal-text)] transition focus:border-[var(--ws-color-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--ws-color-primary)]/20" aria-label="Digit 1">
        <input type="text" maxlength="1" inputmode="numeric" pattern="[0-9]" class="h-12 w-12 rounded-lg border border-[var(--ws-modal-border)] bg-transparent text-center text-lg font-semibold text-[var(--ws-modal-text)] transition focus:border-[var(--ws-color-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--ws-color-primary)]/20" aria-label="Digit 2">
        <input type="text" maxlength="1" inputmode="numeric" pattern="[0-9]" class="h-12 w-12 rounded-lg border border-[var(--ws-modal-border)] bg-transparent text-center text-lg font-semibold text-[var(--ws-modal-text)] transition focus:border-[var(--ws-color-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--ws-color-primary)]/20" aria-label="Digit 3">
        <input type="text" maxlength="1" inputmode="numeric" pattern="[0-9]" class="h-12 w-12 rounded-lg border border-[var(--ws-modal-border)] bg-transparent text-center text-lg font-semibold text-[var(--ws-modal-text)] transition focus:border-[var(--ws-color-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--ws-color-primary)]/20" aria-label="Digit 4">
        <input type="text" maxlength="1" inputmode="numeric" pattern="[0-9]" class="h-12 w-12 rounded-lg border border-[var(--ws-modal-border)] bg-transparent text-center text-lg font-semibold text-[var(--ws-modal-text)] transition focus:border-[var(--ws-color-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--ws-color-primary)]/20" aria-label="Digit 5">
        <input type="text" maxlength="1" inputmode="numeric" pattern="[0-9]" class="h-12 w-12 rounded-lg border border-[var(--ws-modal-border)] bg-transparent text-center text-lg font-semibold text-[var(--ws-modal-text)] transition focus:border-[var(--ws-color-primary)] focus:outline-none focus:ring-2 focus:ring-[var(--ws-color-primary)]/20" aria-label="Digit 6">
      </div>

      <!-- Verify button -->
      <button type="button" onclick="this.closest('.ws-modal').hidden=true" class="mt-6 w-full rounded-lg bg-[var(--ws-modal-action-bg)] px-4 py-2.5 text-sm font-medium text-[var(--ws-modal-action-text)] transition hover:opacity-90">Verify</button>

      <!-- Resend link -->
      <p class="mt-4 text-center text-sm text-[var(--ws-modal-text-soft)]">
        Didn't receive a code? <a href="#" class="font-medium text-[var(--ws-color-primary)] hover:underline">Resend code</a>
      </p>
    </div>
  </div>
</div>

Details

Family

modal

Tier

enhanced

Kind

component

Extends

modal/base

Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste Requires JS

Stable Published

modaldialogotpverificationcodeauthentication2fa

Slots

Name	Required	Description
title	Yes	Verification heading text.
body	Yes	Instruction subtitle about the sent code.
inputs	Yes	Six single-digit input boxes.
action	Yes	Verify button and resend code link.

OTP verification modal with title, subtitle, six individual digit input boxes (each 12x12 with centered text), a full-width verify button, and a resend code link. Uses inputmode="numeric" for mobile keyboard optimization.