OTP / PIN Input

Verification code input with individual character boxes. Use for OTP codes, PINs, and other segmented numeric inputs. Supports masked mode for secure entry.

Default

Standard 6-digit verification code input.

html

Enter the 6-digit code sent to your email

<div class="uc-flex uc-items-center uc-gap-2">
  <input type="text" inputmode="numeric" maxlength="1" class="uc-w-10 uc-h-12 uc-text-center uc-font-mono uc-rounded-lg uc-border" />
  <!-- ...repeat for each digit -->
</div>
<p class="uc-text-sm uc-text-fg-disabled">Enter the 6-digit code</p>

4-Digit

Shorter 4-digit verification code input.

html

Enter your 4-digit code

<div class="uc-flex uc-items-center uc-gap-2">
  <input type="text" inputmode="numeric" maxlength="1" class="uc-w-10 uc-h-12 uc-text-center uc-font-mono uc-rounded-lg uc-border" />
  <!-- ...repeat for 4 digits -->
</div>
<p class="uc-text-sm uc-text-fg-disabled">Enter your 4-digit code</p>

With Separator

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

html
– 
<div class="uc-flex uc-items-center uc-gap-2">
  <input type="text" inputmode="numeric" maxlength="1" class="uc-w-10 uc-h-12 uc-text-center uc-font-mono uc-rounded-lg uc-border" />
  <!-- ...3 inputs -->
  <span class="uc-text-xl uc-text-fg-disabled uc-font-mono uc-px-1">&ndash;</span>
  <input type="text" inputmode="numeric" maxlength="1" class="uc-w-10 uc-h-12 uc-text-center uc-font-mono uc-rounded-lg uc-border" />
  <!-- ...3 inputs -->
</div>

Masked

Input with masked values for secure PIN entry.

html
●
●
●
●

PIN is hidden for security

<div class="uc-flex uc-items-center uc-gap-3">
  <div class="uc-w-10 uc-h-12 uc-flex uc-items-center uc-justify-center uc-font-mono uc-text-xl uc-rounded-lg uc-border">&#9679;</div>
  <!-- ...repeat for each digit -->
</div>

With Label

Input with a descriptive label above.

html

4-digit numeric code

<div class="uc-flex uc-flex-col uc-items-center uc-gap-3">
  <label class="uc-text-sm uc-font-medium">Enter your PIN</label>
  <div class="uc-flex uc-items-center uc-gap-3">
    <input type="text" inputmode="numeric" maxlength="1" class="uc-w-10 uc-h-12 uc-text-center uc-font-mono uc-rounded-lg uc-border" />
    <!-- ...repeat for each digit -->
  </div>
  <p class="uc-text-sm uc-text-fg-disabled">4-digit numeric code</p>
</div>

Sizes

Small and large size variants.

html

Small

Large

<!-- Small -->
<div class="uc-flex uc-items-center uc-gap-2">
  <input type="text" inputmode="numeric" maxlength="1" class="uc-w-8 uc-h-10 uc-text-center uc-font-mono uc-text-sm uc-rounded-lg uc-border" />
  <!-- ...repeat -->
</div>

<!-- Large -->
<div class="uc-flex uc-items-center uc-gap-3">
  <input type="text" inputmode="numeric" maxlength="1" class="uc-w-12 uc-h-14 uc-text-center uc-font-mono uc-text-xl uc-rounded-lg uc-border" />
  <!-- ...repeat -->
</div>

Filled State

Input with values already entered.

html

Code entered successfully

<div class="uc-flex uc-items-center uc-gap-2">
  <input type="text" inputmode="numeric" maxlength="1" value="4" readonly class="uc-w-10 uc-h-12 uc-text-center uc-font-mono uc-rounded-lg uc-border" />
  <!-- ...repeat with values -->
</div>
<p class="uc-text-sm uc-text-fg-disabled">Code entered successfully</p>

Error State

Displays validation error when the entered code is incorrect.

html

Invalid verification code. Please try again.

<div class="uc-flex uc-items-center uc-gap-2">
  <input type="text" inputmode="numeric" maxlength="1" value="7" readonly class="uc-w-10 uc-h-12 uc-text-center uc-font-mono uc-rounded-lg uc-border uc-border-accents-red uc-ring-accents-red" />
  <!-- ...repeat with error state -->
</div>
<p class="uc-text-sm uc-text-accents-red">Invalid verification code. Please try again.</p>

Success State

Input showing successful validation.

html
●
●
●
●
PIN verified successfully 
<div class="uc-flex uc-items-center uc-gap-3">
  <div class="uc-w-10 uc-h-12 uc-flex uc-items-center uc-justify-center uc-font-mono uc-text-xl uc-rounded-lg uc-border uc-border-accents-green">&#9679;</div>
  <!-- ...repeat -->
</div>
<div class="uc-flex uc-items-center uc-gap-1.5 uc-text-accents-blue">
  <svg class="uc-w-4 uc-h-4">...</svg>
  <span class="uc-text-sm uc-font-medium">PIN verified successfully</span>
</div>

API Reference

All utility classes available for the OTP Input component.

Class Type Description
uc-w-10 uc-h-12 Size Default input box size (40×48px)
uc-w-8 uc-h-10 Size Small input box size (32×40px)
uc-w-12 uc-h-14 Size Large input box size (48×56px)
uc-text-center uc-font-mono Text Centered monospace text for digits
uc-border-accents-red State Error state border color
uc-border-accents-green 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