How do I reject an invalid code?

@complete does not reject — Vue events are observational. Pass onComplete to createOtp and return or resolve false. That path clears the value, sets input.errors, and locks mutations while an async check is in flight.

How does form submission work?

Set the name prop on Root. A hidden input is auto-rendered with the current joined value: Place Otp.HiddenInput yourself only when you need to control where the hidden field sits in the form.

Otp

Q: How do I render N boxes?

Bind length on Root and v-for the slot items array — same pattern as Rating. Do not write the number twice.

Q: How do I change which characters are accepted?

Pass pattern on Root. Presets are 'numeric' (default), 'alphanumeric', and 'alphabetic'; a custom RegExp is tested per character. inputmode follows the preset — numeric for 'numeric', text otherwise.

Headless one-time-password and verification-code boxes with auto-advance, paste distribution, and an observational complete event.

Copy Markdown

PreviewRenders elementIntermediateOct 13, 2026

Usage

Otp renders a group of single-character boxes. Items expose fill state via data attributes for CSS-only styling.

Code: —

Theme

Mode

Palettes

Accessibility

<script setup lang="ts">
  import { Otp } from '@vuetify/v0'
  import { shallowRef } from 'vue'

  const code = shallowRef('')
</script>

<template>
  <div class="flex flex-col items-center gap-4">
    <Otp.Root v-slot="{ items }" v-model="code" class="flex gap-2" :length="6">
      <Otp.Item
        v-for="item in items"
        :key="item.index"
        class="w-10 h-12 text-center border border-divider rounded text-lg outline-none [&[data-state=filled]]:border-primary"
        :index="item.index"
      />
    </Otp.Root>

    <p class="text-sm text-on-surface-variant">
      Code: {{ code || '—' }}
    </p>
  </div>
</template>

Anatomy

vue

<script setup lang="ts">
  import { Otp } from '@vuetify/v0'
</script>

<template>
  <Otp.Root>
    <Otp.Item />

    <Otp.HiddenInput />
  </Otp.Root>
</template>

Examples

A second-factor step that posts the code through a real <form> the moment the last box fills. Setting name="code" on Otp.Root auto-renders Otp.HiddenInput, so the joined value travels with the form like any native field — the summary panel reads it back with new FormData(form) to prove what the browser would send. There is no submit button: @complete calls requestSubmit(), which runs the Form submit pipeline (including any registered field validation) before the @submit handler fires.

Form runs in renderless mode so the example owns the <form> element and can hand it to FormData; Form’s @submit resolves after its async validation pass, by which point the hidden input carries the full code.

Reach for this shape when the code is the whole step and nothing else needs confirming. If the server can reject the code and the field must clear and lock while the request is in flight, build on createOtp and its decisional onComplete instead — @complete is observational and cannot veto a value. Related: Input, Form.

File	Role
`useTwoFactor.ts`	Owns the code, the submitted payload, and reset
`TwoFactorForm.vue`	Renders Otp inside a Form and auto-submits on `@complete`
`two-factor.vue`	Wires the composable to the form and shows the posted payload

Enter the 6-digit code from your authenticator app. The form submits itself when the last box fills.

Theme

Mode

Palettes

Accessibility

Recipes

Completion

@complete fires when the joined value becomes a new complete string. It is observational — return values are ignored, same as Form @submit and Portal @close. For reject-and-retry (clear on invalid code, lock while a request is in flight), use createOtp and its onComplete option.

vue

<script setup lang="ts">
  import { Otp } from '@vuetify/v0'
  import { shallowRef } from 'vue'

  const code = shallowRef('')

  function verify (value: string) {
    void fetch('/verify', { method: 'POST', body: value })
  }
</script>

<template>
  <Otp.Root
    v-slot="{ items }"
    v-model="code"
    :length="6"
    @complete="verify"
  >
    <Otp.Item
      v-for="item in items"
      :key="item.index"
      :index="item.index"
    />
  </Otp.Root>
</template>

Accessibility

Otp.Root is a role="group" with a locale-driven default accessible name. Each Item is a single-character text input with autocomplete="one-time-code" so password managers and SMS autofill can target the field.

Keyboard

Key	Action
Character	Writes the character if it matches `pattern` at `min(focused index, current length)` on the compact string and advances. A keystroke in a later empty box lands in the first empty slot, not the focused box
Backspace (empty box)	Clears the previous box and moves focus back
Backspace (filled box)	Truncates the compact value from this index onward — this box and every box after it clear
ArrowLeft / ArrowRight	Move focus to the previous / next box (RTL-aware)
Home / End	Move focus to the first / last box
Paste	Distributes clipboard text from `min(focused index, current length)` on the compact string. A paste into a later empty box fills from the first empty slot, not the focused box

ARIA

Root:

Attribute	Value
`role`	`group`
`aria-label`	Locale default, or `ariaLabel` when `ariaLabelledby` is unset
`aria-labelledby`	When `ariaLabelledby` is set (replaces `aria-label`)
`aria-describedby`	When `ariaDescribedby` is set
`aria-disabled`	`true` when disabled

Item:

Attribute	Value
`aria-label`	Locale default, e.g. “Digit 1 of 6”
`aria-describedby`	Same id as Root when `ariaDescribedby` is set
`autocomplete`	`one-time-code`
`inputmode`	`numeric` when `pattern` is `'numeric'`, otherwise `text`

Data Attributes

Root:

Attribute	Description
`data-disabled`	Present when disabled
`data-readonly`	Present when readonly
`data-complete`	Present when the value is complete and pattern-valid

Item:

Attribute	Values	Description
`data-state`	`filled` \| `empty`	Whether this box has a character
`data-disabled`	present/absent	Inherited from root
`data-readonly`	present/absent	Inherited from root

FAQ

Bind length on Root and v-for the slot items array — same pattern as Rating. Do not write the number twice.

vue

<template>
  <Otp.Root v-slot="{ items }" v-model="code" :length="length">
    <Otp.Item
      v-for="item in items"
      :key="item.index"
      :index="item.index"
    />
  </Otp.Root>
</template>

Set the name prop on Root. A hidden input is auto-rendered with the current joined value:

vue

<template>
  <Otp.Root v-slot="{ items }" v-model="code" name="verification-code" :length="6">
    <Otp.Item
      v-for="item in items"
      :key="item.index"
      :index="item.index"
    />
  </Otp.Root>
</template>

Place Otp.HiddenInput yourself only when you need to control where the hidden field sits in the form.

Pass pattern on Root. Presets are 'numeric' (default), 'alphanumeric', and 'alphabetic'; a custom RegExp is tested per character. inputmode follows the preset — numeric for 'numeric', text otherwise.

vue

<template>
  <Otp.Root v-slot="{ items }" v-model="code" pattern="alphanumeric" :length="8">
    <Otp.Item
      v-for="item in items"
      :key="item.index"
      :index="item.index"
    />
  </Otp.Root>
</template>

Discord

Need help? Join our community for support and discussions ↗

API Reference

The following API details are for all variations of the Otp component.

Otp.Root

10 props, 2 events, 1 slot