input-otp

Input OTP

Lets the user type or paste a one-time code across several slots, such as the code a sign-in email sends.

States: Default, Focus, Disabled, Invalid

Parts

PartFileDoes
InputOtpInputOtp.vueLets the user enter a one-time code across several slots.
InputOTPGroupInputOTPGroup.vueGroups neighbouring slots of the one-time code.
InputOTPSeparatorInputOTPSeparator.vueSeparates groups of slots in the one-time code.
InputOTPSlotInputOTPSlot.vueShows one character of the one-time code.

Anatomy

<InputOtp>
  <InputOTPGroup>
    <InputOTPSlot />
  </InputOTPGroup>
  <InputOTPSeparator />
</InputOtp>

Styling

PartRecipe
InputOtpinput-otp
InputOTPGroupinput-otp-group
InputOTPSeparatorinput-otp-separator
InputOTPSlotinput-otp-slot
InputOTPSlotinput-otp-caret

Install

Writes 5 files into components/ui/input-otp/. For agents, npx @frontic/ui docs input-otp prints this reference as markdown; the MCP server serves the same.

Installs with it
use-field-control
npm packages
@lucide/vue
@vueuse/core
reka-ui
vue-input-otp

API reference

InputOtp InputOtp.vue

Lets the user enter a one-time code across several slots.

PropTypeDefault
maxlength*number—
textAlign'center' | 'right' | 'left'—
inputmode'numeric' | 'text'—
containerClassstring—
pushPasswordManagerStrategy'none' | 'increase-width'—
noScriptCssFallbackstring | null—
defaultValueany—
pasteTransformer((pasted: string | undefined) => string)—
noncestring—
acceptstring—
altstring—
autocompletestring—
autofocusbooleanfalse
captureboolean | 'user' | 'environment'—
checkedboolean | any[] | Set<any>—
crossoriginstring—
disabledbooleanfalse
enterKeyHint'done' | 'search' | 'enter' | 'go' | 'next' | 'previous' | 'send'—
formstring—
formactionstring—
formenctypestring—
formmethodstring—
formnovalidatebooleanfalse
formtargetstring—
heightnumber—
indeterminatebooleanfalse
liststring—
maxnumber—
minnumber—
minlengthnumber—
multiplebooleanfalse
namestring—
patternstring—
placeholderstring—
readonlybooleanfalse
requiredbooleanfalse
sizenumber—
spellcheckbooleanfalse
srcstring—
stepnumber—
typestring—
valueany—
widthnumber—
modelValuestring—
classClassValue—
EventPayload
update:modelValuevalue: string
inputvalue: string
selecte: Event
focuse: FocusEvent
changee: Event
blure: FocusEvent
completevalue: string
mouseovere: MouseEvent
mouseleavee: MouseEvent
pastee: ClipboardEvent
SlotSlot props
default{ slots: SlotProps[]; isFocused: boolean; isHovering: boolean; }
Recipe input-otpSets
base: input-otp 3 properties
disabledshared state 1 property

InputOTPGroup InputOTPGroup.vue

InputOTPSeparator InputOTPSeparator.vue

InputOTPSlot InputOTPSlot.vue

Example
State