Skip to content

Input OTP

A one-time code, one box per character. Paste fills every box; Backspace moves back.

Sourcecomponents/input-otp.tsx

Usage

Input OTP usage
import { Field, FieldLabel } from "@/components/field";import { InputOTP, InputOTPSeparator, InputOTPSlot } from "@/components/input-otp";
export function InputOTPUsage() {  return (    <Field>      <FieldLabel>Verification code</FieldLabel>      <InputOTP length={6}>        <InputOTPSlot />        <InputOTPSlot />        <InputOTPSlot />        <InputOTPSeparator />        <InputOTPSlot />        <InputOTPSlot />        <InputOTPSlot />      </InputOTP>    </Field>  );}

When to use

Use when

One-time codes and PINs

Don’t use when

Free text or numbers of unknown length; use Input