InputOtp
One-time password input component, ideal for verification codes and OTP entry. Supports auto-advance, paste, backspace, and multiple visual styles.
Basic Usage
Default 6-digit input with auto-advance to next field.
vue
<TInputOtp v-model="value" />Custom Length
Set the number of fields via :length.
vue
<TInputOtp v-model="value" :length="4" />Visual Styles
Three styles available: outlined (default), filled, and underlined.
vue
<TInputOtp :length="4" type="filled" />
<TInputOtp :length="4" type="underlined" />Sizes
Three sizes available: sm, md (default), and lg.
vue
<TInputOtp :length="4" size="sm" />
<TInputOtp :length="4" size="lg" />Disabled & Readonly
vue
<TInputOtp :length="4" disabled />
<TInputOtp :length="4" readonly model-value="1234" />Mask Mode
Set mask to hide the input characters.
vue
<TInputOtp :length="4" mask />Separator
Set separator to display a divider every 3 digits.
vue
<TInputOtp :length="6" separator />Finish Event
The @finish event fires when all fields are filled.
vue
<TInputOtp :length="4" @finish="handleFinish" />API
Props
| Prop | Type | Default | Description |
|---|---|---|---|
v-model | string | '' | OTP value |
length | number | 6 | Number of fields |
type | 'outlined' | 'filled' | 'underlined' | 'outlined' | Visual style |
size | 'sm' | 'md' | 'lg' | 'md' | Size |
disabled | boolean | false | Disabled state |
readonly | boolean | false | Readonly state |
mask | boolean | false | Password mode |
separator | boolean | false | Show separator |
validator | (char, index) => boolean | — | Character validator |
inputmode | 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search' | 'numeric' | Input keyboard mode |
Events
| Event | Parameters | Description |
|---|---|---|
update:model-value | value: string | Value updated |
change | value: string | Triggered on blur |
finish | value: string | All fields filled |
focus | event: FocusEvent | Input focused |
blur | event: FocusEvent | Input blurred |
Expose
| Method | Description |
|---|---|
focus(index?) | Focus a specific field |
blur() | Blur the input |
inputRefs | Input element array |