Otp API

Headless one-time-password / verification-code input with auto-advance, backspace-back navigation, and paste distribution across boxes.

Explore these related pages for additional context and usage patterns.

Page	Category
Otp	Forms
createOtp	Forms
Input	Forms

Otp.Root

Props

modelValue

string | undefined

Joined OTP value

Default: ""

length

number | undefined

Number of characters (default: 6)

Default: 6

pattern

any

Per-character pattern (default: 'numeric')

Default: "numeric"

disabled

MaybeRefOrGetter<boolean> | undefined

Disable interaction

Default: false

readonly

MaybeRefOrGetter<boolean> | undefined

Show value, prevent changes

ariaLabel

string | undefined

Accessible name for the group

ariaLabelledby

string | undefined

ID of element that labels this group

ariaDescribedby

string | undefined

ID of element that describes this group

name

string | undefined

Form field name — triggers hidden input

namespace

string | undefined

Namespace for context provision

Default: "v0:otp:root"

Events

update:model-value

[value: string]

complete

[value: string]

Slots

default

OtpRootSlotProps

Otp.HiddenInput

Props

namespace

string | undefined

Namespace for context injection from parent Otp.Root

Default: "v0:otp:root"

Otp.Item

Props

index required

number

0-based position within the OTP value

namespace

string | undefined

Namespace for context injection from parent Otp.Root

Default: "v0:otp:root"

Slots

default

OtpItemSlotProps