Component

Vue OTP and Verification Code Input

<DomConfirmationCodeInput>

A segmented confirmation-code field with one character per box, automatic focus movement, and full-code paste support.

Playground

Try every prop live

Confirmation code input playground

Use numeric mode for digit-only codes, or keep the default alphanumeric mode for letters and numbers.

Confirmation code

Enter the six-character code sent to your email.

Properties

Control props

Value

Confirmation code without the visual separator.

Length

Number of character boxes.

Separator After

Box position after which to show a visual separator. Use 0 to hide it.

Character Set

Characters accepted by the control.

UppercaseConvert entered letters to uppercase.

Autocomplete

Native autocomplete hint applied to the first box.

Field props

Optional ID override. By default parent forms derive the input ID from the field path using underscores.

Name

Local field name. Parent forms derive the full field path and native HTML name from the form hierarchy.

Label

Visible field label.

Description

Optional helper copy below the field.

Placeholder

Placeholder shown when the control is empty.

RequiredMark the field as required.

DisabledDisable field interaction.

Read OnlyShow the value but prevent editing.

InvalidMark the field invalid.

Errors

Validation errors for this field.

VisibleShow or hide the field.

Validators

No validators yet.

Validators attached to this field. Use functions in Vue code, or serializable records such as { name: "minLength", props: { min: 2 } } in generated schemas.

Validate On BlurRun validators when the field loses focus.

Chrome

Render default field chrome, or hide chrome while keeping form state wiring.

Playground.vuevue

Install

npm install @getdom/studio

vue

<script setup>
import '@getdom/studio/style.css';
import { reactive } from 'vue';
import { DomConfirmationCodeInput } from '@getdom/studio';

const data = reactive({
		"modelValue": "",
		"id": "",
		"name": "",
		"label": "Confirmation code",
		"description": "Enter the six-character code sent to your email.",
		"placeholder": "",
		"required": false,
		"disabled": false,
		"readOnly": false,
		"invalid": false,
		"errors": [],
		"visible": true,
		"validators": [],
		"validateOnBlur": true,
		"chrome": "field",
		"length": 6,
		"separatorAfter": 3,
		"characterSet": "alphanumeric",
		"uppercase": true,
		"autocomplete": "one-time-code"
	});
</script>

<template>
	<DomConfirmationCodeInput
		v-bind="data"
		@update:modelValue="data.modelValue = $event"
	/>
</template>

Demo

Email confirmation

Typing advances automatically. Paste and one-time-code autofill distribute a complete code across all six boxes.

Confirmation code

Enter the six-character code sent to alex@example.com.

You can also paste the complete code into any box.

EmailConfirmation.vuevue

Install

npm install @getdom/studio

vue

<script setup>
import '@getdom/studio/style.css';
import { ref } from 'vue';
import { DomConfirmationCodeInput } from '@getdom/studio';

const code = ref('');
const completedCode = ref('');

/**
 * Records the complete code so the example can show its completion state.
 *
 * @param {string} value Complete confirmation code.
 * @returns {void}
 */
function onComplete(value) {
	completedCode.value = value;
}
</script>

<template>
	<div class="w-full max-w-sm">
		<DomConfirmationCodeInput
			v-model="code"
			label="Confirmation code"
			description="Enter the six-character code sent to alex@example.com."
			@complete="onComplete"
		/>
		<p
			v-if="completedCode && completedCode === code"
			class="mt-3 text-sm font-medium text-success"
			role="status"
		>
			Code complete: {{ completedCode }}
		</p>
		<p v-else class="mt-3 text-xs text-muted-fg">
			You can also paste the complete code into any box.
		</p>
	</div>
</template>

Reference

Props

Control props

Name	Type	TS	Default	Description
`modelValue`	string	string	''	Confirmation code without the visual separator.
`length`	number	number	6	Number of character boxes.
`separatorAfter`	number	number	3	Box position after which to show a visual separator. Use 0 to hide it.
`characterSet`	'alphanumeric' \| 'numeric'	string	'alphanumeric'	Characters accepted by the control.
`uppercase`	boolean	boolean	true	Convert entered letters to uppercase.
`autocomplete`	string	string	'one-time-code'	Native autocomplete hint applied to the first box.

Field props

Name	Type	TS	Default	Description
`id`	string	string	''	Optional ID override. By default parent forms derive the input ID from the field path using underscores.
`name`	string	string	''	Local field name. Parent forms derive the full field path and native HTML name from the form hierarchy.
`label`	string	string	''	Visible field label.
`description`	string	string	''	Optional helper copy below the field.
`placeholder`	string	string	''	Placeholder shown when the control is empty.
`required`	boolean	boolean	false	Mark the field as required.
`disabled`	boolean	boolean	false	Disable field interaction.
`readOnly`	boolean	boolean	false	Show the value but prevent editing.
`invalid`	boolean	boolean	false	Mark the field invalid.
`errors` ts `[ { name: "Validation name", message: "Error message", } ]`	array \| object \| string	Array<ErrorsItem `type ErrorsItem = { name?: string; // Name message?: string; // Message };` >	[]	Validation errors for this field.
`visible`	boolean	boolean	true	Show or hide the field.
`validators`	array	Array<unknown>	[]	Validators attached to this field. Use functions in Vue code, or serializable records such as { name: "minLength", props: { min: 2 } } in generated schemas.
`validateOnBlur`	boolean	boolean	true	Run validators when the field loses focus.
`chrome`	'field' \| 'none' \| false	string	'field'	Render default field chrome, or hide chrome while keeping form state wiring.

Auto-generated from Confirmation code input.props and inline _edit hints.

Events

Name	Payload	Description
@update:modelValue	string	Fired whenever the entered code changes.
@complete	string	Fired when every character box contains a value.
@focus	FocusEvent	Fired when focus enters the segmented control.
@blur	FocusEvent	Fired when focus leaves the segmented control.

Names auto-detected from defineEmits and source emit() calls; payload and description from __doc.events when present.

Keyboard

CharacterEnter one character and move focus to the next box.
BackspaceClear the current box, or move back and clear the previous box when empty.
DeleteClear the current box.
Left / RightMove between character boxes.
Home / EndMove to the first or last character box.
PasteDistribute a complete or partial code across the boxes.