Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Transaction Confirmation Input OTP for Vue

A payment check for $1,250.00 to John Doe, with a security alert, six boxes, Cancel, and Confirm Transaction.

UI library: Ark UI

The heading is Confirm Transaction, with a line about sending $1,250.00 to John Doe. A Security Check alert sits above six boxes, then Cancel and Confirm Transaction.

Ask for the code before money moves. If the step should block the rest of the app, put it in a Dialog. In Vue, Ark UI does not verify the code.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Input OTP anatomy: root, group, separator, slot

Usage

<div class="flex w-full max-w-sm flex-col gap-6">
  <div class="flex flex-col gap-2 text-center">
    <h2 class="font-semibold text-2xl">Confirm Transaction</h2>
    <p class="text-muted-foreground text-sm">
      You’re about to send $1,250.00 to John Doe
    </p>
  </div>
  <Alert>
    <TriangleAlertIcon aria-hidden="true" />
    <AlertTitle>Security Check</AlertTitle>
    <AlertDescription>
      For your security, please enter the confirmation code sent to your registered email address.
    </AlertDescription>
  </Alert>
  <form class="flex flex-col gap-6" @submit="handleSubmit">
    <Field :invalid='error !== ""'>
      <FieldLabel class="sr-only">Confirmation code</FieldLabel>
      <div class="flex justify-center">
        <InputOTP @value-change="handleValueChange" :value="value">
          <InputOTPGroup>
            <InputOTPSlot class="bg-background" :index="0" />
            <InputOTPSlot class="bg-background" :index="1" />
            <InputOTPSlot class="bg-background" :index="2" />
          </InputOTPGroup>
          <InputOTPSeparator />
          <InputOTPGroup>
            <InputOTPSlot class="bg-background" :index="3" />
            <InputOTPSlot class="bg-background" :index="4" />
            <InputOTPSlot class="bg-background" :index="5" />
          </InputOTPGroup>
        </InputOTP>
<!-- The rest of the file is under Installation. -->

FAQ

How is the security notice built?

An Alert with a TriangleAlertIcon, an AlertTitle reading Security Check and an AlertDescription that says where the code was sent.

How are the two buttons laid out?

In a row with gap-2, each flex-1 so they share the width: an outline Cancel of type button and a Confirm Transaction submit button.

What does Confirm Transaction do?

With a full code, it disables itself and reads Confirming... while a timer stands in for the request, then reports success. A short code shows Confirmation code must be 6 characters. in FieldError.

What does Cancel do?

It clears the code and any error and reports Transaction cancelled. In your app, close the dialog or go back.

Where do the results appear?

The example shows the result in a status line under the form instead of calling an API. Replace that with your request, and show its error in FieldError when the code is rejected.

How is the code field named?

A FieldLabel with sr-only reads Confirmation code. Field links FieldLabel to the code field inside it, so there is no id to match.

API Reference

Alert

No extra props in this demo. The rest is on the Alert page.

Field

Sets invalid="error !== ". The rest is on the Field page.

Input OTP

Sets value-change="handleValueChange", value="value", index="0", index="1", index="2" and index="3". The rest is on the Input OTP page.

Button

Sets click="handleCancel", type="button", variant="outline", disabled="isConfirming" and type="submit". The rest is on the Button page.

All 20 input otp examples