Input OTP
One-time password input with per-character slots. Used for 2FA, email verification, and sign-in codes. Built on vue-input-otp.
Default
Six-digit OTP.
With separator
Split slots into groups for readability.
Controlled
Bind v-model and read the value back as it's typed.
Entered: nothing yet
API Reference
Props, events, and slots for each sub-component.
InputOTP
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| modelValue | string | — | Code value. Supports v-model. |
| maxlength | number | 6 | Total number of slots. |
| pattern | string | — | Regex pattern for allowed characters. |
| disabled | boolean | false | Disable input. |
Events
| Event | Description |
|---|---|
| complete | Fires when all slots are filled with valid characters. |
| update:modelValue | Fires as characters are entered. Enables v-model. |
Slots
| Slot | Description |
|---|---|
| default | Scoped slot exposing { slots } so you can render the groups and per-slot state. |
InputOTPSlot
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| index | number | — | Position of this slot within the code (0-based). |
InputOTPGroup / InputOTPSeparator
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| class | string | — | Group wraps a run of slots; Separator draws a divider (default slot overrides the dash). |