Skip to contentVibraUI
Connect on X (@ekibuilds)Connect on X (@ekibuilds)
Get started
Inputs & filters

Input OTP

A one-time code split into slots, one character each, that pastes and autofills as a whole.

Vibra's slots transition their background, border and ring rather than all, and the caret stops blinking and holds steady for a reader who has asked for less motion; otherwise it is shadcn's base-nova input OTP on the input-otp package — one real input behind the slots, so paste, autofill and the one-time-code autocomplete work as they do on any field.

Install

npx shadcn@latest add @vibra/input-otp

Needs the @vibra registry in your components.json — set it up once.

Examples

Props

PropTypeDefaultDescription
maxLengthnumber—How many characters the code has; lay out that many InputOTPSlot indexes.
patternstring—Which characters it takes — REGEXP_ONLY_DIGITS from input-otp for a numeric code.
value / onChange / onCompletestring / (value: string) => void / (value: string) => void—The code so far; onComplete fires once every slot is filled.
InputOTPSlot.indexnumber—Which character of the code the slot shows.

Dependencies

Registry

npm

Source

components/ui/input-otp.tsx
"use client"

import * as React from "react"
import { cn } from "@/lib/utils"
import { OTPInput, OTPInputContext } from "input-otp"
import { MinusIcon } from "lucide-react"

function InputOTP({
  className,
  containerClassName,
  ...props
}: React.ComponentProps<typeof OTPInput> & {
  containerClassName?: string
}) {
  return (
    <OTPInput
      data-slot="input-otp"
      containerClassName={cn(
        "cn-input-otp flex items-center has-disabled:opacity-50",
        containerClassName
      )}
      spellCheck={false}
      className={cn("disabled:cursor-not-allowed", className)}
      {...props}
    />
  )
}

function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="input-otp-group"
      className={cn(
        "flex items-center rounded-lg has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40",
        className
      )}
      {...props}
    />
  )
}

function InputOTPSlot({
  index,
  className,
  ...props
}: React.ComponentProps<"div"> & {
  index: number
}) {
  const inputOTPContext = React.useContext(OTPInputContext)
  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}

  return (
    <div
      data-slot="input-otp-slot"
      data-active={isActive}
      className={cn(
        "relative flex size-8 items-center justify-center border-y border-e border-input text-sm transition-[background-color,border-color,box-shadow] outline-none first:rounded-s-lg first:border-s last:rounded-e-lg aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:focus-outline-inset data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40",
        className
      )}
      {...props}
    >
      {char}
      {hasFakeCaret && (
        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
          {/* A blink is a loop, so no token can time it; it stops instead, and
              the caret stays drawn, steady, where the next digit goes. */}
          <div className="h-4 w-px animate-caret-blink bg-foreground motion-reduce:animate-none in-data-[motion=reduced]:animate-none" />
        </div>
      )}
    </div>
  )
}

function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="input-otp-separator"
      className="flex items-center [&_svg:not([class*='size-'])]:size-4"
      role="separator"
      {...props}
    >
      <MinusIcon
      />
    </div>
  )
}

export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }