StorybookGitHub

Input OTP

Accessible one-time-password input with grouped, animated character slots.

Enter the code we texted you.

Installation 

npx shadcn-vue@latest add https://vuedocs.canceydejean.dev/r/input-otp.json

Usage

Use for verification codes, PINs, and two-factor auth inputs where each character needs its own focusable slot. Built on vue-input-otp for input handling and caret/selection logic, with slots styled to match the design system.

<script setup lang="ts">
import { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot } from "@/components/ui/input-otp";
</script>

<template>
  <InputOTP :maxlength="6">
    <InputOTPGroup>
      <InputOTPSlot :index="0" />
      <InputOTPSlot :index="1" />
      <InputOTPSlot :index="2" />
    </InputOTPGroup>
    <InputOTPSeparator />
    <InputOTPGroup>
      <InputOTPSlot :index="3" />
      <InputOTPSlot :index="4" />
      <InputOTPSlot :index="5" />
    </InputOTPGroup>
  </InputOTP>
</template>