OTP / PIN Input — Veritheme

Default

Standard 6-digit verification code input.

html

Enter the 6-digit code sent to your email

<div class="vt-flex vt-items-center vt-gap-2">
  <input type="text" inputmode="numeric" maxlength="1" class="vt-otp-cell" />
  <!-- ...repeat for each digit -->
</div>
<p class="vt-text-sm vt-text-mains-quaternary">Enter the 6-digit code</p>

4-Digit

Shorter 4-digit verification code input.

html

Enter your 4-digit code

<div class="vt-flex vt-items-center vt-gap-2">
  <input type="text" inputmode="numeric" maxlength="1" class="vt-otp-cell" />
  <!-- ...repeat for 4 digits -->
</div>
<p class="vt-text-sm vt-text-mains-quaternary">Enter your 4-digit code</p>

With Separator

6-digit code split into two groups of three with a dash separator.

html

–

<div class="vt-flex vt-items-center vt-gap-2">
  <input type="text" inputmode="numeric" maxlength="1" class="vt-otp-cell" />
  <!-- ...3 inputs -->
  <span class="vt-text-xl vt-text-mains-quaternary vt-font-mono vt-px-1">&ndash;</span>
  <input type="text" inputmode="numeric" maxlength="1" class="vt-otp-cell" />
  <!-- ...3 inputs -->
</div>

Masked

Input with masked values for secure PIN entry.

html

●

PIN is hidden for security

<div class="vt-flex vt-items-center vt-gap-3">
  <div class="vt-otp-cell vt-flex vt-items-center vt-justify-center vt-text-xl">&#9679;</div>
  <!-- ...repeat for each digit -->
</div>

With Label

Input with a descriptive label above.

html

Enter your PIN

4-digit numeric code

<div class="vt-flex vt-flex-col vt-items-center vt-gap-3">
  <label class="vt-text-sm vt-font-medium">Enter your PIN</label>
  <div class="vt-flex vt-items-center vt-gap-3">
    <input type="text" inputmode="numeric" maxlength="1" class="vt-otp-cell" />
    <!-- ...repeat for each digit -->
  </div>
  <p class="vt-text-sm vt-text-mains-quaternary">4-digit numeric code</p>
</div>

Sizes

Small and large size variants.

html

Small

Large

<!-- Small -->
<div class="vt-flex vt-items-center vt-gap-2">
  <input type="text" inputmode="numeric" maxlength="1" class="vt-otp-cell vt-w-8 vt-h-10 vt-text-sm" />
  <!-- ...repeat -->
</div>

<!-- Large -->
<div class="vt-flex vt-items-center vt-gap-3">
  <input type="text" inputmode="numeric" maxlength="1" class="vt-otp-cell vt-w-12 vt-h-14 vt-text-xl" />
  <!-- ...repeat -->
</div>

Filled State

Input with values already entered.

html

Code entered successfully

<div class="vt-flex vt-items-center vt-gap-2">
  <input type="text" inputmode="numeric" maxlength="1" value="4" readonly class="vt-otp-cell" />
  <!-- ...repeat with values -->
</div>
<p class="vt-text-sm vt-text-mains-quaternary">Code entered successfully</p>

Error State

Displays validation error when the entered code is incorrect.

html

Invalid verification code. Please try again.

<div class="vt-flex vt-items-center vt-gap-2">
  <input type="text" inputmode="numeric" maxlength="1" value="7" readonly class="vt-otp-cell vt-border-error-primary" />
  <!-- ...repeat with error state -->
</div>
<p class="vt-text-sm vt-text-error-primary">Invalid verification code. Please try again.</p>

Success State

Input showing successful validation.

html

●

PIN verified successfully

<div class="vt-flex vt-items-center vt-gap-3">
  <div class="vt-otp-cell vt-flex vt-items-center vt-justify-center vt-text-xl vt-border-success-primary">&#9679;</div>
  <!-- ...repeat -->
</div>
<div class="vt-flex vt-items-center vt-gap-1.5 vt-text-info-primary">
  <svg class="vt-w-4 vt-h-4">...</svg>
  <span class="vt-text-sm vt-font-medium">PIN verified successfully</span>
</div>

API Reference

All utility classes available for the OTP Input component.

Class	Type	Description
`vt-w-10 vt-h-12`	Size	Default input box size (40×48px)
`vt-w-8 vt-h-10`	Size	Small input box size (32×40px)
`vt-w-12 vt-h-14`	Size	Large input box size (48×56px)
`vt-text-center vt-font-mono`	Text	Centered monospace text for digits
`vt-border-error-primary`	State	Error state border color
`vt-border-success-primary`	State	Success state border color
`inputmode="numeric"`	Attribute	Mobile keyboard shows numeric keypad
`maxlength="1"`	Attribute	Restricts input to single character

Accessibility

Keyboard and screen reader support.

Feature	Details
Auto-advance	Input automatically moves focus to next box when filled
Backspace	Backspace moves focus to previous box when current is empty
Paste Support	Pasting full code distributes digits across all inputs
ARIA Label	Use aria-label on each input: "Digit 1 of 6", "Digit 2 of 6", etc.
Error Feedback	Use aria-invalid and role="alert" for error messages