Vuetify0 is now in alpha! See the roadmap for details.

Theme

Mode

Palettes

Accessibility

createOtp API

API reference for the createOtp composable.

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?