Skip to content

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

Free

OTP with Paste Optimization Input OTP for Ark UI

A six-digit code field with a Paste Code button and a note that paste keeps only the digits.

Six boxes in two groups of three, then a Paste Code button. The note says Paste automatically filters to digits only.

Use the button when codes are copied with spaces or dashes. Typing still works, and a plain Input is fine for one unsplit string. In React, Ark UI fills the boxes when a full code is pasted.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Input OTP anatomy: root, group, separator, slot

Usage

<div className="flex flex-col gap-4">
  <InputOTP onValueChange={handleValueChange} value={value}>
    <InputOTPGroup>
      <InputOTPSlot className="bg-background" index={0} />
      <InputOTPSlot className="bg-background" index={1} />
      <InputOTPSlot className="bg-background" index={2} />
    </InputOTPGroup>
    <InputOTPSeparator />
    <InputOTPGroup>
      <InputOTPSlot className="bg-background" index={3} />
      <InputOTPSlot className="bg-background" index={4} />
      <InputOTPSlot className="bg-background" index={5} />
    </InputOTPGroup>
  </InputOTP>
  <Button
    className="w-full"
    onClick={handlePaste}
    size="sm"
    type="button"
    variant="outline"
  >
    <ClipboardPasteIcon aria-hidden="true" data-icon="inline-start" />
    Paste Code
  </Button>
  <p className="text-muted-foreground text-xs">
    Paste automatically filters to digits only.
  </p>
</div>

FAQ

How does the button read the clipboard?

With navigator.clipboard.readText() in the button's press handler. Browsers allow it after a user action, and some ask for permission the first time.

How are the digits extracted?

A regular expression, NON_DIGITS, removes everything that isn't a digit, then the text is cut to six characters and written to the field's value.

What if clipboard access is denied?

The read throws and the handler ignores it. People can still paste into the field with the keyboard or the context menu.

Does a regular paste work too?

Yes. Pasting into the field fills the slots in order. The button helps when the copied text has spaces, dashes or words around the code.

How is the button styled?

An outline Button at size sm and full width, with a ClipboardPasteIcon marked data-icon inline-start. It's type button, so it never submits a form.

How is the value kept?

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

API Reference

Input OTP

Sets onValueChange={handleValueChange}, value={value}, index={0}, index={1}, index={2} and index={3}. The rest is on the Input OTP page.

Button

Sets onClick={handlePaste}, size="sm", type="button" and variant="outline". The rest is on the Button page.

All 20 input otp examples