Skip to content

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

Free

OTP in Form with Validation Input OTP for Vue

A one-time password form with a label, a note that the code was sent to your phone, and a Submit button.

UI library: Ark UI

The label reads One-Time Password. Six boxes follow, then Please enter the one-time password sent to your phone. and a Submit button.

Check the length when the form is submitted, and say so if it is short. Put a longer secret in an Input instead of six boxes. 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

<form class="flex w-full max-w-md flex-col gap-6" @submit="handleSubmit">
  <Field :invalid='error !== ""'>
    <FieldLabel>One-Time Password</FieldLabel>
    <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>
    <FieldDescription>
      Please enter the one-time password sent to your phone.
    </FieldDescription>
    <FieldError>{{ error }}</FieldError>
  </Field>
  <Button class="w-fit" type="submit">Submit</Button>
  <p v-if="submitted" class="text-muted-foreground text-sm" role="status">
    You submitted the following values: {{ submitted }}
  </p>
</form>

FAQ

How is the code validated?

On submit: the handler stops the page from reloading, joins the code, and sets an error when it's shorter than six characters. Otherwise it accepts the code.

How is the error shown?

invalid on Field follows the error and FieldError shows the message. Editing the code clears it.

Can I use a form library instead?

Yes. Set invalid from the library's field state and put its message in FieldError; the field doesn't depend on how you validate.

What happens after a valid submit?

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. Here it reads You submitted the following values: and the code.

How is One-Time Password tied to the field?

Field links FieldLabel to the code field inside it, so there is no id to match.

How is the value kept?

In state, written on every change. The value is an array of strings, one per slot, and each change arrives as details.value.

API Reference

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 type="submit". The rest is on the Button page.

All 20 input otp examples