Form input

OTP input

Paste, autofill, edit, and group a code without multi-input focus traps.

Verification code

Playground

Configure the component and copy synchronized Vue code.

Verification code

Properties

Length

Mode

Which characters the field accepts, and which keypad it asks for.

Label

A code has no single container for a label to float into, so there are only two placements. Hidden keeps the accessible name.

State

Mutually exclusive, so one control rather than three switches.

Mask

Groups

Splits the code 3 + 3. Groups are separated by rhythm — the gap between them is wider than the gap between cells.

Groups

Slots

Vue

<m-otp-input
  v-model="code"
  label="Verification code"
  :length="6"
  mode="numeric"
  :groups="[3, 3]"
>
</m-otp-input>

Token map

The manual manifest combines inherited token owners with local deltas.

Search tokens

MOtpInput · All17 tokens

md-otp-input

md-otp-input-field-outlineg($t, 'field.outline')

System token--md-sys-color-outline

md-otp-input-field-colorg($t, 'field.color')

System token--md-sys-color-on-surface

md-otp-input-field-filled-containerg($t, 'field.filled-container')

System token--md-sys-color-surface-container-highest

md-otp-input-separator-colorg($t, 'separator.color')

System token--md-sys-color-on-surface-variant

md-otp-input-message-colorg($t, 'message.color')

System token--md-sys-color-error

MOtpInput API

Props, slots, and events are generated from the current public kit contract.

MOtpInput

Field family

src/runtime/components/ui/otp-input

Props

NameTypeDefault

disabledPrevents interaction and applies the disabled visual state.

booleanfalse

loadingReplaces content with progress feedback and prevents interaction.

booleanfalse

readonly

booleanfalse

length

number6

mode

'numeric' | 'alphanumeric''numeric'

groups

number[]() => []

separatorGlyph between groups. Empty by default — the gap already separates them.

string''

mask

boolean | stringfalse

autofocus

booleanfalse

labelThe accessible name. Has no default on purpose: the kit does not invent user-facing copy in a language it cannot know. A field with neither this nor a `#label` slot warns in dev — it would ship unnamed.

stringundefined

labelPlacement

'top' | 'hidden''top'

error

booleanfalse

errorMessage

stringundefined

path

stringundefined

name

stringundefined

Slots

Events

@completestring

@invalidstring

@clearvoid