InputOTP

Overview

A styled OTP (one-time password) input built on vue-input-otp's OTPInput, with slot forwarding for custom slot rendering.

Theme entry: InputOTP

Props

Name	Type	Required	Default	Description
themeOverride	String|Object|Array		null	A partial theme object merged with the component's default theme; accepts a class string, class array, or theme object.
class	string|array|object		undefined	Additional CSS classes to apply to the container element.
modelValue	string		undefined	The controlled value (used with v-model).
maxlength	number	yes		The maximum length (number of OTP slots). Required.
textAlign	string		undefined	Text alignment of characters within slots.
inputmode	string		undefined	Input mode for the underlying input element.
pushPasswordManagerStrategy	string		undefined	Strategy for handling password manager icon placement.
noScriptCssFallback	string		undefined	CSS fallback string injected via noscript for browsers without JS.
defaultValue	string		undefined	The default value when uncontrolled.
pasteTransformer	func		undefined	A function to transform pasted text before applying it.

Slots

default

Scoped slot.

Events

Name	Description
update:modelValue	Emitted when the value changes.
complete	Emitted when all slots are filled.
change	Emitted when the value changes.
select	Emitted when an item is selected.
input	Emitted on each keystroke.
focus	Emitted when the input gains focus.
blur	Emitted when the input loses focus.
mouseover	Emitted when the pointer enters the element.
mouseleave	Emitted when the pointer leaves the element.
paste	Emitted when the user pastes into the input.

Full event reference

Source

client/lib/controls/input-otp/InputOTP.vue