Toggle Sidebar B
AppearanceLight & dark mode D

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.

Replay preview

With separator

Split slots into groups for readability.

Replay preview

Controlled

Bind v-model and read the value back as it's typed.

Replay preview

Entered: nothing yet

Digits only

Restrict input to digits with the pattern prop (REGEXP_ONLY_DIGITS).

Replay preview

Alphanumeric

Allow letters and digits via REGEXP_ONLY_DIGITS_AND_CHARS.

Replay preview

Four digits

A shorter code by lowering maxlength to 4.

Replay preview

Disabled

Prevent interaction with the disabled prop.

Replay preview

Invalid

Flag an error state with aria-invalid on the slots.

Replay preview
1
2
3

That code is incorrect.

Form

Pair with a Label and submit Button inside a form.

Replay preview

API Reference

InputOTP

PropTypeDefaultDescription
modelValuestringCode value. Supports v-model.
maxlengthnumber6Total number of slots.
patternstringRegex pattern for allowed characters.
disabledbooleanfalseDisable input.
EventDescription
completeFires when all slots are filled with valid characters.
update:modelValueFires as characters are entered. Enables v-model.
SlotDescription
defaultScoped slot exposing { slots } so you can render the groups and per-slot state.

InputOTPSlot

PropTypeDefaultDescription
indexnumberPosition of this slot within the code (0-based).

InputOTPGroup / InputOTPSeparator

PropTypeDefaultDescription
classstringGroup wraps a run of slots; Separator draws a divider (default slot overrides the dash).