OTP Input

Form

A segmented one-time password input for 2FA and verification codes. Supports paste and keyboard navigation.

Props

Prop	Type	Default	Description
`modelValue`	`string`	—	Current value (v-model).
`length`	`number`	`6`	Number of input boxes.
`type`	`'text' \| 'password'`	`'text'`	Input type (password to hide digits).
`disabled`	`boolean`	`false`	Disable the inputs.
`error`	`boolean`	`false`	Show error border on all inputs.

Examples

6 digits

vue

<script setup lang="ts">
const code = ref('')
</script>
<template>
  <DsOtpInput v-model="code" :length="6" @complete="(v) => console.log('Code:', v)" />
</template>

Error state

Skeleton

Use DsOtpInputSkeleton as a loading placeholder while content is being fetched.

6 digits

vue

<DsOtpInputSkeleton :length="6" />

4 digits

vue

<DsOtpInputSkeleton :length="4" />

Accessibility

Each input has aria-label="Digit N".
Supports paste from clipboard, auto-advance on input.
Arrow keys navigate between boxes, Backspace removes and focuses previous.

NumberInput

PhoneInput