Forms
PinInput
A row of single-character boxes for entering a PIN or verification code.
<UiPinInput />Model value
modelValue is an array with one entry per cell, bound two-way. The complete event fires with the joined value once the last cell is filled, which is usually what you actually submit.
Not completed yet
Length
length sets how many cells. Six is the usual one-time-code length; four suits a PIN.
Type
type restricts what can be entered. number allows digits only and brings up the numeric keypad on a phone, which is what a one-time code wants.
Mask
mask hides entered characters like a password field.
mask visually hides entered characters (like a password) but type="number" still restricts what can be typed regardless of masking.
Disabled
disabled disables all the input cells.
Variant
variant picks between the ringed outline cells on the page background and the filled, tinted soft ones with no ring.
OTP
otp hints the platform's autofill to offer the SMS code it just received, so the whole field can be filled in one tap rather than digit by digit.
otp sets autocomplete="one-time-code" on the inputs so mobile browsers/password managers can autofill an SMS code — purely a UX hint, doesn't change validation.
Wrapped in FormField
API Reference
Generated from the component's source — props, slots and emits as the component actually declares them.
Props
Emits
update:modelValue[value: string[]]complete[value: string]