OtpInput

OTP (One-Time Password) input component for verification codes. Supports multiple visual variants, configurable grouping, flexible validation, and auto-submit. WCAG compliant with full keyboard and screen reader support.

Usage

Basic

6-digit code

<SuOtpInput :length="6" />

Visual variants

boxes / underline / seamless

Boxes (default)

Underline

Seamless

<SuOtpInput variant="boxes" :length="6" />
<SuOtpInput variant="underline" :length="6" />
<SuOtpInput variant="seamless" :length="6" />

Sizes

sm / md / lg

<SuOtpInput size="sm" :length="6" />
<SuOtpInput size="md" :length="6" />
<SuOtpInput size="lg" :length="6" />

Grouping

Configurable grouping

6 digits as [3, 3]

6 digits as [2, 2, 2]

8 digits as [4, 4]

<SuOtpInput :length="6" :grouping="[3, 3]" separator="-" />
<SuOtpInput :length="6" :grouping="[2, 2, 2]" separator="·" />
<SuOtpInput :length="8" :grouping="[4, 4]" separator="-" />

Input types

Numeric / Alphanumeric / Alphabetic

Numeric (default)

Alphanumeric

Alphabetic

<SuOtpInput inputType="numeric" :length="6" />
<SuOtpInput inputType="alphanumeric" :length="6" />
<SuOtpInput inputType="alphabetic" :length="6" />

Custom validation

Hexadecimal only

<!-- Via regex pattern -->
<SuOtpInput :length="6" pattern="^[0-9a-fA-F]$" inputType="alphanumeric" />

<!-- Via validate function -->
<SuOtpInput :length="6" :validate="(char) => /^[0-9a-fA-F]$/.test(char)" />

Masked

Hidden characters

<SuOtpInput :length="6" :masked="true" />

Validation states

error / success / warning

<SuOtpInput state="error" :length="6" />
<SuOtpInput state="success" :length="6" />
<SuOtpInput state="warning" :length="6" />

Auto-submit

<SuOtpInput :length="6" :autoSubmit="true" @complete="handleComplete" />

<script setup>
const handleComplete = (code) => {
  console.log('Complete code:', code)
  // Verify the code...
}
</script>

With FormField (OtpInputField)

Label, message, and state

<SuOtpInputField
  label="Verification code"
  message="Enter the code sent via SMS"
  :length="6"
  :grouping="[3, 3]"
/>

4 digits (SMS code)

Short code

<SuOtpInput :length="4" placeholder="0" />

API

Props (OtpInput)

Prop	Type	Default	Description
modelValue	string	''	OTP code value (v-model)
length	number	6	Number of characters
variant	'boxes' | 'underline' | 'seamless'	'boxes'	Visual variant
inputType	'numeric' | 'alphanumeric' | 'alphabetic'	'numeric'	Accepted character type
pattern	string	—	Custom regex pattern (overrides inputType)
validate	(char: string, index: number) => boolean	—	Per-character validation function
size	'sm' | 'md' | 'lg'	'md'	Size
state	State	'default'	Validation state
disabled	boolean	false	Disabled
readonly	boolean	false	Read-only
required	boolean	false	Required
masked	boolean	false	Mask characters
grouping	number[]	—	Grouping pattern (e.g., [3, 3])
separator	string	'-'	Separator character between groups
autoSubmit	boolean	false	Emit complete when all fields are filled
placeholder	string	''	Placeholder per field
autoFocus	boolean	false	Auto-focus on mount

Props (OtpInputField)

Inherits from FormFieldProps + OtpInputProps. Additional props:

Prop	Type	Default	Description
label	string	—	Field label
message	string	—	Help or error message
fieldId	string	—	Custom ID
requiredText	string	'requis'	Required indicator text

Events

Event	Payload	Description
update:modelValue	string	v-model update
complete	string	All fields are filled (if autoSubmit)
change	string	Value changed
focus	FocusEvent, number	Focus on a field (with index)
blur	FocusEvent, number	Blur from a field (with index)

Slots

Slot	Description
separator	Custom separator content between groups

Exposed methods

Method	Description
focus()	Focus the first field
clear()	Clear all fields and focus the first one

Accessibility

• role="group" with descriptive aria-label on the container
• Each field has an individual aria-label ("Character X of Y")
• aria-live="polite" region to announce progress
• Keyboard navigation: left/right arrows, Home, End, Backspace, Delete
• autocomplete="one-time-code" for mobile auto-fill
• inputmode="numeric" to show numeric keyboard on mobile
• Paste support with automatic character distribution
• Supports prefers-contrast: high and prefers-reduced-motion: reduce