Vuetify0 is now a release candidate! See the roadmap for details.

Theme

Mode

Palettes

Accessibility

createOtp API

Fixed-length one-time-password or verification-code value with pattern-gated entry and completion detection.

Explore these related pages for additional context and usage patterns.

Page	Category
createOtp	Forms
createInput	Forms
createValidation	Forms

Functions

createOtp

(_options?: OtpOptions) => OtpContext

Options

id

ID | undefined

Unique identifier (auto-generated if omitted).

label

string | undefined

Display label.

name

string | undefined

Form field name.

form

string | undefined

Associate with form by ID.

required

boolean | undefined

Whether required.

disabled

MaybeRefOrGetter<boolean> | undefined

Disabled state.

readonly

MaybeRefOrGetter<boolean> | undefined

Readonly state.

rules

(string | FormValidationRule | StandardSchemaV1)[] | undefined

Validation rules.

dirty

((value: T) => boolean) | undefined

Predicate for "has content".

equals

((a: T, b: T) => boolean) | undefined

Equality check for pristine tracking.

Default: ===

length

MaybeRefOrGetter<number> | undefined

Number of characters.

Default: 6

value

Ref<string, string> | undefined

Joined value source.

Default: shallowRef('')

pattern

MaybeRefOrGetter<OtpPattern> | undefined

Per-character pattern. String presets compile to internal RegExps; custom RegExp must match a single character.

Default: 'numeric'

onComplete

((value: string) => boolean | void | PromiseLike<boolean | void>) | undefined

Fire when the joined value first reaches length. Decisional — return / resolve false to reject (clears value, sets error). A rejected Promise is treated as false and logs a warning.

Properties

value

Readonly<Ref<string, string>>

The joined OTP string. Use the mutation helpers (write, distribute, fill, clear) to update. Writing through this ref directly is intentionally prevented to preserve pattern, length, and lock invariants.

length

Readonly<Ref<number, number>>

Resolved character count from the length option.

input

Omit<InputContext<string>, "value"> & { value: Readonly<Ref<string>>; }

The underlying createInput context — exposes ARIA IDs, validation state, focus/touched, and the validate / reset methods. Note: input.value aliases OtpContext.value and is also readonly on the public surface. Use the mutation helpers (write, distribute, fill, clear) to update.

isComplete

Readonly<Ref<boolean, boolean>>

True when value reaches length and every character matches pattern.

isValidating

Readonly<Ref<boolean, boolean>>

True while an async onComplete is in flight. Mutation helpers no-op during this window; consumers can render a spinner against this ref.

Methods

write

(index: number, char: string) => void

Write a single character at index. Empty string clears trailing characters from index onward. Out-of-range indices and characters rejected by pattern are ignored. No-ops while locked.

distribute

(text: string, index?: number) => number

Splice pattern-accepted characters from text into value starting at index. Returns the number of characters written. No-ops while locked or when no characters pass the pattern.

clear

() => void

Clear value and rejection state. No-ops while locked.

fill

(text: string) => void

Replace value with pattern-accepted characters from text, truncated to length. Clears rejection state on deliberate empty input or any accepted characters. No-ops while locked.

accepts

(char: string) => boolean

Whether char is a single character matching the current pattern.

Was this page helpful?